0

Your Cart is Empty

by Michael P. Hill July 25, 2017

Although premium Shopify themes offer more and more layout options on product pages, there are some surprisingly easy ways you can achieve some intricate layouts that make your product pages more engaging.

Splitting it up

The first concept to be aware of before creating your custom product page layouts is that you’ll generally want to create a “short” product description that appears to the side of the product gallery, along with the product price and add to cart button.

Main product description and split

Then, you’ll want to use the “split” feature to start using the advanced layout tricks we discuss here.

One thing to note is that, at this time, it’s not possible to use the product.full-width-images.liquid template at the same time as using custom columns.

Incidentally, most of the code snippets provided here will also work on pages you create under Sales Channels > Online Store > Pages.

Diving into layouts

Now the fun part — below we’ll take a look at some simple ways to use the space below the product gallery and basic information in creative ways.

We’ve already covered the basics of using columns here.

Keep in mind that, as outlined in that post, there is a difference between the “base columns” and the actual columns you create using the column framework.

Three columns

A three column layout is a great way to give shoppers an at-a-glance look at key features of your product. In design, using a three column layout brings a pleasing sense of proportion to your page design.

While an even number of columns certainly work as well, a three column layout brings a sense of balance and variety to your designs.

Three column text layout for Shopify product pages

Creating this layout is simple:

<div class="one-third column alpha">
 <h3 class="center">Heading 1</h3>
 <p class="center">Text</p>
</div>
<div class="one-third column">
 <h3>Heading 2</h3>
 <p>Text</p>
</div>
<div class="one-third column omega">
 <h3>Heading 3</h3>
 <p>Text</p>
</div>

Note that to center align the headings and paragraph text, you can add the class="center" to your code.

If, for some reason, you find the "center" feature isn't working, you may need to open your styles.scss.liquid file in the "Assets" folder and add this code tot he very bottom of the file:

.center { text-align: center !important; }
.left { text-align: left !important; }
.right { text-align: right !important; }

For an even more eye-catching layout, you can add images to each column either in place of, or in addition to, the headline.

Three column layout with images for Shopify product pages

<div class="one-third column alpha">
 <p class="center"><img src="//cdn.shopify.com/file-1.png"></p>
 <h3 class="center">Heading 1</h3>
 <p class="center">Text 1</p>
</div>
<div class="one-third column">
 <p class="center"><img src="//cdn.shopify.com/file-2.png"></p>
 <h3 class="center">Heading 2</h3>
 <p class="center">Text 2</p>
</div>
<div class="one-third column omega">
 <p class="center"><img src="//cdn.shopify.com/file-3.png"></p>
 <h3 class="center">Heading 3</h3>
 <p class="center">Text 3</p>
</div>

The first block of code in this example will generate a heading followed by an image, while the second block will place the heading below the image, while the final option will show only an image and paragraph text.

For best results, it’s best to be consistent with the layout you use for headings and images in each three-column layout.

Remember, too, you can repeat the code block to start another row of content.

The best approach when using multiple rows, in three column or any other column-based layout, is to ensure you always have a content count that is equal to a multiple of the number of columns. For example, a three column layout should have three, six or nine items total, while a four column should stick to four, eight and twelve items.

When using images inside of a column, you will need to consider what size you create the file at. In general, you’ll want to make sure the image is about twice as wide as the column width you’re using, so that it still looks sharp on retina displays and on mobile, when that column occupies the width of the screen.

To calculate this, you’ll want to take the number of base columns you use, which is displayed in the <div> code, and multiply that figure by 65 pixels. This should be the minimum width. If you’d like your image to be compatible with high resolution displays, you should double this figure.

For example, since our themes use a base of 16 columns and one third of 16 is approximately 5, we’ll round up to 6 columns, in the code example above, your image will be approximately six base column units wide, or 6 × 65, which equals 390. For high resolution displays, the image should be created at 780 pixels wide (390 × 2).

If the image is too large to fit in the column, the image will automatically scale down to fit in the column width.

Two, four or more columns

While a three column layout is always a good bet, sometimes you may want to use another number of columns.

Here’s the code to create a two column layout:

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

To create four columns:

<div class="four columns alpha">
 Column 1 Content
</div>
<div class="four columns">
 Column 2 Content
</div>
<div class="four columns">
 Column 3 Content
</div>
<div class="four columns omega">
 Column 4 Content
</div>

To create six columns:

<div class="three columns alpha">
Column 1 Content
</div>
<div class="three columns">
Column 2 Content
</div>
<div class="three columns">
Column 3 Content
</div>
<div class="three columns">
Column 4 Content
</div>
<div class="three columns">
Column 5 Content
</div>
<div class="three columns omega">
Column 6 Content
</div>

