Empire'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.
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 three checkboxes at the top of the Settings section. You can:
- 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).
- Enable product reviews and ratings. This will add star ratings to your products, but you must first install Shopify's Product Reviews app to your store (we've linked to it from that "?" help-out link in the theme editor).
- 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).
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!
Empire also comes with a handful of specially-stylesd sales badges — three, to be precise!
If you want to use sales badges in your store, you need to first check Enable sales badge, and then select the Sales badge style from the dropdown. You can show a percentage off, a dollar amount off, or a simple "Sale" badge.
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.
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:
If you want to show related products on your product pages, start by checking Enable at the top of the Related Products settings.
There are then a number of additional options you can use to customize how your related products display. You can:
- 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.
- Enable sales badge. 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 set this separate from the sales badge on your actual product.
- Enable product ratings. This will add star ratings to your related products, but you must first install Shopify's Product Reviews app to your store (we've linked to it from that "?" help-out link in the theme editor). When installed, and when enabled, it will include ratings in your related product tiles.
- Choose your Sales badge style from the dropdown menu. You can show a dollar amount off, a percentage off, or a simple "Sale" badge.
- Tailor your Product aspect ratio. This refers to the proportional relationship between a product image's width and its height. With Empire, you can select cropped or uncropped versions of your related product images in the following aspect ratios: Natural, Square, Cropped or Tall.
Note that using an uncropped 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 on desktop. 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 on desktop. 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.
- Enable cart redirection. As explained in the theme editor, enabling this option will automatically send users to the cart page after adding a product to their cart (as opposed to keeping them on their current page).
A quick note about tabs
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 can be set in your Shopify admin under Products>Collections and then 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 from the dropdown menu.
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.
If you disable both of 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 section 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'll find the tags section under Products>[Product name]>Organization>Tags. Here:
If you have a lot of products though, you may want to enable subgroups. You'll do this in the same Tags field on your products page, but you'll "prepend" (or add something to the beginning) existing tags with the name of the group you want them to be in, with the format:
It's very 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. So 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 might fall into the Personal Items parent category, and they'll display (in alphabetical order) beneath that heading. Neat, hey?
You can also customize the depth of your menus from the Menu depth dropdown.
The easies 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 in your Shopify admin. Choose an existing link in the main menu to "drop down" from, and 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:
You can repeat this process for as many "levels" as you want. We've created a separate menu for "Our Factories," which includes links to all of our factory locations.
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 and select the menu you want to display from the Menu dropdown.