15. Vantage Theme: Setting up an Advanced Layout Product Page
Advanced Layout Product pages are just regular old products in Shopify, but now with new custom templates in the Vantage theme (v6.5+) you can make the product pages for a few of your best selling products more detailed, organized, and valuable. This wonderful theme feature is pushing the bounds of Shopify and giving you the ability to organize your content better, in-turn making it easier for you to show your customers the value of your key products.
Here is an example of a normal Vantage theme product page…
Now here is an example of the same product page, but using a custom template to create an Advanced Layout Product…
By customizing the theme settings of this product we have created an advanced layout with more content. So let's go through the steps to set up an Advanced Layout Product Page.
Step 1: Choosing the Custom Template
From your Shopify Admin go to Products select the product you want to use. Look on the right-hand side for Theme Templates from the Product template select menu choose product.custom-one and save the product. ***Now before you continue there is a very important fact you must know about custom templates, once you use product.custom-one on a product, you do not want to use it again or it will create a duplicate product. You can only use this template once! If you want to create another custom product use the template product.custom-two and so on up to four. The Vantage theme includes four custom templates if you need more than four, follow our tutorial on adding more custom templates here.
If you have a different theme or older version of Vantage theme published and you are working on this new version as a draft, you will find out real quick there is no product.custom-one (two, three or four) to choose from the select menu. This is because your current theme does not have these templates. To override this you will need to create these custom templates on your current theme, this won't affect your live shop at all. Follow the steps in our tutorial here.
Step 2: Choose the product blocks to show
Each "Section" on the product page is technically a Shopify section block. On the custom product templates, you have the following blocks to choose from…
- Product Description
- Product Form
- Product Size Chart
- Product Video
- Product Reviews
- Featured Blog Article
- Recommended Products
- Related Products
- Text Columns with Images
- Image with Text Overlay
- Image Carousel with Text
- Collection List
In our example here we have used Image w/Text Overlay, Image Carousel w/Text, Product Form, Product Description, Product Video and Related Products. You can add up to 12 blocks, in any combination.
The Product Description block will show the content you have written in the product description in the admin. You have the option to show the Product Title or hide it, set the max-width of the text, text size, background color, and text color.
The Product Form block will show the regular product image gallery, price, swatches, and add to cart. It's important that you use this block only once, and not delete it! You are given the same options and settings as you would on a basic product page in this block.
PRODUCT SIZE CHART
The Product Size Chart will show an image uploaded to the product with the alt tag "size-chart" and when clicked will popup to view larger. You can upload more than one size chart and add a heading above them all.
To use this block you will need to go the product admin page and upload the size chart image, give the image and alt of "size-chart" any text after "size-chart" with be used on the image hover. So size-chart-ladies will show "Ladies" on the image. Save the product, and add the Size Chart block to the custom product page. As long as the image has the alt tag "size-chart" it will not show as an image in your product image gallery.
The Product Video block allows you to feature a YouTube or Vimeo video about your product, you have the option to show it as full-width and add a heading.
The Product Reviews block works in conjunction with the free Shopify Product Reviews app, you will need to first install that app and then add the block to your product page. From there it will work on its own!
FEATURED BLOG ARTICLE
The Featured Blog Article block will allow you to choose a single blog post to feature on your product page. This works really great if you have a blog post tutorial or annoucncement about this product and you want to share it with customers to further convince them to buy the product.
The Recommended Products block allows you to choose a specific collection of products to feature on this product page. This is very helpful if you sell additional products that complement or go with the current product. If the collection you want doesn't already exist you will need to set it up and select it in the block settings.
The Related Products block is the same as basic product pages and shows products in the same collection as the current product.
TEXT COLUMNS WITH IMAGES
The Text Columns with Images block is very much like the section on the homepage. It allows you to feature 1-4 text columns with or without images. Each column also has an option for a heading and subheading of text.
IMAGE WITH TEXT OVERLAY
The Image with Text Overlay block is very similar to the section on the homepage and the block on the Top-Level Collection page. It works great as a header on products and also really great as a call-to-action at the very end of Advanced Layout Product Pages. You add a full-width background image then you can add a heading and subheading, the subheading shows when you hover the section. In our example, we used a simple narrow image with a texture, but you could use any image and control the height in the block settings.
On additional setting for Image with Text Overlay on products is the option to Scroll to "Add to Cart" button on click. If you select this option, when you click the Image with Text Overlay it will smooth scroll to the Add to Cart button on the product page.
IMAGE CAROUSEL WITH TEXT
The Image Carousel w/text block is very similar to the homepage section, you can add a heading, subheading, and button, paired with a slider gallery of images. You have the choice to position the image gallery to the left or right. This section looks really good if you use two of them in a row on your homepage one with the image to the left and one to the right. You can also only upload one image and not use the sliding.
The Collection List block is a list of selected collections to feature. First, choose your Collection List settings, choose a grid of 2, 3 or 4 collections. Then, under content select each collection to feature up to four.
The Product Accordion can be used for product frequently asked questions, or a cleaner way to organize further product details like Returns, Shipping, Materials, etc. You can add up to 10 dropdowns to the accordion if you don't want to show all ten just remove the Item Heading and it will not show.
To edit the colors of the Accordion, from the theme editor go to Theme Settings > Colors > Accordion and edit the three colors.
The possibilities with this new Advanced Layout Product Page are endless, have fun creating something just perfect for each special product!