How to create a 3 column grid with images
Using the grid framework that our themes are built on provides a very simple way to create 3 column pages within your store for a simple image gallery. The following is designed to work on both pages and blog articles from within your Shopify admin.
- Open a page or blog article in your Shopify Admin.
- Insert all of the images that you want to use on the page.
- On the top right of the content window click on the < > ( show HTML ) icon on the top right side. You are now editing the page within the HTML view and will see what your page looks like in code view.
- Your images will all appear on the page as code, each of those will look like this:
- To create 3 equal columns which will be 33% width on Desktop and Tablet and then stacked on Mobile add this before each one of those images:
- Then add this below each image:
- Click save when done, this will split those images into a 3 column layout similar to your collection pages.
<img src="....................... "> <br>To make things easy for yourself put each image on its own line by pressing return before each, you will have something like this:
<img src="....................... "> <img src="....................... "> <img src="....................... ">
<div class="desktop-4 tablet-2 mobile-3">
</div>It should look like this:
<div class="desktop-4 tablet-2 mobile-3"><img src="....................... "></div> <div class="desktop-4 tablet-2 mobile-3"><img src="....................... "></div> <div class="desktop-4 tablet-2 mobile-3"><img src="....................... "></div> <br>