Vogue's pages

Shopify stores come with a page creation tool, which you can use to generate a wide array of different page types. Some of these will be straightforward, static pages, containing information that rarely changes and that customers will use often, like an About page or a Contact page. Others will be more dynamic, stylized pages that will be updated more frequently, like Collection and Lookbook pages.You can add as many pages as you like to your store, and configure where they appear under Online store>Menus.

Create a new page

From your Shopify admin, navigate to Online store>Pages. Click the Add page button to open a new page template.

new-page-screen

From here, you can enter the Title and Content in the space provided, as well as set the Visibility and select a Page template. You’ll notice that Vogue comes with three templates: a general page template (which you could use to create an FAQ  or return policy page), an about.page template, and a contact.page template. We’ll cover the unique features of the last two in separate sections below.

There are also other page types which are generated automatically and do not require you to use the page creation tool. These include Product pages, Collections pages and the Blog page. Take some time to click around the theme editor  to locate these pages and their associated Section settings.

Product page

product-page

Product pages are the life and blood of your ecommerce store. They're where you display your products, convey their value, and, if you're lucky, make the sale.

A product page is automatically generated every time you add a product to your Shopify admin, but you can customize them by navigating to a product page in the theme editor and clicking on Product pages under the Sections tab.

Here,you can choose whether or not to Enable related products. Switching this on will allow customers to discover other items that are similar to the one they are currently looking at. Related products are automatically pulled from the same collection as the product in view.

related-products-option

SHARING

You can also choose how you would like visitors to be able to share your products. The methods you enable will display as icons on product pages for easy sharing. Simply check off the sharing links you would like to display and they will appear.

vogue-product-sharing

Collection page

collection-page

With Vogue, each of your store's collections will have a distinct collection page, accessed from the Collections page (see below) or the homepage (if configured as a Featured collection).

To access the settings for this page, navigate to any collection page in the theme editor and then click Collection pages under the Sections tab.

TAG FILTERING

The tag filter option allows visitors to sort products by custom tags, which can be added to product pages in your Shopify admin. You'll find them under Organization on the right side of each product editing screen.

NUMBER OF PRODUCTS

Here, you can select the number of products that display on each collection page: 6, 12, 18 or 24.

PRODUCT ASPECT RATIO

The aspect ratio is the proportional relationship between an image's height and width. Vogue lets you select the aspect ratio you would like to use for the images on your collection pages. You can opt to display them as-is (Original), Short, Square, or Tall, depending on the shape of your products and how you'd like to present them.

Collections page

collections-list-page

This page displays an index of your store's collections.

To access the settings for this page, navigate to your catalog or collections page in the theme editor and then click Collections page under the Sections tab.

Here, you can toggle the option Show descriptions on or off at the top of the editor screen.

If you're looking to customize the colors associated with each collection, you'll find those settings under General settings>Color.

If you're looking to select which collections appear on your Collections page, or to change their order, you can do so from the Online Store>Navigation page of the Shopify admin. You can also see Shopify's documentation for instructions on setting up your Collections page and reordering.

Lookbook page

lookbook-page

Vogue comes with a unique Lookbook feature that allows you to shine a light on new or seasonal collections. Lookbooks offer the same functionality as collections, but in a uniquely-styled layout. By showcasing all product photos and descriptions, they give customers greater insight into the collection as a whole, and allow you to make the most of editorial photography and lifestyle imagery.

Vogue's Lookbook template is styled to give products their own full-width sections, displaying all the images associated with each product in an offset grid, along with the description and price. The exact layout of each product's "section" is determined automatically according to the number of images associated with that product. These layouts are fixed and cannot be edited, however we've included multiple layouts for each number of product photos, so your lookbooks are always nicely varied.

lookbook-variation

To create a lookbook, you'll follow much the same process as you would for creating a collection. Start by navigating to Products>Collections in the theme editor, and click Add collection. Give your lookbook a name and description (optional), then choose the products you'd like to include by filling out the Conditions box (if you need a refresher on how to set up a collection, see our Getting Started: Shopify Basics article.)

