Customize the Description using the dedicated rich text editor in your Products admin.
An effective and optimized product description describes the purpose, qualities, materials, and advantages of the product. Merchants enhance the products' Search Engine Optimization (SEO) through keywords and headings included in product descriptions. Also, reduce customer support costs by proactively answering common questions about the product within the description.
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. Enhance your product page description by adding tabs, embedding a video, splitting the description,
Tabs
Using tabs to organize some or all of your product 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 actual content that users see when clicking a specific tab.
Video Embeds
To add a YouTube or Vimeo to your product's description, copy and paste the embed code to your product description's HTML.
For YouTube, gather the embed code by clicking Share > Embed > Select and Copy the whole iframe code:
For Vimeo, gather the embed code by clicking Share then copying the code included in the Embed field.
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':
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.
