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 Vogue's 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

ANNOUNCEMENT BAR

The announcement bar is an optional contrasting bar that spans the top of your store. You can add announcement Text and an a Link  to communicate a special offer like free shipping or a discount code.

Clicking Show announcement will display it across your entire site (i.e. on all pages), while Show on home page only will display it only on the home page.

You can customize the colors of your bar (text and bar/background) using the color pickers at the bottom of the Header settings.

Featured product

featured-product

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

SETTINGS

Start by selecting the Section height from the top dropdown. Image height is the natural height of the image when you upload it, whereas Fullscreen will expand it so that it fills the entire viewport.

Next, select the Product you want to feature. 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. Note that this setting only has an impact if you've set your section height to full screen.

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

You can also check the Show description box if you want to show those, or leave it unchecked if you don't. These descriptions are pulled from the Collection pages in your admin.

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.

Blog posts

The Blog posts section allows you to display images and text from your three most recent posts. To specify the "preview" text that appears for each post, we suggest using Shopify’s excerpt function, which you'll find in the post editor under Online store>Blog posts.

SETTINGS

If you want to give your section a heading, you can add it in the Heading field. In the example above, we've used "Journal."

Next, select the Section height you want to use from the second field. Note that the variations for this sections are relatively small.

Select the blog you want to feature from the Blog dropdown. While many stores maintain only one blog (called "News" by default) some create multiple to better categorize information including customer stories, tips, tutorials, and FAQs. You can only feature two posts from one blog per section. If you'd like to add more, you will have to add another Blog posts section.

You can also customize the View all link text (that's the link that appears at the top of the section—right under the heading—that directs users to your blog index page).

Additionally, you can customize whether or not to Show view all link (above), Show date, Show post author, and Show blog excerpt (which you can set on the editor page for each post).

Finally, and as with many of Vogue's sections, you can specify the Image crop (the display dimensions of your blog images, that is) using the bottom dropdown. In the example above, we've used the Original images for an asymmetrical, editorial look, but if you wanted to standardize differently sized/oriented images, you could use any of the three bottom options. Here's what the section could look like with the Short crop option enabled.

Map

Vogue comes with an eye-catching map section that businesses with brick-and-mortar locations can use to display contact information and give directions to their store.

SETTINGS

Start by setting the Section height from the top dropdown. Then, add a Heading (something like "Come say hi" or "Our workshop" should work) and Text (you could put your store's address here, or anything else you think is relevant).

The Map address you use is the point Google will use to drop its pin. It's the red marker in the image above.

To pull a map into your homepage, you'll need to enable a couple of API keys. Simply click the links in the editor for Javascript and Geocoding and hit the blue Get a key button. Choose Create a new project and then Create and enable API. Copy and paste one of these keys into the theme editor and the map should appear.

You can also customize the display colors of the map using the Map foreground color and Map background color color pickers. Note that these do not control particular components of the map (streets, water, etc.) but rather the swatches are linked to, and will affect, the entire map.

In the event that the map is not used or cannot be loaded, you can add an alternate Cover image. This can be a screenshot of a map, or anything else you want to display behind your Location overlay. If your section is set to Fullscreen, you can adjust the Image position from the bottom dropdown.

Slideshow

The top section of your home page is your store's most valuable real estate. To make the most of it, merchants often use a slideshow to showcase their most recent deals and top-selling products with videos and images (note that while "above-the-fold" slideshows are the norm, with Vogue, you can position your slideshow anywhere!). You can create up to six slides, each with a unique image, message and link.

SETTINGS

If you want your slideshow to play automatically when users land on your site, check the Autoplay slideshow box. You can also customize the Autoplay slide duration using the range picker below. Left unchecked, users will still be able to click through your slides using the slide demarcations at the bottom of the section. 

If you'd like to use an overlay (a semi-transparent "filter" that lies on top of your image to make the text easier to read) make sure that box is checked. You can customize the colors of this overlay from the Style dropdown and the Opacity from the range picker below.

CONTENT

This is where you'll upload the images you want to use and customize the text overlays. Begin by clicking on  Slide to expand the settings.

First, you'll add a Video background URL (if you're using videos in your slideshow). Simply enter a link to a YouTube video here. If you're using an image, you'll need to delete the onboarding link here before you upload your image.

Then, you can upload a Cover image, which will either display all the time across all devices if you haven't added a video link, or only on mobile (autoplaying videos eat up a lot of data, so we've disabled it on mobile).

You can also customize the Image position, Heading, Button link, and Button label here. 

Note: Slideshow videos are designed to play silently in the background. The one exception to this is if you use a Vimeo link and do not have a Pro account. It's a finicky thing. We're working on it.

Instagram

To integrate your Instagram account, you will need to locate and input your  Instagram Access Token. Follow the theme editor link (or click here) to learn how to generate a token. Copy and paste your token back into the Instagram access token field in the theme editor.

Vogue comes with the option to show an optional header above your image grid. To enable it, click the  Show header box and then add the Heading you'd like to use. In the example above, we've used "Our latest, greatest 'grams."

