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.
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
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.
- 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.
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.
- In the panel, click and drag a product to move it into place.
- After selecting a product, click these actions in the lower banner to automatically move it:
- Move to top - Move the product to the top of the page. These will appear first in your store.
- Move to bottom - Move the product to the bottom of the page. These will appear last in your store.
- Move to another page - 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 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 store 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.
Tip: Gift cards display a Purchase button that leads directly to checkout instead of an Add to Cart button.
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 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.
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.
Note: The ability to create subcategories is a new feature we're releasing in waves to all sites on version 7.1. If you don't see nested categories available on your site, check back soon.
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. To hide the category navigation, switch the Filter visibility toggle off for every category.
Manage categories and subcategories
Create and reorder categories and subcategories in your store’s category manager:
- In the Home menu, click Pages, 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 clicking and dragging existing categories over one another.
The order of categories on this page sets the order of your category navigation. Click and drag categories 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.
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.