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 (  v6.6+)   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 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.

Important Note

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
  • Map
  • Newsletter
  • Instagram Feed
  • Text Columns with Images
  • Image with Text Overlay
  • Image with Text
  • Collection list
  • Accordion
  • Rich Text

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.

FEATURED VIDEO

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.

FEATURED COLLECTION

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.

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

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 drop downs to the accordion if you don't want to show all ten just remove the Item Heading and it will not show.

RICH TEXT

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!