Vogue Theme Manual

Our documentation is for the latest version of the theme. If you need help with an older version of the theme, please send us a support request (found to the right). Below, you’ll find instructions for all theme settings and features, roughly in the same order as the sections in your theme editor panel.

vogue-theme-elegant

Table of Contents

Basic theme setup

New to Shopify?

If you’re setting up a Shopify store for the first time, we recommend taking a gander at the Shopify help center for a full overview of the platform.

In our article Getting Started: Shopify Basics, we cover the essentials for getting your store up and running, including adding products, setting up collections, and creating a blog. Once you’ve got these things set up, you’ll be in a good position to start customizing your theme.

Upload your new theme

If you purchased the theme directly from Shopify, your theme will be automatically installed when you log into your Shopify admin.

If you purchased your theme from pixelunion.net, you’ll receive your theme as a .zip file named something like vogue.v1.0.0.zip.

Once you’ve downloaded the theme file, go to your Shopify admin dashboard and navigate to Online Store>Themes. Then click Upload theme in the top-right corner. Select your theme file from your computer and click Upload.

theme-upload-screen

Your new theme will show up below your current theme. At this point, it is installed, but not published. When you’re ready to unveil your new look to the world, click Publish theme.

The theme editor

Once you’ve uploaded your theme, it’s time to make it your own. While all of your products, collections, pages, and navigation will be configured in the Shopify admin, any changes you make to the look and feel of your store will happen in the theme editor. You’ll access it by navigating to Online Store>Themes and then clicking the blue Customize theme button in the top right of your screen.

theme-editor-access

You’ll see that the theme editor is divided into two tabs: Sections and General settings. We’ll cover each in detail below, but here’s the Coles Notes.

Sections tab

The Sections tab contains all of the sections that are available to you in Vogue. Essentially, sections are the building blocks of your store, allowing you to assemble pages from customizable, re-orderable components. You can add, remove, and reorder sections, as well as access the customization features for each from the Sections tab.

sections-options

General settings tab

The General settings tab lets you make global changes to the look of your store, including typography, text and background color, as well as links to your social media accounts.

general-settings

Pro tips

Most of the time you spend in the theme editor will be on either the Sections or General settings pages. There are, however, a few lesser-known areas and shortcuts that can be super helpful as you’re building your store. Here’s what you need to know:

vogue-help-menu

The dropdown menu attached to your theme name contains a bunch of handy links. First up, Documentation. That’s what you’re looking at now, and it’s only ever a click away if you need a little bit of guidance setting up your menus or slideshow.

Next, Support. If you can’t find a fix in the documentation, you can always email our world-class support team. They’ll get back to you by the next business day.

If you’re fluent in Liquid (Shopify’s templating language) you can kick your customizations up a notch by digging into the theme’s code under Edit code. If not, our support team will be more than happy to put you in touch with someone who is.

Finally, Edit languages lets you both change the language of your theme and checkout as well as customize the wording that is used throughout your store.

At the opposite end of the theme editor, you’ll find a little button with a screen and an arrow on it. It lets you toggle between previewing what your site will look like on desktop (Fit to screen) and on mobile (Small screen). It looks like this:

desktop-mobile-icon

Finally, if you want to collapse the theme editor controls and preview your store in full-screen, all you need to do is click the tiny left-pointing arrow in the middle of the panel. Easy!

Theme styles

Vogue comes packaged with three theme styles that curate your store’s colors, fonts, and styles for you. Check out our store demos to see the Elegant, Editorial, and Organic presets.

To select the theme style you would like to use in your store, click  over to the General settings tab, then scroll all the way to the bottom to the Change theme style button. Here, you can preview the theme styles and select the one that’s right for your store.

change-theme

Note that applying and saving a new theme style will overwrite your current style settings, however you will not lose any content from your store. It’s always a good idea to make a backup copy of your theme before you start making customizations. Use the duplicate copy as your working version until you’re ready to publish it.

Sections

Sections is a Shopify feature that effectively allows merchants to assemble pages from customizable, re-orderable components (or sections!). This means tons of flexibility, allowing you to add, remove and reorder sections with just a few clicks. Examples of sections include featured products, slideshows, collection listings, or videos. You’ll access the customization options for all of them from the Sections tab in the theme editor.

Most sections on your homepage are customizable—you can add and arrange as many as you want. The one exception is the Header section, which is fixed, meaning it is anchored to the top of your site cannot be repositioned. (You can, however, still customize its content the same as any other section.)

Some other page templates also make use of sections. To see if the page you’re building has sections, open the theme editor and then navigate to the page you’re working on within it. (For example, if you click through to your Catalog in the theme editor, you’ll see that a section pops up for Collection pages, allowing you to customize how you want these pages to look.)

