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.

Sections

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.

Blocks

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.

Note

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:

Setting	Description
`Desktop media width`	Modifies the width of the product gallery on desktop devices.
`Desktop layout`	Choose from four different product gallery layouts for desktop devices. Mobile devices default to the Carousel layout.
`Media size`	The 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 screen`	This setting ensures that the product gallery adapts to the screen size, preventing the media from appearing too tall.

PagesFAQ page