Product page

Learn how to set up your product page to reach its full potential.

What is the product page?

The Product page helps customers to discover, learn about and most importantly purchase your products. Our Alchemy theme offers simple settings to enable you to quickly create the perfect layout to suit your brand. A well constructed product page can not only help to increase conversion rates and promote upselling, but also reinforce brand identity and improve search engine rankings.

Product-page.png

How to set up the product page

Steps

  1. Open the Theme Editor.
  2. Select Products from the dropdown at the top and choose the desired product template (e.g. Default product).
  3. Click on Product details to edit the main page settings.
  4. Select Enable sticky columns if the product media or product form are very different lengths. The product page is divided into two columns on larger screens, with the product media on the left side and the product form on the right side. 
  5. Configure the Media layout settings.
  6. Choose whether to show a full width product description Below media and details or to show the description in the Description block or a Collapsible content block. 
  7. Select one of the pre-loaded blocks to begin customizing its settings, or click Add block to choose a block from the list. 

Tip

All settings here will be applied to all products using the selected template, not just the product currently in view. To show different blocks or sections on different products, assign alternative templates or, for an individual approach, use Shopify metafields to add unique content.

A breadcrumb trail will be shown top left of the product page. Choose whether to show the collection from which the customer navigated to the product page, by selecting Theme Settings > Product cards > Include collection in URL.

Media layout

Steps

  1. Click on Product details to edit the Media settings.
  2. Set the Media size to Small, Medium or Large.
  3. Choose the preferred media Desktop layout - Stacked or Slider
    The Stacked layout shows all the product images at the same time, stacked on top of one another. The Slider layout provides for a more compact product page. This slider layout will always be used on mobile.
  4. Choose when to Show slider thumbnails.
  5. Set the Media shape. Choose one of the two Adapt settings if product image sizes are inconsistent. 
  6. Choose whether to enable an image border, image zoom or video looping.

Multiple variant images

If product images are neatly arranged by color (e.g. selling the same top in different colors), the Show media associated with the selected variant setting can be used to show images of only the selected color i.e. selecting the option 'Red' will only show the red images of the item.  

If there is a lifestyle image or video which needs to show for all groups this can be added just once and shown for all media groups.

Please refer to the Multiple variant images article for more detailed guidance.

Blocks

The Alchemy theme has a range of blocks to choose from that can be used to improve functionality or enhance the appearance of the Product form. The Collapsible content, Custom Liquid, Divider, Image, Custom block and Rich text blocks can be added as many times as required - all other blocks are limited to one instance each.

Steps

  1. Open the Theme Editor.
  2. Select Products from the dropdown at the top and choose the desired product template.
  3. Select the Product details section in the Template group.
  4. 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

Shows the product title.

Price block

Shows the product price and, if the variant is reduced in price, the Shopify compare at price. Sale prices can be shown in different color set in Theme Settings > Colors > Sale price. Choose to show the currency using the setting in Theme Settings > Currency > Show currency codes. Tax and shipping information and a product rating can also be displayed in this block. 

Variant picker block

The Variant picker block is used to display pertinent product selection information such as color swatches and sizes. Use the settings provided to adjust the Selector style (Buttons or Dropdown).

Note

Refer to the Swatches guide for details on how to enable swatches within the Variant picker.

The Alchemy theme can show variant availability to make it quick and easy for your customers to find out which product variants are in stock and can be purchased. The Show availability in selectors setting will indicate availability using a diagonal line or text. When an option is selected, the options below it are updated to show availability. 

crossed-out-options2.png

crossed-out-options.png

Under Size chart, there are customizable settings to Enable size chart and adjust the Option name (e.g. Size), as well as to select the Page containing the size chart. (Pages can be set up in Online store > Pages). A page metafield can be used if different products require different size charts.  The text "Size guide" can be changed by editing the default theme content. 

Size-guide-alchemy.png

Custom option block

Add additional custom content blocks for personalised products, customer details or additional product preferences. 

Steps

  1. From the Shopify admin area, open the Theme editor.
  2. Select Products from the dropdown at the top and choose the desired product template.
  3. In the left-hand settings panel, click Add block and select Custom option. 
  4. Choose the appropriate custom option type - Text, Checkbox or Multiple options (dropdown menu or radio buttons)
  5. Rename your custom option and ensure that the name is unique.

Caution

The Require text setting in custom option blocks can only be set to be required if used with the Add to Cart button. The text will not be required if the Buy it Now/Dynamic checkout button is used. 

Buy buttons block

Controls to Show quantity selector, Show dynamic checkout button, Show pickup availability, Show backorder text, and the option to Show recipient information form for gift cards are all held in this block. 

Select Show inventory notice to show the inventory level. This can be an excellent way of providing customers with stock level information and creating a sense of urgency to encourage a quick purchase. It can be used for products where Shopify tracks the quantities in stock. Set the Low inventory threshold, and choose whether to Show count in inventory notice. The colors are controlled in Theme settings > Colors.

stock-pulse.png

Description block

In the Alchemy theme, the product description can be shown on the right of the product page or full-width below the product media and product form.

Steps

  1. From the Shopify admin area, open the Theme editor.
  2. Select Products from the dropdown at the top and choose the desired product template.
  3. Click on the Description block.
  4. Choose whether to Show as collapsible content, if the tab is open by default and if an Icon is used.

Tip

Take care not to show the product description twice. The Alchemy theme includes the option to show the product description under the media and product details or in a separate block. If the setting Product pages > Below media and details is used, the Description block may not be needed. 

