Vogue's products and collections
Your products and collection pages are the lifeblood of your ecommerce store. They're where you display your products, convey their value, and, if you're lucky, make the sale.
You'll upload and configure your products and collections in the Shopify admin (you can read more about that here), but when it comes to customizing how they display, you'll do that within the theme editor. Just navigate to the page in the theme editor and you'll see a section pop up, giving you access to settings specific to that page. We'll give you the rundown on the settings for each page below.
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.
There are a variety of customization options available to you here. Most of these are fairly self-explanatory, but here's a brief run-down of what these options will do.
- Show product vendor will display the vendor of the product, which you can set in the product settings for each product in the Shopify admin.
- Enable related products 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.
- Enable single product view means that only one product will show at a time per page, as opposed to loading the next product in the collection, which is the default behaviour.
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.
With Vogue, each of your store's collections will have a distinct collection page, accessed from the Collections list 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.
Off the top, you can choose whether or not you want to Show description on your collection pages. You can edit these in your Shopify admin (Products>Collections).
You can also Enable tag filtering. This 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.
The Product 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), Short, Square, or Tall, depending on the shape of your products and how you'd like to present them.
Collection 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 list 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 Collection list 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 list page and reordering.
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.
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.)
The next step is to change the Theme template from collection to collection.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.
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.