Products Pages vs. Product Blocks

You can display products on your site using Products Pages and Product Blocks. Products Pages are the primary method for adding products and building a store layout. Product Blocks display individual products from existing Products Pages in areas like blog posts and layout pages. In either option, clicking on a product will open the product's page with more details, dimensions, images, and variants.

We often get questions about how Products Pages and Product Blocks differ. This guide covers the primary differences, best practices, and things to consider when adding either to your site.

Product Pages

To add and edit products in your store, use Products Pages. Products Pages display multiple items in a cohesive layout. The layout of a Product 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 Products Page.

You can add multiple Products Pages and tags and categories to organize your products into different collections. You can also customize your Products Pages in the Site Styles panel. 

Here's an example of the Supply template's Products 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.

Product Block

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 Products Pages. This means that if you're going to use Product Blocks, you'll need to add those products to Products Pages first.

You can combine Product Blocks with other blocks to create a customized layout beyond your template's Products 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 Products 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: