Creating a logical structure for your store is key to driving sales and creating a great shopping experience. Use this guide for tips on positioning your Products Page within your site’s navigation and using tags and categories to help customers find what they’re looking for.
To follow this guide, you should already have at least one Products Page. To learn more, visit Adding products to your store.
Where products display
Products can display in three areas:
- Products Pages - Browsable collections of products. In version 7.1, these are called Store Pages.
- Product details pages - A page displaying a single product’s details and variant options
- Summary Blocks - A block you can add to any page that displays a sample of products by tags and categories
Tip: The information in this section also applies to Store Pages in version 7.1.
Products Pages are browsable collections of products. The page includes key details about each product, usually the title, price, and if it's sold out. Clicking on a specific product opens its details page for additional details.
You can have multiple Product Pages on your site. All templates have Products Pages, and their designs and style tweaks vary. Some templates include Product Quick View to display additional details without leaving the Products Page.
- Give your Product Pages clear names, like Shop, Store, or Products.
- Use the Product Page’s SEO title field to describe your products in more detail, like Homemade Organic Soaps.
- To center the shopping experience, you can set a Products Page as your site’s homepage, or display the link first in your site’s navigation.
- Use different Products Pages for very broad groups of products (like Men’s and Women’s apparel), and then use categories within those pages to divide products by type (Tops, Bottoms, Shoes).
You may want to change the order in which products display in a Products Page. For example, you can place your best-selling items first.
- Open a Products Page.
- In the panel, click and drag a product to move it into place. You can press and hold Shift to select multiple products simultaneously.
- After selecting one or more products, click these actions in the lower banner to automatically move products:
Move to another page - Move products to another Products Page. Visit Moving collection items between pages for more information.
Move to top - Move products to the top of the page. These will appear first in your store.
Move to bottom - Move products to the bottom of the page. These will appear last in your store.
Product details pages
Every product in a Products Page has its own details page with details about it, including additional images, variant drop-down menus to display multiple options (for example, size and color), and an Add to Cart button. Product details pages are sub-pages of a Products Page.
- If a product has many variants, and each option has a different price or stock level, you can split these up into separate products instead.
- When creating different products for similar items, use unique descriptions and titles for each item. Descriptions that are too similar might affect how search engines rank your products.
- If you sell products that require lots of customization, create a custom product form to display when a customer clicks Add to Cart. Use the form to collect customization information.
- Add limited availability labels to let shoppers know when items are low in stock.
Note: Note: Gift cards display a Purchase button that leads directly to checkout instead of an Add to Cart button.
Summary Blocks pull content from Products Pages and display it on other pages on your site. This is a great way to highlight products on your homepage, or change the layout of your products without switching templates. To learn more, visit Using Summary Blocks.
Browsing for products
Add tags and categories
Add both tags and categories to your products to help your customers find what they're looking for. Categories automatically create a navigation on you Products Page. Both tags and categories can be used as filters in various organizational blocks. To learn more, visit Adding tags and categories.
Categories added to product items create automatic navigation on your Products Pages. The style of this navigation varies by template, but the categories are always listed in alphabetical order. Visit our template guides to learn how your template displays category navigation.
It’s not possible to hide the category navigation in version 7.1. In version 7.0, you can hide it by either unchecking Show Category Navigation, or selecting Display: Hide in the Site Styles panel (depending on your template).
- Create two folders titled Men's and Women's.
- In each folder, add links to categories like Shirts, Pants, and Shoes.
When a visitor clicks one of the links, they'll see a filtered list of content with that category.
To learn more, visit Adding links to categories or tags.
Tip: As another option, you could add multiple Product Pages to each folder.
More ways to organize products
Visit these guides for more options for displaying tags and categories:
- Tag Cloud Blocks - Display tags or categories in a graphic cloud formation.
- Archive Blocks - Display tags or categories in a customizable text-only list.
- Image clickthrough URLs - Link a gallery image to a category.
- Linking to categories or tags - Add links to specific tags or categories to your Main Navigation or elsewhere on your site.
- Adding drop-down menus to your navigation with folders - Create a drop-down menu for browsing categories.