Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Store pages vs. product blocks

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.

Store pages

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.

You can add multiple store pages and tags and categories to organize your products into different collections. You can also customize your store pages in the Site styles panel. 

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.

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 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:

Was this article helpful?
213 out of 394 found this helpful
Store pages vs. product blocks