Product pages

The product page displays all the important information about the product itself.

The default product page layout has a list of product media (including images, videos and 3D images) on the left side and product details on the right side. The product section comes with some default blocks such as title, description, quantity selector, price, variant picker, inventory status and buy buttons.

Moreover, you will find two Collapsible tab blocks containing further details on Payment & Shipping and Details & Care.

On the product section level, you are able to decide the layout which best suits your styling and your product images aspect ratio.

Product page layouts

 One column layout

 Two columns layout

 Traditional, thumbnails below main image

Variant images

The Variant images setting allows you to control which images are displayed in the product gallery when a specific variant is selected. This helps keep the gallery relevant to the user's choice and reduces clutter.

• Show all: Displays every image attached to the product, regardless of the selected variant.

• Show selected: Displays the image specifically assigned to the chosen variant, plus any images that are not assigned to any variant (general product images).

• Show selected group: Displays the image assigned to the chosen variant and all subsequent images in the gallery until the next variant-assigned image is reached. This is useful for grouping multiple photos of the same variant together.

Configure your product blocks

Taiga theme allows you to customize your product page with a large variety of blocks:

• Heading: Shows the product title;
  
  
• Price: Displays the product price. It will show eventual Compare at price when set;
  
  
• Text: Allows to add a custom text to display additional content for your product template;
  
  
• Product description: Displays the product description;
  
  
• Variant picker: Adds a variant picker for choosing product variant. You can choose between Button or Dropdown styles. Check this guide or the instructions below if you want to use Color swatches feature within variant picker;
  • Use Advanced settings to override the default picker style for specific product options. This allows you to mix styles, for example, using buttons for color and a dropdown for size.
    • Options which use the dropdown picker: Enter the variant option names (e.g., 'Size') that should specifically appear as a dropdown. Separate multiple names by a line break.
    • Options which use the button picker: Enter the variant option names (e.g., 'Color') that should specifically appear as buttons. Separate multiple names by a line break.
• Inventory status: Displays a text indicator of product availability. 
  
  
• Quantity selector: Shows a quantity selector for choosing the number of products to buy.
  
  
• Buy buttons: Shows the Add to cart and Buy it now buttons;
  
  
• Pickup availability: Displays pickup availability for products that can be collected from local pickup location. Refer to this guide to set up locations in Shopify;
  
  
• Sibling products: Adds a list of products, in the form of a slider, as product swatches. Sibling configuration guide below.
  
  
• Share buttons: Displays an icon and once you click on it, it will show the product page link.
  
  
• Similar collections: Displays a list of collections the product belongs. You are also able to exclude some collections from the listing if needed;
  
  
• Custom liquid: Adds custom Liquid snippets inside the product page;
  
  
• Collapsible item: Shows additional product information using expandable tabs. The content can be fetched from either a textarea setting or from a page. This block also allows you to display the content on a drawer instead of a tab.
  
  
• Star rating: Displays product ratings, showed as star icons. Refer to this guide to learn more about Shopify product reviews;
  
  
• Sticky buy bar: Will appear from the bottom of the screen when the Buy buttons block is not visible. Sticky buy bar's Add to cart button will add the currently selected variant to the shopping cart.
  
  
• Badges: Show product badges on the product page.
  
  
• Size guide: Show Size guide button next to the variant picker. The button opens the size guide drawer which can contain image, text or a reference to a size guide page. 
  
  
• Image grid: Display small images like certificates, shipping and payment provider logos etc. Supports up to 8 images.
  
  
• SKU: Display product SKU.
  
  
• Upsell and complementary products: Show products that can be added to the cart with the main product or separately. See the instructions below how to customize shown products with Shopify Search & Discovery app.
  
  
• Attribute insights: Display product-specific insights such as fit, sizing, firmness, skill level, or other measurable attributes using a visual scale. Choose between slider, fill, or segmented display styles, add custom labels, and optionally show threshold-based recommendations to help customers make more confident purchase decisions. See how to add a True to size block with Attribute insights.

How to Control Related and Complementary Products

Color swatches

You can enable color swatches in the product card settings panel. When enabled the color variants will be shown as color dots on the product cards, product page and in the filtering drawer.

Color option name trigger can be edited from theme translations and it defaults to "Color". Search for "color swatch identifiers" in online store "Edit Languages" view.

We suggest also adding storefront filter for the color option. Learn how to.

Custom images for color swatches

By default swatch colors are automatically generated based on the color option value. This means that e.g. black generates color black and blue creates blue:

Default color swatch for blue and black variants:

However, these default colors are not always ideal. For that reason you can override these colors by uploading a file to Files section of your store.

If you wish to override the color black, then you should create a file named black.png or black.jpg and upload it to Files. For color names with space, replace all spaces with a dash. For example "Midnight Black" should be midnight-black.png or midnight-black.jpg

Note: Make sure that file name is always written in lowercase.

Blue and black color swatches with custom images: 

Configure sibling products

The sibling products block requires you to link the products via metafields. Before you can link the products you need to add a one time metafield definition. After that you can link the product in the admin panel's product view or through the bulk edit view (where you first need to add the metafield to a new column to edit the values).

Adding the metafield definition

1. In the Admin panel go to Settings > Metafields > Products > Add definition
2. Set the following values for the new metafield definition
   1. Name: Sibling products
   2. Key and namespace: woolman.sibling_products 
   3. Content type: Product - List of products
3. Save the definition

Adding siblings to products

After the metafield definition is done you can add sibling products via the Product view or trough the bulk edit view where you first need to add the metafield to a column to edit the values.

• Add the list of siblings to all of the sibling products
• Note: The current product should be included in the siblings to show and highlight it on the product page

Sibling products are not showing up. Where is the problem?

1. Check that you have the Sibling products block active in the product template
2. Check that have the correct namespace and key in the metafield definition: woolman.sibling_products 
3. Check that the product you are viewing has a list of product values in the Product siblings metafield

Why use sibling products?

Sibling products feature helps you to link multiple products as options for the end user. This way the end user can quickly jump between these different products and rather than variants only.

How to Add a True to size Block with Attribute insights

Setting up your fit guide takes just a few minutes in the Shopify Theme Editor.

Adding Threshold Messages

To be even more helpful, you can enable Threshold messages. This allows you to show specific text based on the value. For example:

• Below 35: "We recommend ordering one size up."
• Between 35 and 65: "Go for your usual size."
• Above 65: "We recommend ordering one size down."

Practical Use Cases Beyond Clothing

While "True to size" is the most common use, this block is incredibly flexible. You can use it for:

• Food & Beverage: A "Spiciness" scale (Mild to Extra Hot).
• Beauty: "Skin type" suitability (Dry to Oily).
• Hobby/Gear: "Skill level" (Beginner to Pro).
• Home Goods: "Firmness" for mattresses or pillows.

Product recommendations

Product recommendations section is a static section which is displayed below currently viewed product products and it shows a list of product recommendations.

Its logic is based on different factors. Please refer to this guide to learn more about Shopify product recommendations logic and to this guide to learn how to further customize these recommendations.

Recently viewed products

Recently viewed products section is a static section which is displayed below currently viewed product products and it shows a list of recently viewed products.

Its logic is based on saving recently viewed products product handles inside the browser session storage.