Collapsible content block

Organize content and declutter product pages by using collapsible content blocks. This can help keep product card content 'above the fold'. a great way to present additional product and/or brand information to your customers in a visually interesting way, to avoid overloading the product form.

Collapsible-content.png

Steps

  1. Open the Theme Editor
  2. Select Products from the dropdown at the top and choose the desired product template (e.g. default)
  3. Click to Add block and select Collapsible content (it is possible to add multiple Collapsible content blocks)
  4. Choose the Heading, Icon (optional) and Content. Content can be added directly to the tab in the theme editor, pulled from pages or metafields.
  5. Choose if the tab should be Open by default.
  6. Set the Collapsible content toggle icon to be an arrow or a plus/minus sign in Theme Settings > Design.

Rich text block

The rich text block includes the option to add text and links with an Icon and a box style presentation useful for highlighting product features. 

Rich-text-block.png

Preorder-richtext-example.png

Image block

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

SKU block

Show the variant SKU

Barcode block

Show the variant barcode / ISBN / UPC

Vendor block

Add a vendor block to show the product vendor and choose whether to Show label.

Tip

The vendor will automatically link to a page showing all products by that vendor. If you'd prefer this link to go to a specific collection page, give that collection page the same handle as the vendor page handle. 
  1. In the Shopify admin area, go to Products > Collections and click on the relevant collection.
  2. Scroll down to the Search engine listing panel, and click Edit.
  3. Change the URL handle of the page to match the handle of the vendor. 

    The handle of the vendor will normally be a lowercase version of the vendor name, with dashes instead of spaces. For example, if the vendor name is 'Example vendor', the handle should be 'example-vendor'.

Product rating block

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

Sharing block

Make it easy for customers to share links to your products using the sharing block with individual settings for X (formerly Twitter), Facebook and Pinterest.

Cross-selling

Suggesting other related products and cross selling is a key part of the product page. There are several blocks and sections that are specifically designed for this purpose. Ensure these are set up in Theme settings > Social media.

Complementary products block

To further enhance the functionality of the product form, the Complementary products block can be used in conjunction with the Search & Discovery app to display a range of related products.

Customize the block Heading using the text input provided, adjust the Maximum products to show with the range slider, and set the Layout to either Carousel or List as required.

Related products section

The recommendation logic that controls which products are displayed to customers is not determined by the theme, but by the Shopify platform. This is the same for all themes. Use automated recommendations or create specific recommendations using Shopify's Search & Discovery app.

Product list section

The product list section offers similar functionality to a featured collection section but with the advantage that a curated list of products can be shown. Select products to show or use a product metafield of type 'product list' to show different items for each product. 

Note

Settings applied to the Default product template (or any other template) will affect all products using that template, not just the product currently being viewed. To learn more on the topic of using unique templates to represent the varying needs of products, refer to Shopify's guide on Templates. 

Preorder template

Use this template to display a Pre-order button.

Steps

  1. From the Admin, go to Products. Select the product to be assigned to the preorder template. (Please note the theme must be published in order to select the template)
  2. Under Theme template, select preorder.
  3. Save changes.
  4. From the Admin, go to Online store > Customize.
  5. On the left-hand side panel, choose Theme settings > Product cards > Labels beside price and make sure the toggle is active for Show pre-order label.
  6. Save changes.

Tip

To create a new preorder template, base it on the existing preorder template and include the word preorder (no hyphen) in the name.

FAQs

Why can't I assign my product to one of the product templates?

Alchemy (or any theme) has to be the published theme before the Shopify dashboard will provide the option of assigning the templates to products. 

Where can I find the quick buy settings?

Go to Theme Settings > Product cards to Enable quick buy. Note that the quick buy is disabled on mobile. The color of the quick buy drawer can be set in Theme Settings > Colors > Side drawers.

How do I show breadcrumbs?

The Alchemy theme will show breadcrumbs on the product page. Choose whether they include the collection name using the setting Theme Settings > Product cards > Include collection in URL.

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 using the Buy block settings. Refer to the Shopify article Adding and removing dynamic checkout buttons for more details. 

How do I add an image zoom?

An image zoom can be enabled under Product Details > Media > Enable image zoom. It is not possible to set the strength of the zoom.

I have an older version of the Alchemy theme, why don't my settings match those described?

This article applies to version 5.0.0 and above of the Alchemy theme.

How do I show different content per product?

Content for blocks such as the collapsible content block can be drawn from compatible product metafields. This can be useful for care or sizing information, materials, ingredients or many other product specific details. Metafields and metaobjects are a standard feature in Shopify. Refer to the Shopify metafields tutorial for more information. 

Steps

  1. To use metafields to hold product specific content shown in a collapsible tab on the product page, open the Shopify admin and go to Settings > Custom data.
  2. Click on Products to create a new product metafield for your content. The metafield should be a type that can contain text. There are several types available.
  3. In the Shopify admin, go to Products, edit a product and find the newly created metafield. Enter your content in the metafield and save the changes. There are also bulk editing options for products available in Shopify.
  4. Open the Theme editor, and select Products and the desired product template from the dropdown at the top.
  5. View the product page and scroll to your collapsible content block. Next to Collapsible content select the Connect dynamic source icon to add your metafield/metafields. 

Metafields of the appropriate type held in metaobjects can also be used.

Note

The Bulk Editor is a helpful tool to quickly update metafields and other attributes across all your products.
Sign up for Shopify today for $1

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