Note: If you’re building your store from scratch (ie. you haven’t already got products and collections to work with) you may want to skip over Sections and come back to it later. If, however, you’ve already configured your store and are simply changing your theme, you can start building your homepage any time.

Getting started

You’ll start by clicking Add section. You’ll see that you can add a Featured collection, a Featured product, or Rich text to your homepage. Clicking on any of these boxes will bring up unique configuration settings for each (as well as some “empty state” placeholder content to give you an idea of the formatting of each section).

empty-state-example

Header

The header is the area that runs across the top of your store (or at the top of your sidebar). It appears on every page and is intended to be used to promote your company’s brand and make it instantly recognizable to your visitors. This is a static section and cannot be repositioned.

LOGO IMAGE

Your store’s logo provides branding for your site and a clickable link to return to the homepage.

By default, Vogue will display your store name as your logo. To replace it, click the Upload image button and select the file you’d like to use. We recommend an a 240 x 50px .png image file. Larger images will be automatically resized to fit this constraint.

NAVIGATION

Under Header>Navigation, you can choose which menus you’d like to display where. Vogue allows up to two menu sections, which you can elect to display in either a fixed sidebar or a compact header (which displays automatically on mobile).

To add links to your menus, leave the theme editor by clicking the back button, and then the Back to Shopify link in the top left corner. Go to Online store>Navigation. Here, you’ll find two pre-populated menus: Main menu and Footer menu. You can edit the links in these menus by clicking Edit menu or create additional menus by clicking Add menu.

shopify-admin-menus-screen

Back in the theme editor, you’ll “connect” your menus to your store navigation by selecting the menu you want to display in each area. The Main menu is the menu that appears first in all caps, while the Secondary menu appears second in title case (or however you’ve inputted your links).

navigation-settings

To get your shop up-and-running fast, we recommend using the Main menu to link to your shop categories, collections, and lookbooks, and the Secondary menu for your About, Contact, Blog and FAQ pages. But it’s entirely up to you!

For more on how to configure menus, see Shopify’s instructions.

PAYMENT ICONS

You can accept a variety of payment methods in your Shopify store, including credit cards, PayPal, and digital currencies. You’ll enable and manage these from your Shopify admin under Settings>Payments. For more information on configuring your payment settings, click here.

payment-settings

Once you’ve selected the payment methods you want to accept, you can toggle their icons on or off in the Header>Payment icons section of the theme editor. These will display above the currency converter (if enabled) in your sidebar menu.

payment-icons

Featured collection

featured-collections

Featured collection sections are designed to help you showcase new or seasonal collections on your homepage.

SETTINGS

Start by selecting the collection you want to display from the Collection dropdown menu. You can set up collections in the Products>Collection>Add collection section of your Shopify admin (there’s a shortcut at the top of the menu). For instructions on how to set up collections see our article, Getting Started: Shopify Basics.

add-collection

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

MANUALLY SET PRODUCTS

By default, Vogue will display the first four products in a collection, however if you’d like to specify which products are displayed, you can click the Enable checkbox under Manually set products, and then add them by clicking on Add product below.

CONTENT

If you do not enable the Manually set products setting, any content added here will not display, and Vogue will automatically pull the first four products in the collection you’ve chosen to feature. However, if you have enabled the setting, you can click Add product and select the product you want to display from the Product dropdown. Notice that you can arrange them by dragging and dropping them into the desired order.

 

Should you want to delete a section—of any type, at any time—just scroll to the bottom of the settings and click Delete section. If, however, you’re happy with how your featured collection looks, click Save and you’ll be directed back to the main Sections screen.

Rich text

featured-content

You can use rich text sections to highlight and direct users to content that exists elsewhere on your site, be it a product page, blog post, lookbook, or something else.

SETTINGS

The first step is to select the Section height from the dropdown menu. You can either have the section occupy the full screen, or only the height of the image. You’ll see the difference in the preview once you’ve uploaded an image.

Next, you’ll add the text for the section under Heading and Text. Watch to see where the line breaks are in the preview screen and make sure your content works well with the font size.

If you want to include a link, you’ll need to add Link text and provide the Link URL.

Finally, you’ll select the Image you want to display, as well as the Image position or focal point of the image.

Featured product

featured-product

The featured product section is designed to—you guessed it—draw attention to a single product on your homepage.

SETTINGS

Similar to both Featured collection and Rich text, you can choose the Section height and Product from the top two dropdown menus. If you don’t want to use the image from that automatically loads from the product page, you can select an alternate using the Image override option. You can also adjust the focal point of the image by changing the Image position.

General settings

Color

