Anatomy of a Shopify theme product page: Creating more advanced layouts

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.

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.

Creating this layout is simple:

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:

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

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:

To create four columns:

To create six columns:

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.

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

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.