Skip to content

Cart

Your cart is empty

Article: Creating Columns on Pages in Shopify

Shopify

Creating Columns on Pages in Shopify

There are a ton of things that I love about using Shopify. However, one of the main things that bums me out hard about Shopify is that it making the straight pages go to looking custom, can seem like a headache.

But friend, today I'm showing you how you can make some columns in Shopify and create some custom looking page, with a little magical coding. So put on your big kid pants and let's do this!

BUT WHY COLUMNS?

There are two main reasons that you may want to consider giving these columns a try on your pages: 

1. Help organize pages such as Stockists, Team Profiles, sizing charts, without having to use tables. If you've used tables in Shopify before you pretty much know they're the devil, so best to stay clear and use a little CSS + HTML magic!

2. Create visually interesting layout to pages or blog posts. No need to have the same old same old anymore! You can create pages with a little flare, like this one: 

Ready to give it a try? Follow the steps below!


STEPS BY STEP ON HOW TO BUILD COLUMNS ON PAGES

STEP 1: COPY THIS CSS 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;
}
}

STEP 2: DUPLICATE YOUR THEME IN SHOPIFY

In your Shopify admin, click on ONLINE STORE then THEMES. In the CURRENT THEME, section click the ACTIONS dropdown and click the DUPLICATE THEME


WHY DUPLICATE A THEME?
Duplicating your theme creates an exact copy of your theme that you can then make changes too without affecting the live version of your theme. This means, if something breaks or gets deleted you'll always have a backup. 

Duplicating your theme is an important step to do before you add any apps or make any changes to your theme.


STEP 3: ON YOUR DUPLICATED THEME AND CLICK THE EDIT CODE BUTTON

You'll find the duplicated theme in your More themes section just below the current theme. Click the Actions button and then click the Edit Code button.

STEP 4: FIND YOUR CSS STYLESHEET

When you get to the code section on the left there will be a sidebar with folders and all of your theme files. Scroll down in this sidebar until you see the Assets Folder. 

Click on the Assets folder there should be a file called "theme.scss.liquid" or have scss or css in the name. This file is usually in one of the top 3 files in this folder.

Click on the file to open it.

STEP 5: SCROLL ALLLLL THE WAY TO THE BOTTOM OF THE FILE

When you're adding CSS to your file, you always want to add it at the very bottom of the file. Instead of scrolling through the whole file like a chump, if you're on a Mac if you click COMMAND + Down Arrow, you'll jump to the bottom. On a PC it would be Ctrl+End . 

STEP 6: PASTE THE CODE GIVE IN STEP 1

At the bottom of the CSS stylesheet paste the code given in step 1 and SAVE.

STEP 7: ON THE FAR LEFT SIDEBAR CLICK THE PAGES LINK 

Once you're in the pages section. Find the page in the list that you want to add the columns to and click to open the page editor.

STEP 8: COPY THE FOLLOWING HTML

<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;" />

STEP 9: IN THE PAGE EDITOR CLICK THE <> 

On the top right of the text box you'll see a little button that looks like this <> . This is for adding HTML to a page to add some fanciness. 

Once you click the <> in the text box paste the code given in Step 8. SAVE.

STEP 10: EDIT THE WORDING TO HAVE THE TEXT THAT YOU'D LIKE IN YOUR COLUMNS. SAVE.

STEP 11: PREVIEW THEME

Because you're working on a duplicated theme you'll need to click on themes in the left sidebar (under Online store), then in the More themes section click ACTIONS and Preview. Now you'll be able to see the version of the theme that you've been working on. 

STEP 12: PUBLISH THEME

If everything looks okay with the theme, click on the Actions button in the duplicated theme menu and click the publish button. This will make your columned theme live. 

STEP 12 1/2: GIVE YOURSELF A "SELF FIVE"

DID YOU HAVE A SNAFU WITH THIS TUTORIAL? LET ME KNOW IN THE COMMENTS BELOW AND WE CAN GET IT FIXED!

Looking to add three-columns? Totally possible check out the code for 3 columns here.