screen-shot-2016-10-28-at-9-40-06-pm

The next step is to change the Theme template from Collection to Lookbook. This will mean the difference between one image of a product being displayed in a grid (as a the collection page) and multiple being shown offset (as on a lookbook page). Make sure that Visibility is enabled, then click View to see what you've created.

Once you're happy with your lookbook, you'll want to add it to your store navigation. Click through to Online store>Navigation to add it to your menu of choice. Simply click Edit menu, give it a name, select Collection from the adjacent dropdown menu, and then the name of the lookbook collection you want to include. It will now appear as a link in your sidebar menu.

screen-shot-2016-10-28-at-9-52-23-pm

You can control how many products display per page, as well as whether or not your Lookbooks allow for tag filtering (which allows visitors to sort products by custom tags, and which can be added to product pages in your Shopify admin) by navigating to a lookbook in your theme editor and clicking on Lookbook pages under the Sections tab.

Blog page

The blog page provides visitors with an index of all of your latest blog posts. Some stores choose to rename this page "News" or "Journal"—what you call it and how you use it is up to you!

You can add content to your store's blog by navigating to Online Store>Blog Posts in the Shopify admin. For more information and tips on how to get your Shopify blog up and running, see their instructions.

To access the settings for your blog page, navigate to it in the theme editor and then click Blog pageunder the Sections tab.

Here, you can choose how many articles to display per page, as well as whether or not to show an RSS link, tags, the post author, or a blog excerpt (visitors would have the option of clicking through to see the full post).

blog-page-settings

Blog posts

Every time you publish a new blog post to your store's blog, Shopify will generate a new page and URL for it. To access the settings for these pages, navigate to a post—any post—in the theme editor and then click Blog postsunder the Sections tab.

Here, you can choose whether or not you want to display tags or the post author on your posts by checking the box beside each option. These settings will apply to all of your blog posts.

SHARING

You can also choose how you would like visitors to be able to share your posts. The methods you enable will display as icons on blog posts for easy sharing. Note that you must check Enable sharing at the top of the menu and select the platform-specific sharing option for social sharing to work.

Cart page

The Cart page is the first page customers see when they begin the checkout process. It shows a summary of the items and quantities they have added to their cart and totals how much it will cost them.

You'll find the settings for the cart page by navigating to it in your theme editor and selecting Cart page from the Sections tab.

Here, you can Enable order notes, which gives customers the ability to provide special instructions for shipping upon checkout.

You may also wish to show a shipping rates calculator, which automatically fetches shipping rates on the cart page of your store, letting customers calculate their fees before completing checkout.

shipping-calculator

Use the text box to set the default shipping country. If you're unsure of spelling, you can refer to the dropdown on the first page of the Shopify checkout process. Note that if a customer has logged in and configured their shipping address their country will automatically be used.

shipping-country-dropdown

About page

Online shoppers these days aren't just interested in what they're buying—they're also interested in who they're buying it from. And that's exactly what your about pageis for: connecting with your customers, building trust, and establishing your brand.

To create an about page you will first need to create a new page. Scroll to the bottom right of the screen and select page.about from the Template dropdown menu. The unique thing about this page template is that it allows you to set a Featured image under Settings in the theme customizer.

Before you do that though, add the Title and Content to your page, and click Save. Then navigate to Online Store>Customize theme. With the Sections tab open, click on the page you just created in the preview screen, and you will see a new section option open on the left side of the editor: Featured image. Unlike the dynamic sections on your homepage, the Featured image section is static (meaning it is "stuck" to the top of the page cannot be moved around).

Here's a quick walkthrough of how to set up an about page using the about.page template:

about-page-template-walkthrough

Contact page

Adding a contact page to your store is a quick and easy way of engaging your customers. To create a contact page you will first need to create a new page. Scroll to the bottom right of the screen and select page.contact from the Template dropdown menu. This will create a simple form on the page that will look something like this:

contact-form

You can add a Title and Content above the form in the page editor screen.