Setting up your homepage with Vogue

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

When you first install Vogue, you’ll notice that a couple default homepage sections are already visible. Notice how each of these sections associates to “empty state” placeholder content in the preview. This will give you an idea of the formatting of each section.

empty-state-example

Clicking on a "section" block will bring up a set of unique configuration settings, or you can click Add section, which will reveal an array of other optional sections that you can add to your homepage. We'll cover each of them in detail—more or less in the order they appear—below.

Note that you can also hide a section by clicking the "eye" icon next to it (click it again to make it visible).

Fixed homepage sections

Fixed sections are exactly what you’d guess they are—components that are fixed to certain areas of your site and cannot be moved. In Vogue, there is just one fixed homepage sections: the Header (note that the header appears on all pages, but we've put it here because it'll probably be one of the first things you want to set up).

Header

The header is the area that runs across the top of your store (or in Vogue's case, 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 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, you must leave the theme editor by clicking the back button in the top left hand corner (you actually need to click twice — once out of the  Header settings and again on the Themes link to get back to the admin). 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 on the titles to edit them, or create additional menus by clicking the purple Add menu button.

Below is an example of how we've set up the navigation in our Vogue Elegant demo.

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, including dropdown menus, check out our instructions  here.

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.

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 Product 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), Short, Square, 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.