>>>>DOUBLE CHECK THESE SETTINGS BEFORE LAUNCH

Twitter

The Twitter section displays your store's five most recent tweets in horizontally-scrollable slideshow. 

Simply enter your Twitter username in the first field, then an optional Heading in the second.

You can customize the Header color from the color picker at the bottom.

Featured content

featured-content

You can use Featured content 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. Note that this last setting only makes an impact if you've set your section height to fullscreen. 

Image with text

Image with text sections are incredibly versatile, allowing you to highlight all sorts of content, whether it's new products, special promotions, or something else entirely!

SETTINGS

You'll begin by setting the Section height of your section (small, medium, or large).

Next, you can set the Background color (none, white, or contrast—the contrast color being pulled from the Default collection color under General settings>Color) using the second dropdown. You can control the contrast color from General settings>Colors.

Now upload the Image you want to use, or select it from your image library. You can customize its position or focal point using the Image position dropdown.

Under Text, you can add your Heading and your Text (this includes rich text formatting and links) as well as customize the Text alignment, Button link, and Button label.

You can also customize where the text/image display on Desktop and Mobile. Use the desktop and mobile preview buttons at the bottom of the editor to test how your section looks on different devices.

Image with text overlay

>>>RESUME HERE

Image with text overlay 
sections are a lot like Image with text sections, only they are a. full-width images and b. come with a different layout: text overlay. They're a great way to use immersive, high-images, build your brand, and highlight special promotions and products.

SETTINGS

Begin by setting the  Section height of your section (small, medium, or large).

Next, upload the Image you want to use, or select it from your image library. You can customize its position using the Image position dropdown. 

Under Text alignment, you'll set the alignment of the overlayed text (surprise!). You can also customize the Text content position (that's where the text appears over the image, not how the text itself is laid out), Heading size, Heading text, and body Text.

You can also add an optional Button link and Button label.

An Overlay is a semi-transparent "filter" that lies on top of your image to make the text easier to read (and/or look cool). This is an optional feature, but if you'd like to use it, all you have to do is check the Show overlay box, select a Style from the dropdown, and set the Opacity using the slider at the bottom (0% will make the image more visible; 100% will obscure it entirely).

Newsletter

To help you build your mailing list, Vogue comes with a customizable Newsletter section.

Note that all email addresses collected by Empire's newsletter/email collection form will be added to your customer list (just click  Customers in the Shopify admin). If you want to filter this list (purchasers versus newsletter opt-ins, for example) you can use the Filter customers dropdown, then select "Tagged with," then input "Newsletter" and click "Add filter." This will display everyone that signed up for your newsletter through your theme. If you want to sync this list to your email marketing service, you can click Export at the top and make the appropriate selection.

SETTINGS

You can set the Background color of your newsletter section from the dropdown menu at the top. You can also give the section an optional Heading using the bottom field. Something like "Keep in touch!" and/or "Subscribe to our newsletter" should do the trick.

Rich text

Got something you want customers to know that doesn't fit nicely into another section type? Use a  Rich text section to display a heading and content on your home page.

SETTINGS

Begin by setting the Section height of your section (small, medium, or large).

Then, add a Heading in the second field. In the Text box below, you can add your content. You can use the bold, italics, and link icons at the top to format your text.

Note that each section supports only one block of text. If you would like to add multiple, you will have to add multiple  Rich text sections to your homepage.

Testimonials

When it comes to making purchasing decisions online, customer reviews and testimonials can make or break a sale. Vogue allows you to build social proof and increase conversions with a uniquely-styled testimonial section built into your homepage.

SETTINGS

Begin by setting the Section height of your section (small, medium, or large). Then, select a Background color from the second dropdown.

If you want to scroll through your testimonials automatically (like a slideshow), check the Autoplay box (if unchecked, users will still be able to click through them manually). You can customize the scroll speed of your testimonials using the Autoplay duration slider.

CONTENT

Click on a  Testimonial block to begin. Add the source's name in the Author field, then their testimonial in the Testimonial box. If you want to include an Author image and Author location, you can do so using the corresponding fields.

You can add up to six testimonials to this section.

Video

Video sections are a great way to build your brand, highlight special promotions and products with an immersive, site-spanning video. If you wish, you can overlay text over your video section to tell visitors what the video is about.

SETTINGS

Vogue's Video section allows you to show an Overlay over your video when it isn't playing if you wish (note that this only appears when a custom cover image is used). An overlay is essentially a semi-transparent filter that makes it easier to read overlaid text. If you want to enable it, simply check Show overlay, and then select a Style and set the Opacity (0% will make the image more visible; 100% will obscure it entirely). You will also have to add a custom cover image below.

Next, copy and paste the link to your video into the  YouTube or Vimeo link box, and set the Video aspect ratio (the relative height to width of the video player) using the dropdown below.

You can also set an  Cover image to display when the video is not playing. If you do not add an image here, the theme will automatically display the video's "thumbnail" image (the image you see above in the Youtube or Vimeo link field).

You can also customize the Cover image position, Heading, and Play button position using the final three fields.