How do I break my product description into two blocks?

Sometimes you will want a brief description of your product to appear next to your photography, and still have an in-depth description of the product below the imagery in a full-width format. Pipeline makes with possible by allowing you to write  [split] inside the product description. Your description will then be split into two sections - one beside the image and the other below.

Tips when using [split] with H6 tabs

Try to keep all your tab content at the very bottom/end of the product description. Start with the main product description, add your split tag and then the last portion of your product description which falls under the product images. Then finally add your tabs content. There should be nothing else after your tab content. 

Here's an example of the layout:

Product description 1 - right column
[split]
Product description 2 - below product images
H6 tab 1
tab 1 content
H6 tab 2
tab 2 content

Or in code:

<p>Product description part 1 for the top</p>

[split]

<p>Product description part 2 for the bottom</p>

<h6>Tab 1 title</h6>
<p>Tab 1 content</p>

<h6>Tab 2 title</h6>
<p>Tab 2 content</p>

<h6>Tab 3 title</h6>
<p>Tab 3 content</p>

Use the Code View icon in the toolbar to view your code. The other toolbar icons will disappear while viewing in code view. Click again to toggle back:


Additional Tip

If you'd like to remove any extra padding above the lower section of your product description, you can add this line of code:

Add the following code to the very bottom of this file on a new line:
assets/style.scss.liquid

Or if you're using Pipeline 4:  
assets/theme.scss.liquid

/* -- code to reduce margin below product images -- */
.product-description--below {margin-top: 0px;}
/* - end - */

Save the file.

Still need help? Contact Us Contact Us