How to use Vogue's 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.
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).
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.
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.
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.
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, see Shopify's instructions.
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.
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.
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), 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.
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.
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.
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.
The featured product section is designed to—you guessed it—draw attention to a single product on your homepage.
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.