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