Product Page

The product page is a vital component of your Shopify store, where visitors can find detailed information about individual items. This section should be structured clearly to facilitate easy browsing and to aid informed purchasing decisions. By setting up a well-organized product page, you can enhance the user experience and potentially increase conversion rates.


The product page comprises two main sections: Product and Product Details. Adding and modifying blocks in these sections form the foundation of configuring your product page.

The Product section displays blocks in the sidebar on the right side.

The Product Details section displays its blocks underneath the product gallery, on the left side.

This separation enables you to fully leverage the two-column layout of the product page.


You have a wide variety of blocks at your disposal for use on the product page. Here's an overview:

Detail Blocks

  • Vendor
  • Title
  • Rating
  • Price
  • Payment installments
  • Inventory
  • Pickup availability
  • Description
  • Reviews

These are the primary blocks that convey crucial information about the product. You can adjust and reorder them to suit your specific needs.

Buttons and Selectors

  • Variant picker
  • Quantity selector
  • Buy buttons

Content Blocks

  • Text
  • Rich text
  • Collapsible content
  • Image
  • Product highlights
  • Separator

Utilize these blocks to provide additional information about the product in an organized fashion.

For instance, you can use the Rich text block to show shipping information, the Collapsible content block to hold sizing notes (if applicable), and the Product highlights block to highlight the key features of a product.

Combine content blocks with product metafields to achieve powerful customizations of the product page.

Adjusting the Layout

The Product section contains settings that control the layout of the product page. Here's an overview:

Desktop media widthModifies the width of the product gallery on desktop devices.
Desktop layoutChoose from four different product gallery layouts for desktop devices. Mobile devices default to the Carousel layout.
Media sizeThe Square (1:1) option enforces a square shape for the gallery, which is beneficial if you have product images of varying resolutions and desire a uniform layout.
Limit media size to fit the screenThis setting ensures that the product gallery adapts to the screen size, preventing the media from appearing too tall.