You can display products on your site using Store Pages and Product Blocks. Store Pages are the primary method for adding products and building a store layout. Product Blocks display individual products from existing Store Pages in areas like blog posts and layout pages. In either option, clicking on a product will open the product details page with more details, dimensions, images, and variants.
We often get questions about how Store Pages and Product Blocks differ. This guide covers the primary differences, best practices, and things to consider when adding either to your site.
To add and edit products in your store, use Store Pages. Store Pages display multiple items in a cohesive layout. The layout of a Store Page depends on your template and usually includes options for category navigation, hover effects, and automatic navigation from a product's item page back to the main Store Page.
Here's an example of the Supply template's Store Page:
Click any product to view its product details page. This may include additional information, variant drop-down menus, an Add to Cart button, and more.
To display existing products on a page, blog post, or other content area, use Product Blocks. Each Product Block displays one product. Product Blocks are ideal for promoting special, new, or sale items across your site.
You can't create new products using a Product Block. Instead, Product Blocks pull information from existing products added to Store Pages. This means that if you're going to use Product Blocks, you'll need to add those products to Store Pages first.
You can combine Product Blocks with other blocks to create a customized layout beyond your template's Store Page design. For example, to create a layout that's unavailable in your template, you can use multiple Product Blocks on a page and move the Store Pages those blocks pull from to the Not Linked section so they're hidden from navigation menus.
To customize the detail you'll include in the block, you can show or hide the product's image, title, description, price, and Add to Cart button.
Here's an example of a Product Block in a blog post: