How to Create Multiple Columns Using HTML

Have you ever gone to insert an image into your page, then spent the next 30 minutes toying with the text-wrap? Do you wonder how everyone else gets those neat columns of text and imagery?

It’s actually easier than you might think, and most Shopify themes come pre-built to accommodate the types of changes that will allow you to build multiple columns without too much trouble.

In this tutorial, we’ll walk you through the steps to adding columns within your Shopify pages using <div> tags within your HTML. (Don’t worry, we’ll make it super easy!)

When would you want to use this?

Below are a few different examples of how different column combinations can be used within your Shopify content pages:

• Two columns: Separating text on one half of the page, and showing an image on the other half.
• Three columns: Showing a grid of photos with 3 across and 3 down.
• Four columns: Displaying 4 different product options with text, as 4 separate columns.

Let’s dive into how you set those up.

Step 1: Open your content page HTML editor

• In your Shopify Admin, go to Online Store > Pages> Select your page
• Click the HTML editor <>

Step 2: Determine which format of HTML you should use based on your specific theme. See the different options below:

Out of the Sandbox Themes (Parallax, Retina, Mobilia, Responsive),

The following is an example of an even two column layout:

<div class="eight columns alpha">
Column 1
</div>
​
<div class="eight columns omega">
Column 2
</div>

The following is an example of a three column layout:

<div class="one-third column alpha">
  Column 1
</div>

<div class="one-third column">
  Column 2
</div>

<div class="one-third column omega">
  Column 3
</div>

The following could be used for a four column layout:

<div class="four columns alpha">
  Column 1
</div>

<div class="four columns">
  Column 2
</div>

<div class="four columns">
  Column 3
</div>

​<div class="four columns omega">
  Column 4
</div>

Another example: Vantage Theme

<div class=”desktop-6 tablet-6 mobile-2“>

This works off a 12-column layout as well, meaning:

• desktop-6 gives you a half-column on the desktop (12 divided by 6 = 2 half columns)
• tablet-6 gives you a full column on a tablet (on a tablet, there’s only room for 6 columns)
• mobile-2 gives you a full column on mobile (in mobile there’s only room for 2 columns)

<div class=”desktop-3 tablet-3 mobile-half“>

This would give the column:

• desktop-3 gives you a quarter-column on a desktop (12 divided by 3 = 4, hence 4 columns)
• tablet-3 gives you a half-column on a tablet (6 divided by 3 = 2 half columns)
• mobile-half gives you a half-column on mobile (in mobile there’s only room for 2 columns, 2 divided by 1 gives you 2 half-columns)

And so on.

How do I know what structure my theme uses?

1. Open the demo store of the theme you’re using.  For example, if you’re using Vantage, open https://vantage-shopify-theme.myshopify.com.
2. Find a section that has the columns you want to copy.  E.g. if you want 4 columns, find a product grid with 4 columns.
3. Right-click and choose “Inspect Element”.  You will see a class, similar to the above. Most themes work on a 16 or 12 column layout.  So you can copy what they have done, and apply the same classes to your own columns.

Example:

Step 3: Insert the HTML and replace the filler text with your desired content.

If you’re inserting an image instead of text, simply highlight the text and replace with an image using the page editor.

Note: It’s important to use the format of HTML that suits your current theme. You can see how many columns your theme is using to determine what numbers as above.

For example, instead of <div><img src=”your-image-here.jpg”></div>, use <div class=”three columns”><img src=”your-image-here.jpg”></div>

—

Using these steps, you’ll be able to build neat columns into your Shopify pages in just a few minutes. And if you’ve got any questions about this process, drop them in the comments! We’ll be happy to help & will get back to you as fast as we can.

Thank you for checking out our Shopify Insider Blog @ Blackbelt Commerce,  we have many other valuable and informative posts that you will help you to continue to optimize your websites such as Partnership Guidelines,  what-are-the-latest-trends-in-e-commerce, which are the best e-commerce websites,  and What We Learned From Our Rebrand. Please check out our other services.