Display text in columns or grid-like layouts by using your theme's HTML framework. Copy the code below and replace the placeholders to insert your content. Elements of the framework vary across themes so locate the right code for your theme below.
One Column
<div class="row">
<div class="sixteen columns">
Add content
</div>
</div>
Two Columns
<div class="row">
<div class="eight columns alpha">
Add content
</div>
<div class="eight columns omega">
Add content
</div>
</div>
Three Columns
<div class="row">
<div class="five columns alpha">
Add content
</div>
<div class="five columns">
Add content
</div>
<div class="five columns omega">
Add content
</div>
</div>
Four Columns
<div class="row">
<div class="four columns alpha">
Add content
</div>
<div class="four columns">
Add content
</div>
<div class="four columns">
Add content
</div>
<div class="four columns omega">
Add content
</div>
</div>
Offset Columns:
<div class="row">
<div class="ten columns offset-by-three">
Add content
</div>
</div>
Superstore
Take a vertical column of text and turn it into a balanced grid of content by using this shortcode:
<div class="grid">
<div>
<h2>Heading column 1</h2>
<p>Content for column 1</p>
</div>
<div>
<h2>Heading column 2</h2>
<p>Content for column 2</p>
</div>
<div>
<h2>Heading column 1, row 2</h2>
<p>Content for column 1 row 2</p>
</div>
<div>
<h2>Heading column 2, row 2</h2>
<p>Content for column 2, row 2</p>
</div>
</div>
Step 1: Copy to the page content, product description, etc.
Copy this shortcode, then paste it to the page content, product description, or other text field using HTML view. To activate the HTML view, select Show HTML in the top-right corner of the Content/Description field.
Step 2: Replace placeholders with copy
In the shortcode, replace Heading column 1, Content for column 1, Heading column 2, etc. with your product description segments.
Step 3: Save, preview, repeat
It's best to do the segments individually, saving and checking the preview each time. This way you can confirm the success of the applied shortcode or retrace your steps to fix it before moving on.
Turbo 4.0+
Artisan
Flex
Parallax 4.0.3
Retina 4.7.4+
Responsive 7.2.5+
Mobilia 6.2.4+
Updated theme versions introduce some new column size names. Additionally, there are new helper classes that can be applied for different screen sizes.
One Column
<div class="container">
<div class="one-whole columns">
Add content
</div>
</div>
Two Columns
<div class="container">
<div class="one-half columns">
Add content
</div>
<div class="one-half columns">
Add content
</div>
</div>
Three Columns
<div class="container">
<div class="one-third columns">
Add content
</div>
<div class="one-third columns">
Add content
</div>
<div class="one-third columns">
Add content
</div>
</div>
Four Columns
<div class="container">
<div class="one-fourth columns">
Add content
</div>
<div class="one-fourth columns">
Add content
</div>
<div class="one-fourth columns">
Add content
</div>
<div class="one-fourth columns">
Add content
</div>
</div>
Five Columns
<div class="container">
<div class="one-fifth columns">
Add content
</div>
<div class="one-fifth columns">
Add content
</div>
<div class="one-fifth columns">
Add content
</div>
<div class="one-fifth columns">
Add content
</div>
<div class="one-fifth columns">
Add content
</div>
</div>
Six Columns
<div class="container">
<div class="one-sixth columns">
Add content
</div>
<div class="one-sixth columns">
Add content
</div>
<div class="one-sixth columns">
Add content
</div>
<div class="one-sixth columns">
Add content
</div>
<div class="one-sixth columns">
Add content
</div>
<div class="one-sixth columns">
Add content
</div>
</div>
Seven Columns
<div class="container">
<div class="one-seventh columns">
Add content
</div>
<div class="one-seventh columns">
Add content
</div>
<div class="one-seventh columns">
Add content
</div>
<div class="one-seventh columns">
Add content
</div>
<div class="one-seventh columns">
Add content
</div>
<div class="one-seventh columns">
Add content
</div>
<div class="one-seventh columns">
Add content
</div>
</div>
Eight Columns
<div class="container">
<div class="one-eighth columns">
Add content
</div>
<div class="one-eighth columns">
Add content
</div>
<div class="one-eighth columns">
Add content
</div>
<div class="one-eighth columns">
Add content
</div>
<div class="one-eighth columns">
Add content
</div>
<div class="one-eighth columns">
Add content
</div>
<div class="one-eighth columns">
Add content
</div>
<div class="one-eighth columns">
Add content
</div>
</div>