How to Add 2 or 3 Columns to Pages in Shopify


Creating 2 Columns of Text On a Page in Shopify

This might sound simple, but if you’re not sure how to use HTML it can be daunting – particularly with mobile responsiveness in mind. Wanting to add a few columns of text and/or imagery to a page in Shopify can be a slight hassle to shop owners as its framework doesn’t support this in Pages out of the box.

You’ll need to edit a bit of CSS and HTML, but no coding experience is necessary–let’s walk you through each step.

Step 1: Open the Style.css.liquid file for your theme

Go to Themes > Template Editor.

Note: It might be called something else, but it will always contain “css.liquid

Step 2: Copy and paste this code into your css.liquid file

Copy 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;
}
}

Now scroll to the bottom of your css.liquid file and paste the code into the bottom of the file.

Hit Save.

Step 4: Copy and paste this code into your page

Select the HTML mode of your text file editing box on your page, and paste the below HTML where you want the 2 columns to appear.

<div class="one-half-column-left">
<p>Insert the content for the left column here.</p>
</div>
<div class="one-half-column-right">
<img src="img_girl.jpg" alt="Girl in a jacket" width="100%" height="auto">
</div>
<br style="clear:both;" />

Hit Save.

Step 5: Adjust each column’s content

Add your text content within the <p></p> HTML code as seen above. To add an image in this section, copy and paste this code in replacement of the <p></p> sections and adjust as necessary:

<img src="img_girl.jpg" alt="Girl in a jacket" width="100%" height="auto">

How to add 3 columns to your page

To show 3 columns rather than 2, 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 your 3 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;" />

If you have any questions or need help on your Shopify project, contact us directly – we’d love help! You might’ve heard already, but Shopify is our jam 🤘

5

Share This

Copy Link to Clipboard

Copy