Virtually every color in Vogue is customizable, with clear self-explanatory names and descriptions in the theme settings. The colors are organized into four categories: GeneralSidebar and alternate headerProduct listings, and Collection colors.

Vogue allows you to assign a specific color to each of your collections, which will display wherever a collection is featured, as well as on the collections page. If you do not assign a unique color to each collection, the default collection color will display (you can customize this too).

Click on the swatch to edit the colors. A popup with a color selector will appear, which allows you to adjust and experiment with custom colors.

shopify-color-picker

The box on the right displays the current color, the one in the middle the color you’re changing it to, and the checkered one on the right is transparent. You can also enter a specific color hex code in the bottom right corner if you wish.

Typography

Vogue comes with dozens of hand-picked fonts for your store. Fonts can be set for your store’s Body and Heading font using the corresponding dropdown menu.

To add emphasis to the heading font, use the Style drop-down to set the style to Bold.

Layout

Under Layout, you can define the amount of space that displays between images and other content blocks in your store. You can select either Small or Large or None from the Grid spacing drop down menu. Probably the best way of seeing the difference is to open a collections page and flip between the two.

Currency

Shopify works in virtually every country and every currency. With Vogue, you can cater to international customers with a currency converter that displays as a dropdown menu in the sidebar of your store. This allows customers to dynamically update their prices throughout your shop.

screen-shot-2016-10-26-at-8-18-49-pm

After enabling the converter by checking Enable currency conversion, you can choose which currencies are supported and how they’re displayed.

Under Format, you can choose whether or not to display the currency acronym on product and collection pages (e.g. $10.00 CAD vs. $10.00).

Under Supported currencies, you can select which currencies you want to allow users to display when browsing your store. Be sure to use the country’s ISO currency code, and separate each with a space. Note that exchange rates used by Shopify are refreshed twice a day based on rates at XE.com.

You’ll also set the Default currency on this page. This is the currency that will display when a user first lands on your site, i.e. before they have had a chance to use the currency customizer. This is different from your store’s Operating currency, which is the currency you use to process orders. You can set your operating currency in the Shopify admin under Settings>General>Standards and formats.

Favicon

A favicon (also known as a  website icon, tab icon, or bookmark icon) is a small icon that represents your website and provides a shortcut to it wherever the icon appears. There are a whole bunch of sites that can help you generate a favicon for your store, or you can create your own.

Once you have an image you want to use, upload it under the Favicon setting of the theme editor. You can also select an image from your media library. Note that whatever image you use will be scaled down to 32 x 32 px.

Social media

Vogue supports social icons for Facebook, Twitter, Google+, Pinterest, Instagram, Vimeo, and YouTube. Simply enter in your account URL in the relevant account field and the social icons will automatically appear in your sidebar. You can also include an email link here.

social-icons

If you’re wanting to enable social sharing for your products and posts, you’ll enable those in the sections settings for both Product pages and Blog posts.

Checkout

Under the Checkout section of the theme editor, you can add custom banner images, logos, and backgrounds, as well as customize the fonts and colors used throughout the checkout process.

BANNER

The banner is the top section of the checkout screen where your store name appears. By default, it is transparent (or whatever color your store’s background is) however you can customize it by clicking the box beside Use custom background. We recommend uploading an 1000 x 400px image.

LOGO

If you want to add your store’s logo to the checkout page, simply select an option from the dropdown Image menu. You can use your Storefront logo or you can upload a Custom image instead. You can also define the Position (left, center, right) and Size (small, medium, large) of your logo by making a selection from the bottom two menus.

MAIN CONTENT AREA

The main content area is the left side of the checkout screen where a user inputs their email and shipping address. If you’d like to use a custom background here, simply click to enable it, then either upload an image or use the color picker to select a background color. You also have two options for the color of the Form fields—white or transparent.

ORDER SUMMARY

The order summary is the right side of the checkout screen where customers can review the details of their order. Enabling Use custom background allows you to either upload an image or use the color picker to select a background color.

TYPOGRAPHY

You can customize both the Heading and Body font of the checkout screen by selecting fonts from the appropriate dropdown menu.

COLORS

You can customize the colors that appear on the checkout page under Colors. You can see which areas correspond to each section (AccentsButtons, and Errors) by watching how changes are processed in the preview screen.

You can customize more of the checkout settings from the Shopify admin.

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 pagesCollections 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), ShortSquare, 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 page under 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 posts under 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 page is 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.

World-class customer support

We’ve covered a lot of ground in these docs, but there will no doubt be questions they don’t answer. If you’ve got a burning question—or if you’re just stuck—don’t hesitate to get in touch with us. Our friendly and knowledgable support team will dig into the issue and get you back on track ASAP.