Supported Versions
The details shared here apply to the most recent version of Turbo. To keep your theme up to date, check out this helpful document.
In This Article
Product Page Description
The Product Page Description, is any content that you add in the Product's admin page in the 'Description' rich text area:
The main goals of your product descriptions should be:
- Explain what, exactly, the product is and what it does.
- Describe the tangible properties of the product — materials, colors and any technical specifications.
- Proactively answer shoppers’ questions and concerns about the product.
- Influence the shopper to decide the product is a good fit for them and purchase it.
- Integrate with your SEO strategy.
- Illustrate your products by way of high quality imagery and video.
By default, the product page description will show up on a column beside your main product image area. However, there are some other design options that you can consider! Within the Turbo theme, you can include the use of tabs, embed videos, and move either part or your whole description under the product image/below the fold!
Product Description Configuration Options
Tabs
Using tabs to organize some or all of your product's description can make it clear and easier to access certain information, and is a good way to add more details about products in a small amount of space.
When editing a product description, you can click on the [< >] 'Show HTML' button in the upper right of the 'description' rich text area to toggle into HTML mode.
You can use the live Tabs Editor to easily generate your tabs.
You can create tabs by following this HTML example. In the example code, the bold text should be customize to your specific content:
<!--Start tab labels--> <ul class="tabs"> <li><a class="active" href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <!--Start tab content--> <ul class="tabs-content"> <li class="active" id="tab1">Tab 1 content</li> <li id="tab2">Tab 2 content</li> <li id="tab3">Tab 3 content</li> </ul>
Note that there are two distinct sections of code above. The first part, which is the first six lines, is used to create the labels that users see on the tabs. Then, the last six lines control the the actual content that users see when clicking a specific tab.
Video Embeds
If you have a YouTube or Vimeo video you'd like to add into your product's description, you can do by adding in the embed code!
For YouTube, you can grab the video embed code, by clicking Share > Embed > Select and Copy the whole iframe code:
For Vimeo, you can grab the video embed code, by clicking Share > Select and Copy the whole Embed code:
To add the video embed code, in your Product Admin Page, you can click on the [< >] 'Show HTML' button in the upper right of the 'description' rich text area to toggle into HTML mode, you can then simply paste the embed here!
Split Tag
If you'd like part of the product's description to display under the main product image, you can make use of the 'split' option!
In your Product Admin Page, you can click on the [< >] 'Show HTML' button in the upper right of the 'description' rich text area to toggle into HTML mode then, you'll have to place this tag in your product description at the point where you'd like the description to 'split' into the two components:
<!-- split -->
This is also a great way to add some additional content such as additional images, text, videos on your product page while still using the default product page template.
Note: If you enter "<!-- split -->" anywhere but the code view, this feature will not work. Also, the split tag does not appear in the rich text editor; you must be in code view to see it.
The content that is after the 'split' tag will then show full width, beneath the main product image, product gallery, and product form:
To take this a step further, you can create some interesting and creative layouts by using the 'split' tag along with our Column Framework!
After the 'split' tag, the code for 'Three Columns' has been added in to display the Product Specs list and two images to the right.
A Heading and regular paragraph follows that have both been centered aligned. Then, a large image added in at its original size.
There are dozens of layout combinations you can create by simply using the 'split' tag and Column Framework - all while using the default 'product' template!
Product.description-bottom
If you'd like to move your entire description below the main product image so it can use the full content area width, you can use the 'product.description-bottom' template.
To assign this template, in your Product Admin Page, under Theme Templates, select 'product.description-bottom':
Examples
Here's how we set up some of the Product Descriptions in our demo shops for Turbo!
-
Portland
Product Description- Tabs added in for 'Features,' 'Use + Care' and 'Sustainability'.
- 'Description position' product info setting is 'above product form'. -
Seoul
Product Description- Tabs added in for 'Materials' and 'Specifications'.
- 'Description position' product info setting is 'above product form'. -
Florence
Product Description- Description entered normally through 'Description' rich text area. Some details are listed with hyphens.
- 'Description position' product info setting is 'above product form'. -
Chicago
Product Description- Description entered normally through 'Description' rich text area.
- 'Description position' product info setting is 'below product form'. -
Dubai
Product Description- Description entered normally through 'Description' rich text area.
- 'Description position' product info setting is 'above product form'.
Mobile layout
When viewed on a mobile device, the product description will responsively fit into your screen size. The main product image will be at the top, with the page description following.
Tabs on mobile
On mobile devices, the theme will attempt to keep all of the tabs on the same line, but, depending on the exact amount of space needed, it may go to another line.
