17. Icon Theme: Setting up Basic Pages
In this article, we will go over how to setup basic pages for things like about us, FAQ's and more.
Page Templates Before Version 6.6
The Icon theme includes four different page templates to help you with the layout of your pages. The Default Page Template has the content container set to 1200px wide. The Thin Page Template has the content container set to 775px wide, providing white space. The Full Browser Page Template has the content container set to 100% of the browser window with no left or right margins or padding. This template is often used by hired developers to create a custom content page. The Page Contact Template will create a contact page with a form; we will go over setting that up in the next article.
Changing a page template
The page template can be selected in the Shopify admin when creating a new page or editing a page. In the Template box you will see a dropdown for Template Suffix, here you can choose the template the page will use. Note: There are no settings for pages in the theme editor for the Icon theme.
Basic Pages for Icon Versions After 6.5
Basic pages for Icon version after 6.5 are different in that they no longer have full or thin page templates available, instead the page sizes is now an option available in the Theme editor. A new sidebar option allows positioning of the sidebar to the left of the page content, right of the page content or no sidebar.
Basic pages have content blocks in Icon after version 6.5 which can be added to the page's sidebar including menus, collections, images and text.
Menu - Displays a navigation menu available.
Collection - Displays products from a given collection. Product's primary image and title is shown for each product. Up to 10 products can be displayed.
Image - Displays an image and an optional link that the image redirects to when clicked upon.
Text - Displays text header and subheading, can change the alignment of the subheading to left or center.
Advance Layout Pages Icon Versions After 6.5
Advanced Layout Pages are just regular old pages in Shopify, but now with new custom templates in the Icon theme (
Here is an example of a basic Icon 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 Icon theme includes three custom templates if you need more than three, follow our tutorial on adding more custom templates here.
If you have a different theme or older version of Icon 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
To edit the settings from the Theme Editor go to choose the page in the template picker > and in the sections tab click on Custom Page One. 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
- Instagram Feed
- Text Columns with Images
- Image with Text Overlay
- Image with Text
- Collection list
- Rich Text
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 product layout can be either in a grid or carousel. If using the carousel option then the carousel's control styles can be changed to dots or arrows.
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.
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
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-3 text columns with or without images. Each column also has an option for a heading and text content. Each column can be a link.
IMAGE WITH TEXT OVERLAY
The Image with Text Overlay block is very similar to the section on the homepage. 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.
IMAGE WITH TEXT
The Image with Text block allows adding a heading, text, and button, paired with an image. The position of the image can be set to either the left or right side of the text. The width of the image can be changed from 33%, 50% or 66% and will automatically adjust the amount of text room next to it. The text can be aligned left or center. A button displays when a link is provided that can link customers to a page.
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 drop downs to the accordion if you don't want to show all ten just remove the Item Heading and it will not show.
The Rich Text section allows you to use text content on the homepage. You can use the rich text box to type your message or in content from a Shopify page.
The possibilities with this new Advanced Layout Page are endless, have fun creating something just perfect for each or your pages!