Tips for helping visitors find the products they're looking for.
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 store page in 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 store page. To learn more, visit Adding products to your store.
Tip: Register for our Design tips to increase your store’s sales webinar where we’ll present tools and tips that you can use to help make your products stand out across your site and drive sales.
Where products display
Products can display in four areas:
- Store pages - Browsable collections of products.
- Product details pages - A page displaying a single product’s details and variant options
- Product blocks - A block you can add to any page that displays a product from one of your Store pages.
- Summary blocks - A block you can add to any page that displays a sample of products by tags and categories
Store pages
Tip: The information in this section also applies to store pages in version 7.1.
Store 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 a specific product opens its details page for additional details.
Best practices:
- 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 store page as your site’s homepage, or display the link first in your site’s navigation.
Reordering products
You may want to change the order in which products display in a store page. For example, you can place your best-selling items first.
- Open a store page.
- Click All.
- In the panel, click and drag a product to move it into place.
- Click the ... icon beside a product to take these actions:
- Edit - Edit the product details.
- Send to top - Move the product to the top of the page. These will appear first in your store.
- Send to bottom - Move the product to the bottom of the page. These will appear last in your store.
- Move - Move the product to another store page. Visit Moving collection items between pages for more information.
Product details pages
Every product in a store page has its own details page with details about it, including additional images, variant menus to display multiple options (for example, size and color), and an Add to Cart button. Product details pages are sub-pages of a store page.
Best practices:
- 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.
- Optimize your SEO and help drive more traffic to your site by adding SEO descriptions to your products. This helps search engines properly index your site, making it easier for people to find your content online.
Tip: Gift cards display a Purchase button that leads directly to checkout instead of an Add to Cart button.
Product blocks
Product blocks display a single product from one of your store pages. You can add product blocks to any page. This is a great option if you want to add more shopping areas to your site. To learn more, visit product blocks.
Summary blocks
Summary blocks pull content from store 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.
Product categories
Add tags and categories to your products to help customers find what they're looking for.
Categories automatically create category navigation links on your store page. Both tags and categories can be used as filters in various organizational blocks, and you can also link to them from your site's main navigation. To style the category navigation, visit Styling store pages.
How you manage tags and categories depends on your site’s version.
The category navigation displays automatically at the top of the store page. Subcategories organize products further, and can display as a nested category drop-down menu for browsing.
Manage categories and subcategories
Create and reorder up to 1,000 categories and subcategories in your store’s category manager:
- Open the Pages panel, then click the
beside your store page. - Click Categories.
- Enter the category name.
- Press Enter.
- To add a subcategory, hover over a category and click …
- If you're nesting subcategories within each other, you can add up to three levels. For example, you can have one main category, a subcategory under it, and a second subcategory under that.
- Click Add.
- Enter the subcategory name.
- Press Enter.
You can also make subcategories by hovering over a category, clicking the icon that appears, and dragging it over another category.
The order of categories on this page sets the order of your category navigation. Hover over a category and click and drag the icon that appears to reorder them.
To reorder products within a category, go back to the store page editor, click a category, then click and drag the products in the panel.
When clicking through subcategories, the top category will display as All by default. To change this, go to the page settings and click General. Scroll down to Top category name.
Display subcategories in a nested menu
To display subcategories in a nested menu, choose the Sidebar position for the category navigation in the section editor. To learn more, visit Styling store pages.
Edit or delete categories:
To edit a category’s name and page settings:
- In the category manager, hover over a category and click …
- To delete a category, click Delete.
- To edit a category, click Edit.
- Make the changes, then click Back.
You can change these settings:
- Name - The name that appears in the category navigation.
- URL slug - The URL of the filtered page that displays all products within a category.
- Enable page - Enable or disable a filtered category page.
- Filter visibility - Hide the category from the category navigation.
- Add to your main navigation - Creates a link to the category in your site’s main navigation.
To learn how to add these categories to your products, visit Adding products to your store.
Hide categories
All categories display in the category navigation by default, but you can hide them. You may want to do this if you have seasonal categories, or if want to streamline your store's navigation.
To hide an individual category from the category navigation:
- In the pages panel, click the icon beside the store page you want to edit.
- Click Categories.
- Click the ... icon beside the category you want to hide, then click Edit.
- Switch the Filter visibility toggle off.
To hide the category navigation for an entire store page, go to the page settings, click General, then switch the Filter visibility toggle off.
The category navigation displays automatically when you add your first category. In some templates, you can hide the category navigation in site styles using the Show Category Navigation or Products: Sort + Filter - Display tweaks.
Use different store 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 can also add product category drop-down menus to your main navigation using folders. For example:
- 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.
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.