ShowTime 6.0 introduces a lot of exciting new features to the theme. One of the features we're most excited about is the addition of description enhancements. By enabling this, you will be able to:
- Create a "short description" area and show the rest of your description elsewhere on the product page
- Populate custom product tabs to break up large amounts of content on the page
- Choose whether you would like your product description to show to the right of your product gallery or down below in a tab
Let's take a look at how to do each one.
First steps
In order to trigger the description enhancements, they must be enabled in your theme settings. To do so, please follow these steps:
- From your Shopify dashboard, click Online Store > Themes and look for ShowTime.
- Click the Customize button to proceed to the theme editor
- Navigate to a product page in the editor by clicking on the drop-down menu as shown below
- The settings area on the left will change. Click on the Product heading to show the settings for the product page
- Click the Enhanced product description checkbox to enable these features, then click Save.
Create a Short Description
With the enhancements enabled, you now have the ability to split the product description content into two parts. This is useful if you want to show a short description right below the product's price and show the rest of a long description after the product options and add to cart button (or in a tab below). This ensures that a customer will not need to scroll down the page forever before having the opportunity to purchase if you have a long product description. Setting this up is very easy. Please follow the steps below:
- First, open the product you want to edit from within your Shopify admin area.
- Within your product description, locate the area of your product description you wish to split and make a note of the text
- Enter code view by clicking the <> button in the upper right corner of the description editor
- Locate the text you noted in step 2 and place your cursor after any closing HTML tag that exists to separate this content. For example, if your description is in paragraphs, a paragraph may look like the below, so you would want to add it after the </p>
<p>This is a paragraph.</p>
- Place this snippet of code where you want to split the code:
<!-- split -->
- Don't forget to save your description and that does it! Now, the content you have above the "split" will show below your product's price before your product options and cart button. The content after the "split" will show below your cart button.
Create Custom Product Tabs
ShowTime has always offered the ability to add tabs to your product pages, but until now, you could only show the same static content in the tabs on all your product pages. While this is useful for general information like return policies or global store information, many customers have asked how to create unique custom tabs for their products. In the past, we suggested using an app or a custom metafield solution, but with the release of ShowTime 6.0, we've created an easier method that works with the theme right out of the box! Ready to get started? Please follow these steps:
1. Begin by visiting the product you wish to edit in your Shopify admin area
2. Switch over to code view by clicking the <> button in the upper right corner of the product description editor
3. Scroll to the end of your code (if you wish to add your tabs after your current product description) or locate where in your product description you want to add your tabs and place your cursor there. Make sure it is not within any unclosed HTML tags. For example, do not perform the steps below within a <p> tag or you might break the layout of your page.
4. Add this bit of text in your description [TABS] [/TABS] (the text should be uppercase and appear just like that). If you're not sure what theme version you have, please see this article for help determining this.
5. Now switch back out of code view back to your regular description editor you're used to. It should look something like this:
6. To create a tab, place your cursor after [TABS] (or <!-- TABS --> in the latest versions) and enter a name for the tab and then the content below it. Once you have the name entered, select it and change it to a Heading 5 element. See this quick video for clarification:
7. You've just created your first tab! Simply continue this process until all your tabs are created. If it's easier, here is a snippet of code you can use to quickly and easily add tabs to your product. Simply edit the content as you see fit, just remember that you must first add this in code view. Once you've pasted it in, you can switch back out of code view to the normal editor and edit the content.
<!-- TABS --> <h5>Tab1</h5> <p>Content for tab 1.</p> <h5>Tab2</h5> <p>Content for tab 2.</p> <h5>Tab3</h5> <p>Content for tab 3.</p> <!-- /TABS -->
FAQ & Troubleshooting
What if I just want one tab and to move my product description down there?
Simple, just add something like this (in code view):
<!-- TABS --> <h5>Product Description</h5> <p>Your description goes here.</p> <!-- /TABS -->
What if I want to have a short description at the top of the page near the cart and variant options and the rest of my description in tabs?
Start with something like this (in code view):
<p>This is your short description.</p> <!-- split --> <!-- TABS --> <h5>Product Description</h5> <p>Your description goes here.</p> <!-- /TABS -->
How do I add my Shopify product reviews to a tab?
If one of your tab names contains the word "Reviews" (without the quotes) and you have the Shopify product reviews app enabled, the theme will automatically show the reviews in this tab.
My store is not in English but I want to show product reviews in a tab. What do I do?
A quick bit of code customization will be required. To adjust this, please follow these steps:
- Login to your Shopify dashboard
- Go to Online Store > Themes > ShowTime
- Click the Actions button and then Edit Code
- Navigate to the Sections folder and open the file called product.liquid
- Around line 374, you should see:
{% if title_part contains "Reviews" %}
Replace the word Reviews in that bit of code with the proper word for reviews in your native language.
- Save the file
Now, when you add a new tab, give it the name you specified above and the reviews will display.
I've tried following these steps but my product description is messed up or missing content. Help!
Likely what has happened is you either have unclosed HTML tags, you haven't closed your<!-- TABS --> tag, or you've entered the <!-- split --> code more than once. You can only use the split and tabs functionality once per product page.
Comments
0 comments
Article is closed for comments.