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.
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.
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 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 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).
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.
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.
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).
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.
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.
The Announcement Bar is a great place fill your customers in on new promotions, offers and changes to your store.
First up, The Announcement Bar settings let you easily turn the Announcement bar off and on, using the Show announcement setting. You can also limit the bar to only display on your homepage by turning on the Show on homepage only setting.
You'll notice that the Announcement bar has two text fields. The first is a standard Text field that you use the input the copy you'd like to appear in your Announcement bar. The second field, called the Text (mobile), is optional and allows you to enter alternate copy that will only appear to customers visiting your store on mobile devices. We recommend using this field to craft shorter copy, more suitable to the smaller screens of mobile devices.
Lastly, you can add a Link and customize both the Background and Text colors of the Announcement bar to standout or match the branding of your store.
The featured product section is designed to—you guessed it—draw attention to a single product on your homepage.
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 sections are designed to help you showcase new or seasonal collections on your homepage.
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.
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.
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.
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.
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.
Collection list sections are designed to help you showcase new or seasonal collections on your homepage.
Start by selecting either the 1 column or 2 columns options from the Layout dropdown. You can also chose to hide or show the Collection descriptions with the Show description setting.
To add a Collection block, just click Add collection and then choose the collection you'd like to feature by clicking the Select collection button. You can set up collections in the Products>Collection>Add collection section of your Shopify admin. For instructions on how to set up collections see our article Getting Started: Shopify Basics.
You can feature up to twelve collections at a time in this section. If you want to add more, you can always add another Collections list section, or feature them another way (in a featured image with text, for example).
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.
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.
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.
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.
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.
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, Subheading, 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.
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
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.
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.
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!
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
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.
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).
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.
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.
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.
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.
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.
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.
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 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.
This feature supports Youtube and Vimeo videos only. Simply paste the link to your video in the Youtube or Vimeo link field, et viola!
(well, there is a bit more to it)
You can choose the video's Aspect ratio between 16:9 and 21:9. This will set the width in relation to the height as you've selected it!
Next, you can add an Overlay to the video. This consists of an optional Image and/or text with a play button that will appear over the embedded video. When a customer clicks the play button, the overlay will disappear and the video will begin to play. This comes in handy when you'd prefer a placeholder to show before the video is selected.
The Overlay settings include:
- Show overlay (turns the Overlay on/off)
- Style (Dark, Accent & light styles that are associated with your colors chosen under Theme settings > Colors)
- Background color opacity (turn to 0% to disable the Background color)
- Heading and Text alignment (this means wether your Heading will appear above or below the play button)
- Cover image (this is the image that will appear as a placeholder for the video)
- Image position (this adjust the focal point of your image and is helpful if your image's aspect ratio is different then tha section's. If the image you are using has roughly the same aspect ratio of the setting, you won't see this setting make sure of an impact)