Our themes include the option to ‘split’ a product description on your product pages into two parts: one part next to the featured image, and the second part taking up the full width of the page underneath the featured images and above the Related Products.
While this feature is a great way to create custom layouts, please note that it may require custom HTML code to create advanced layouts (unless you use the three-column option outlined below). You can use our HTML column framework to get started, but Out of the Sandbox Theme Support does not cover creating your own designs and layouts.
Add Split Code to Product Description HTML
Go to Products to edit your product Description. Click Show HTML to open the HTML view.
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.
To make use of the 'split' tag, you will need to use the default product page template, or, if you're using the Flex theme, the product.classic 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 content editor; you must be in code view to see it.
It would look something like this in your product description editor (after triggering the HTML view by pressing '<>' in the top right corner):
This will generate a product page that looks like this:
Combine with Column Framework
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 to display the Vase Set list and two images to the right.
The Heading and regular paragraph that follows have both been center-aligned. Then, a large image added in at its original size and three more columns at the bottom!
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!
If you're looking to move the entire product description below the featured product image, check out our article on the product.description-bottom template.