​

Another example: Vantage Theme

<div class=”desktop-6tablet-6mobile-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-3tablet-3mobile-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”>