Product page

Use a well-crafted product page to sell your products.

What is the product page?

Well-crafted product pages can drive higher conversion rates, encourage upselling, strengthen brand identity and improve search engine rankings. The Masonry theme product page presents product information in a clear and simple format. Highlight key information, show inventory levels and link to complementary products.

How to set up the product page

Steps

  1. Open the Theme Editor and select Products from the dropdown at the top and choose a product template (e.g. Default product).
  2. Click on Product pages to edit core settings which control the page and media layout.
  3. Select Enable full width layout for a wider layout. The setting Show description underneath images can display the product description as a full width component underneath the product media.
  4. Use Show hover pagination to enhance navigation through the product media and set the position. If media includes video, video looping can be enabled. 
  5. Select one of the pre-loaded blocks to begin customizing its settings, or click Add block to choose a block from the list.

How to use blocks

The Masonry theme has a wide range of blocks that can be used to control the layout, improve functionality and enhance the appearance of the Product form. 

Steps

  1. Open the Theme Editor and select Products from the dropdown at the top and choose the desired product template.
  2. Click Add block to choose a block from the list to add to the section, or select one of the pre-loaded blocks, to begin customizing its settings. 

Title block

Displays the product title. 

Price block

Shows the product price and, if the variant is reduced in price, the Shopify compare at price. Sale prices use the Sale price color. 

Tax and shipping information can be displayed under the price. The currency can be shown using the settings in Theme settings > Currency.

Review summary block

To display a rating add the Review summary block into the product form where required, and install a product reviews app. 

Variant picker block

The Masonry theme includes two Variant style options for the variant picker block - Dropdown and Listed. 

yesterday-tee.png
dusk-pinafore-with-face.png

Select Show swatches to display Shopify color category metafield swatches as variant pickers.

Steps

  1. In the Shopify admin area go to Admin > Products and edit a product.
  2. Assign the product to a product category from Shopify’s Standard Product Taxonomy. Ensure color category metafield swatches are supported for the chosen product category.

  3. Connect the color variant options for the product to the color category metafield. The option values can be linked to existing colors or new colors can be created. 

    Variants2.png
  4. Open the Theme Editor and select Products from the dropdown at the top and choose a product template (e.g. Default product). 
  5. Click on the Variant picker block select Show swatches.

Under Size chart, there are customizable settings to Enable size chart. Select the Page containing size chart. (Pages can be set up in Online store > Pages). A product metafield of type page can be used if different products require different size charts.

Buy buttons block

The Masonry theme Buy buttons block includes controls to manage the buying process.

Choose whether to Show quantity selector. Select Show inventory notice to display the current stock quantity . Set the Inventory threshold. Inventory quantities will be shown below this threshold or if zero is selected the full inventory level will be displayed. 

The setting Stay on the current page, when adding to cart controls whether the customer remains on the product page or goes directly to the cart page after clicking the Add to cart button. Deselect this setting to go directly to the cart page. Use Show dynamic checkout button to display additional checkout options. 

Use Show pickup availability for items that can be collected from stores. Show backorder text for items where the inventory is managed by Shopify but they are available to purchase when out of stock. The setting Show recipient information form for gift cards allows customers to email gift cards to a specific recipient with a personal message. 

Complementary products block

To further enhance the functionality of the product form, the Complementary products block can be used in conjunction with the Shopify Search & Discovery app to display a range of related products. Customize the block Heading using the text input provided and adjust the Maximum products to show with the range slider. Complementary products can be displayed as a carousel or in a list. 

Sharing block

Make it easy for customers to share links to your products using the sharing block.

Custom liquid block

The Custom liquid block is for developers who require a block in which to add liquid code. 

Divider block

Use the Divider block to add space and dividing line between different blocks.  

Link block

A Link block with a choice of button or link styles is available.

Image block

Additional graphics can be inserted into the product form by adding an Image block. With the Image block selected, select the Image source, adjust the image Width and add a Link to the image (if required). 

Pop-up block

A Pop-up can be added to the product form to display additional details. Choose the Link text, Style and Select page content. 

Text block

Add a block of Text. 

Rich text block

The Rich text block includes the option to add text and links.  

SKU block

Shows the SKU for the selected variant. 

Vendor block

Shows the product Vendor. In the Masonry theme, the vendor block links a filtered collection page showing all products by that vendor. 

Type block

The Type block will display the product type chosen in Admin > Products. 

Description block

Show the product description. If it is preferable to show the product description underneath the main media. Hide this block and instead select the setting Show description underneath images in the main Product pages settings. 

Tip

Use the setting Show in quick buy to provide additional control of the quick buy content. This setting is available for the Text, Rich text, Image, Link, Custom liquid, Description and Popup blocks.

FAQs

How do I hide the Buy it Now/dynamic checkout button?

Dynamic checkout buttons or "Buy it Now" show under the main add to cart button on the product page and allow a customer to proceed directly to the checkout with just one item. Switch this feature off in the Buy block settings. Refer to the Shopify article Adding and removing dynamic checkout buttons for more details. 

Does the Masonry theme support swatches as variant pickers?

Color swatches can be used as variant pickers on the product page in Masonry theme versions after 8.0.0. Refer to the Shopify guide for more details as to how to setup color category metafield swatches.

Tip

The category metafield colors used in your store can be viewed and edited in the Shopify admin area in Content > Metaobjects > Standard product attributes. It can be useful to review all the category metafield colors in one place.

Color category metafield swatches can also be used for filtering. Filters are managed in the Shopify Search and Discovery app. Multiple colors can be grouped together (e.g. Brick red, Scarlet and Red can be grouped as Red.)

Does the theme support 2048 variants?

Versions of the Masonry theme after 8.0.0 support 2048 variants.

Does the theme support combined listings?

Versions of the Masonry theme after 8.0.0 support the Shopify combined listings app.

Bring your business ideas to life with Shopify

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!

Contact us