How to create two columns of text on pages in Shopify

Video Walkthrough

Creating two columns of text on a page in your Shopify store is not difficult. You'll need to edit a bit of code, but no coding experience is necessary--I'll walk you through each step.

1. First, you will need to open the Style.css.liquid file for your theme. This can be found under Themes > Template Editor. If you don't know where to find this, follow the steps in this post: How to edit the CSS of your Shopify theme. Note: The name of your CSS file may vary depending on your theme, but it will end in "css.liquid." Do not edit checkout.css.liquid. Your CSS file will probably be named style.css.liquid or something similar.

2. Scroll down to the bottom of style.css.liquid, and then copy and paste this code:

.one-half-column-left {
width:48%;
float:left;
}

.one-half-column-right {
width:48%;
float:right;
}

@media only screen and (max-width: 600px) {
.one-half-column-left, .one-half-column-right, 
.one-third-column, .one-third-column-last {
float:none;
width:100%;
margin-right:0;
}
}

4. Now that you've added the necessary CSS, you just need to add some simple code within the pages where you want to show two columns of text. Go to the page editor in Shopify (click "Pages" in the sidebar of your admin panel), then choose the page you want to edit. Next, click on the "Show HTML" button, which is located on the right just above the page editor.

To create the columns, just copy and paste this code into the HTML editor:

<div class="one-half-column-left">
<p>Insert the content for the left column here.</p>
</div>
<div class="one-half-column-right">
<p>Insert the content for the right column here.</p>
</div>
<br style="clear:both;" />

And that's it! You'll notice that when you view the page in the HTML editor, each paragraph is wrapped in HTML tags that look like this: <p> and</p>.  Those signify the beginning and end of a paragraph, so they should be included inside the column code as shown above.

Sometimes the page editor does funky things when you edit the text, so you may notice that the column layout gets broken while you are editing the page content. If that happens, just go back to the HTML editor and make sure the code is still there as shown above, with the content for each column inside the div tags.

UPDATE: How to create THREE columns

To show three columns rather than two, follow the same steps above, but use this CSS instead:

.one-third-column {
width:32%;
margin-right:2%;
float:left;
}
.one-third-column-last {
width:32%;
margin-right:0;
float:right;
}

@media only screen and (max-width: 600px) {
.one-half-column-left, .one-half-column-right, 
.one-third-column, .one-third-column-last {
float:none;
width:100%;
margin-right:0;
}
}

Then, use this code in your HTML editor of the page or product on which you want to show three columns:

<div class="one-third-column">
Insert the content for the first column here.
</div>
<div class="one-third-column">
Insert the content for the second column here.
</div>
<div class="one-third-column-last">
Insert the content for the third column here.
</div>
<br style="clear:both;" />

Still having problems, or do you have any questions or comments? Leave a comment below!