Your products and collection pages are the central pillars of your ecommerce store. They're where you display your products, convey their value, and, if you're lucky, make the sale.
You 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.
The product page is where you highlight the features and benefits of your individual products. At minimum, it should contain the product title, images, a description, the price, and an add-to-cart button. With Empire, you can customize your product pages by navigating to a product page in the theme editor and clicking on Product pages under the Sections tab.
There are a number of ways you can customize your product pages, beginning with the settings in the Sections within the Product pages tab:
- Layout. Empire comes with two different layout options for its product pages: 2 columns or three. Simply pick your fave from the Layout dropdown and you're good to go!
- Enable related products. Enabling related products allows customers to discover other items that are similar to the one they are currently viewing. Related products are automatically pulled from the same collection as the product in view. Like so:
- Enable autoplay for product videos. This will let you auto-play videos added within the Shopify Admin in the Products as an image!
By adding a video to the Product gallery, you are replacing one of the pictures in the gallery. To add a video, go to the Products tab in the Shopify Admin Dashboard and select the product you would like to add the video to. Hover over the image you would like to turn into a video and click the ALT link. Paste your video URL into the Image alt text input. Keep in mind that the video player only supports Youtube and Vimeo videos.
Adding tabs is an effective and popular way to add more information to your product pages without taking up too much space. Empire supports multiple tabs on a page. You can learn how to add them to your store right here.
A collection page displays all of the products in a given collection. You can configure your collections from within your Shopify admin (more information here). In Empire, you can customize your collection pages by navigating to a collection in the theme editor and clicking on Collection pages under the Sections tab.
If you would like to display the collection image for your collections, you can check the Show collection image option at the top of the settings for collection pages. These images can be set in your Shopify admin under Products > Collections by clicking on a collection and uploading an image to the Collection image area in the right-hand column. You can also set the Products per page that display on your collection pages.
Empire comes with an optional utility bar, which can allow users to sort products, and select how many products to show per page (if enabled, this will use the number you've selected under Products per page as the default, but allow them to view other numbers as well (24, 36, and 48).
You can opt to Show "Sort by" dropdown, which will show an option like this embedded in a contrasting bar between the collection image and your product tiles:
When clicked, users will be able to sort products by: Featured, Price: Low to High, Price: High to Low, A-Z, Z-A, Oldest to Newest, Newest to Oldest, and Best Selling.
You can also Show products per page links in the same bar. This means that users will be able to select how many products they want to view, per page, at a time.
Another option to enable is Show grid/list view toggle which will let your customers switch between a grid layout of products and a list view in a column. The list view provides a description of the product on desktop for customers that want to know more about each product at a glance. However on mobile, both the list and grid view contain the same information.
If you disable these utility bar options, this contrasting bar will disappear.
Empire comes with an optional left-hand sidebar on its collection pages, which, if enabled, displays product filters, which can set up using tags in the Products settings of your Shopify admin. You can even set up filter groups, which make it easier for your customers to sort your products using subgroups.
To show a sidebar on your collection pages, start by checking Show sidebar in the settings.
You can then select if (and how) you would like your Filters to display. You can display them by tag, by group or hide them altogether.
If you display them by tag, it just means that all of the tags you have used will be displayed as checkable boxes in the sidebar. You can add and edit tags for each of your products in the Shopify admin.
You can find the tags section under Products > [Product name] > Organization > Tags
If you have a lot of products though, you may want to enable subgroups. You can do this in the same Tags field on your products page, but prepend existing tags with the name of the group you want them to be in, with this format:
It's important that you use this format–where the left side of the underscore is the group name and the right is the tag for the product. Spaces can be included on either side of the underscore, but no special characters. Instead of having a bunch of discrete tags for a backpack, you might have something like this:
Once you've added that tag to your product page, you'll see that in the theme editor (if you've selected filter by group) it will look like this:
You can then go through and re-tag any other items that fall into the Personal Items parent category, and they'll display (in alphabetical order) beneath that heading.
You can also customize the depth of your menus from the Menu depth dropdown.
The easiest way to add a new menu to your store is by adding a dropdown menu to one of your pre-existing links in the main menu. For example, you may have a main menu link to "Our Process". If you want to go into depth about that topic, you could create a multi-level menu, something like this:
You might even want to take things a step further, with separate pages for each of your suppliers and factories, for example.
To create a multi-level menu, navigate to Online store > Navigation. Choose an existing link in the main menu to "drop down" from, then add a new link to the main menu to use as the name from the new dropdown. In this example, we're using the "Our Process" menu item.
Then create a new menu with that shared name, and enter your desired menu items. Like so:
When you're done, navigate back to the theme editor (Collection pages > Menu depth) and specify how many tiers you would like to display. Empire supports up to three.
Empire comes with the option to add additional menus (up to 10 of them!) in the sidebar. They will not display unless you have checked Show sidebar in the Sidebar settings above.
To add a menu, click Add menu or one of the existing menu blocks, then select the menu you want to display from the Menu dropdown.
Theme settings for products and collections
In both sections of the editor, you can see the Theme Settings arrow. Just click that to expand the settings you can see in the Product pages tab as well as the Collection pages tab . Here's what you'll see:
- Show vendor. This means that the vendor (or brand or supplier) of your product will display below the product name.You can add and edit your products' vendors by navigating to each product in your Shopify admin (look under Products, select the product you want to edit, and find the Vendor field in the right-hand column). This setting will show the vendor throughout the theme!
- Enable recently viewed products. This will allow customers to keep a history of products that they have recently viewed.
- Enable sale badges. This means that if a product is on sale (you can set sale prices in the Shopify admin under Products > Pricing) it will highlight the discount with a colorful sales badge. You can choose between a percentage amount, dollar amount or a more general 'Sale' tag!
- Enable product reviews and ratings. This will add star ratings to your products, but you must first install Shopify's Product Reviews app for your store (we've linked to it from that "?" help-out link in the theme editor).
- Enable social sharing. Clicking Enable social sharing will add social icons to your product page, either above your product description or below your add-to-cart button, depending on the layout you've selected. They look like this:
When clicked, users will be redirected to their social network of choice and will be able to share your product along with their own words and endorsement.
- Show dynamic checkout button. This feature allows customers to select the product and checkout immediately using their preferred payment method.
- Enable cart redirection. This means that users that add products to their cart will be automatically sent there (to their cart, that is) instead of staying on the product page (they will see an "Added to your cart" confirmation message that will drop down from the top of their screen).
- Slideshow aspect ratio. This setting allows you to change the sizes of the images in the Product gallery on the Product Page. This is different from the Product aspect ratio below which changes the image size for Related Products and on Collection pages! You can select between cropped or un-cropped. Then further by Natural, Square, Cropped or Tall.
- Emphasize price. As explained in the theme editor, "Emphasizing the price will show the product's price above the title" (as opposed to below it, as is standard for the theme). It also enlarges the price.
- Product aspect ratio. This refers to the proportional relationship between a product image's width and its height which will help your images line up nicely in the Related Products and Collections! With Empire, you can select cropped or un-cropped versions of your images in the following aspect ratios: Natural, Square, Cropped or Tall. Note that using an un-cropped setting will generate white space around the image to create a uniform grid without cropping your image. The background in the editor indicates the applied white space, but will not appear on your storefront.
- Show "Quick look" button. Checking this option means customers will be able to add products to their cart from a modal popup instead of being directed to a product page. When enabled, a "Quick look" button will appear below the product tile on hover.
- Show "Add to cart" button. Checking this option means that customers will be able to buy directly from your homepage, bypassing product pages and quick look boxes altogether. The add to cart button will appear upon hover, either beside the quick look button or on its own, depending which options you have enabled.