18. Vantage Theme: Setting up Advanced Layout Pages
Advanced Layout Pages are just regular old pages in Shopify, but now with new custom templates in the Vantage theme (
Here is an example of a basic Vantage theme page…
Now here is an example of the same basic page, but using a custom template to create an Advanced Layout Page…
By customizing the theme settings of this page we have created an advanced layout with more organized content. So let's go through the steps to set up an Advanced Layout Page.
Step 1: Choosing the Custom Template
From your Shopify Admin go to Pages select the page you want to use. Look on the right-hand side for Templates from the page template select menu choose page.custom-one and save the page. ***Now before you continue there is a very important fact you must know about custom templates, once you use page.custom-one on a product, you do not want to use it again or it will create a duplicate page. You can only use this template once! If you want to create another custom page use the template page.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 page.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 page blocks to show
Each "Section" on the page is technically a Shopify section block. On the custom page templates, you have the following blocks to choose from…
- Page Title
- Page Content
- Contact Form
- Featured Video
- Featured Collection
- Newsletter Subscribe
- Text Columns with Images
- Image with Text Overlay
- Image Carousel with Text
- Collection List
In our example here we have used the following blocks…Image w/Text Overlay, Text Columns, Image w/Text Overlay, Text Columns, Accordion, Image w/Text Overlay, Contact Form, Image w/Text Overlay. You can add up to 40 blocks, in any combination.
The Page Title block will simply show the original page title that has been entered on the Page in the Shopify admin. In the theme settings, you can choose the heading alignment.
The Page Content block will show the content that has been entered in the Rich Text Editor on the Page in the Shopify admin. In the theme settings for this block you can choose the text alignment and content width.
The Contact Form block will add a contact form that sends emails to your Shopify Admin email. You have the option to add a heading above the form and adjust the form width. You can also choose what form fields show, as well as add up to two custom fields depending on your needs. In our example here we added a custom field for Order # and Return or Exchange?. You can use more than one contact form on the page if needed for different purposes.
The Featured Video block allows you to feature a YouTube or Vimeo video, you have the option to show it as full-width and add a heading.
The Featured Collection block will allow you to choose a collection and it will show the first 2-30 products in the selected collection.
The Map block can be used to show your store location and business hours, to use Google Maps you will need to get an API
The Newsletter block allows you to include a subscription form for a newsletter, it also shows your social media icons.
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. Each column can be a link. In this example, we actually linked the columns to their respective section on the SAME page. To do this we need to know the HTML ID for each section we want to link too. For example to link to the Returns & Exchanges section of the page, we did the following…
- Step 1: Find the section you want to link to, right click and select inspect.
- Step 2: Look for <section id=" .
- Step 3: Double click the ID and copy it.
- Step 4: In the settings for the column you are linking look for the link. First, type a pound symbol # and then paste the id to the section. Select the external link and save.
Now your column will link to the corresponding section on the same page!
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.
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 Accordion can be used for page frequently asked questions, or a cleaner way to organize further 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 Page are endless, have fun creating something just perfect for each or your pages!