Keep in mind you can also integrate headings, text and images inside of these columns for more advanced looks. You can also create numerous rows and vary the number of columns per row to create more complex layouts, such as 2 column text row, followed by a row of 3 columns with just images, followed by a row of four columns with alternating text and images.

Complex product page column layout

In case you'd like to create this layout yourself, here's the base code:

<div class="eight columns alpha">
 <h3 class="center">Heading Row 1 Column 1</h3>
 <p class="center">Text</p>
</div>
<div class="eight columns omega">
 <h3 class="center">Heading Row 1 Column 2</h3>
 <p class="center">Text</p>
</div>
<div class="one-third column alpha">
 <img src="//cdn.shopify.com/row-2-img-1.jpg" alt="Alt" />
</div>
<div class="one-third column">
 <img src="//cdn.shopify.com/row-2-img-2.jpg" alt="Alt" />
</div>
<div class="one-third column omega">
 <img src="//cdn.shopify.com/row-2-img-3.jpg" alt="Alt" />
</div>
<div class="four columns alpha">
 <h3 class="center">Heading Row 3 Column 1</h3>
 <p class="center">Text <a href="#">Link...</a></p>
</div>
<div class="four columns">
 <img src="//cdn.shopify.com/row-3-img-1.jpg" />
</div>
<div class="four columns alpha">
 <h3 class="center">Heading Row 3 Column 3</h3>
 <p class="center">Text <a href="#">Link...</a></p>
</div>
<div class="four columns omega">
 <img src="//cdn.shopify.com/row-2-img-2.jpg">
</div>

In the next installment of this series, we’ll look at even more advanced layout techniques you can use to create additional layout options.

Using these layouts effectively

When using these layouts on product pages, your goal should always be to give your shoppers easy-to-understand ways to learn about your products and their features.

Since these layouts come below the “short” product description, which is a great way to grab the attention of shoppers and encourage them to engage more, the lower portion of your product page is a great opportunity to go into more detail and really spotlight your products through a mix of photography, imagery and text.

In general, you’ll want to keep text and headings short and use powerful, high quality images that really catch the eye.

The ultimate goal is to create more detailed product information that’s easy for a user to “scan” looking for the details relevant to them.

What about product.details?

While the new product.details template does allow you to create more advanced layouts on product pages, there are a few key differences to be aware of:

  • Without customization, all product pages using the product.details template will have the same information displayed below the description and Add to cart area
  • Using product.details will make adding sections like a contact form or Google map much easier, but it doesn’t yet give you great control over column-based layouts; you would first need to create a separate page with custom column HTML and then insert it as a “Page” section when setting up the product.details sections, which creates sort of a hybrid approach.
  • So if having unique layouts and details for each product is important to you, it may ultimately be better to become a pro at using our HTML column framework to create and build layouts. By writing your own column layouts as described in this post, you’ll be able to create more custom and fine-tuned designs for each individual product page.
Michael P. Hill
Michael P. Hill

Michael P. Hill is a Shopify, Shopify theme, content marketing, digital marketing and product management expert based in Chicago. Follow him on Twitter at @michaelphill or connect on LinkedIn.

Need Support?

Please don't post support questions or issues as a comment on this thread, as we may not be able to process it in a timely manner. Instead, please visit our Help Center to browse frequently asked questions or submit a support request directly to our team.



Also in Shopify Theme Blog

10 things to ask your Shopify theme developer before buying a theme
10 things to ask your Shopify theme developer before buying a theme

by Michael P. Hill August 17, 2017 0 Comments

Shopping for a  Shopify theme  for your store is one of the most exciting and creative parts of running your online business — but with so many options out there from so many sources, how can you be sure you’re making the right pick? Get the 10 must-ask questions and our answers here.
Read More
Ruh roh: 26 tips for when things go bad while running your Shopify store
Ruh roh: 26 tips for when things go bad while running your Shopify store

by Michael P. Hill August 09, 2017 0 Comments

The world of ecommerce can be fun and challenging. Here’s a list of some of the more unpleasant things you’ll likely face as a store owner — and some ideas on how to either solve the problem or use it as a learning experience for moving forward.

Read More
Customizing spacing between elements in Shopify themes
Customizing spacing between elements in Shopify themes

by Michael P. Hill August 02, 2017 0 Comments

One of the most common design challenges   Shopify theme  users face is the spacing between elements. While all Out of the Sandbox themes come pre-designed with best practices for layout and placement, every store owner has unique requirements or preferences with regards to spacing.

Read More
News & Updates

Sign up to get the latest on sales, new releases and more …