Your online store has a Shop page with every product on the store, and a page for each category that has products on it.
Categories and subcategories
Each category page shows the category's products and its subcategories' products, with a link to each subcategory under its name. You arrange categories in Inventory › Categories (see Subcategories).
Sorting and filtering
Shoppers can narrow down and order what they see:
- Sort by: Name, Newest, Price low to high, or Price high to low.
- Categories: every category and subcategory, to switch in one tap, each with how many products it has.
- Price: ranges worked out from your prices, such as Under $25 or $25 to $50. Choosing two shows products in either.
- In stock only: leaves out products that are sold out.
- On a category's page, its specifications and options: each of the category's specifications (such as Activity), including those from the categories above it, and each option its products have (such as Size), with the choices its products have. See Specifications.
Each choice shows how many products it would show, and a choice that would show nothing isn't offered. Choosing choices in two groups (a price and In stock only, or Running and Size L) shows products that match both. A product with options shows when one of its variants matches, such as the size in stock at that price.
On a computer, the categories and filters sit beside the products, and Sort by is above them. On a phone, Filter and sort opens them in a panel. Make your choices, then choose Show to see the products.
Lay them out
In Website › Pages, Shop is listed under your home page, with Category pages and Product pages under it. They're your store's own pages, so they stay at the top and can't be deleted, but you can open them and lay them out in the editor, like any page.
Shop is the page at
/shop/. Give it a title, and a search title and description. It can show your products, or show your categories as cards instead. For that, remove Products grid and add Categories.Category pages is one layout that every category's page follows. Each category fills in its own photo, name, description, subcategories and products. Each category's search settings stay on its page in Inventory › Categories. Category pages always have a Products grid.
Product pages is one layout that every product's page follows. Each product fills in its own photos, name, price, options and description. Each product's search settings stay on its Website tab in Inventory. Product pages always have one Options and Add to cart block, so every product can be bought.
Shop and Category pages start laid out as described above, with the categories and filters beside the products. Product pages start with the photos beside the name, price, options and Add to cart, and the description under them.
The blocks for them are under Shop in the editor:
- Title and breadcrumbs: the shop's title, or the category's photo (beside its name and description on a computer), name, description and subcategories, with the breadcrumbs. Hide any part you don't want.
- Products grid: the products, a page at a time, with how many there are. Choose how many go across on a computer (2, 3 or 4), whether cards show the price and Out of stock, the order the page starts in, and how many products go on each page. Each layout has one.
- Sort by and Filters: on a phone, Filters becomes a Filter and sort button. When a layout has Filters, a phone finds Sort by and the categories list in its panel, so they aren't shown twice.
- Categories: as cards, or as a list to switch between categories. Cards on the shop show your top-level categories, and on a category's page its subcategories. You can also put Categories on any other page, such as your home page.
For Product pages:
- Product photos: the photos, the chosen option's first, opening a slide show, with the 3D model if it has one.
- Name and price: the product's name, price, stock and SKU. Hide the stock or SKU if you like.
- Options and Add to cart: a row of buttons for each option, and Add to cart.
- Description: the product's description, small, medium or large.
- Specifications: the product's choices for its category's specifications, such as Activity: Running, Hiking. Nothing shows when it has none.
- More from this category: other products from its category, as cards.
- Breadcrumbs: on Shop, Category pages and Product pages, it shows where the page is in your shop, such as Home › Shop › Gas & Air › Air tank.
When a product has options, everything that depends on the choice (photos, price, stock, SKU) follows the option chosen, wherever its block sits.
Put Filters and the categories list beside the products with Columns, set to Narrow, wide (filters beside products).
Search engines and sharing
The page's address keeps the sort and filters, so the browser's Back button works, and a shopper can share a filtered page. Search engines are told to list each page without its filters, so a filtered page never takes the place of your category in search results.
IAPZ Small Business
The bottom of every page of your store says This website is powered by IAPZ Small Business, with a link to it.