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 ( v6.5+)  you can make basic pages with more detail, and organization using similar section layouts as blocks on your pages. 

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.

Important Note

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…

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.

PAGE TITLE

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.

PAGE CONTENT

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.

CONTACT FORM

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.

MAP

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  code  here.

NEWSLETTER SUBSCRIBE

The Newsletter block allows you to include a subscription form for a newsletter, it also shows your social media icons.

INSTAGRAM FEED

The Instagram Feed block will show the six most recent images from your Instagram feed, add more feeds if you have more than one Instagram account. You will need to retrieve your Instagram access token by generating one   here .  Then simply paste your access token and click save. 

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. 

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. 

COLLECTION LIST

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.

ACCORDION

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!

Related Articles