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, and the Compare at price with a strikethrough when the product is on sale. Choose the font weight and separate font sizes for desktop and mobile. See Sale prices below;
• Text: Adds custom text to your product template. Choose separate font sizes for desktop and mobile, show it as boxed text, or use the subdued style for a softer, secondary look;
• Product description: Displays the product description;
• Variant picker: Adds a variant picker for choosing the product variant, as Buttons or a Dropdown. The picker follows the settings in Theme settings → Variant picker, which also apply to the quick view. To use different settings on one product template, change them in the block, where each one is set to Use theme setting by default. See Variant picker below, and the color swatches instructions if you want to use Color swatches within the variant picker;
• 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 in an expandable row, or in a drawer with Open as drawer instead of collapsible. The content can come from the rich text field, a page, Custom liquid (for example product metafields), or a combination of them. An item without any content is hidden, so you can add one item to the template for content that only some products have.
• Star rating: Displays product ratings, showed as star icons. Refer to this guide to learn more about Shopify product reviews;
• Sticky buy bar: Appears from the bottom of the screen when the Buy buttons block is not visible. Its Add to cart button adds the currently selected variant to the cart, and its price uses the Price block's font weight.
• Badges: Show product badges on the product page.
• Size guide: Shows a Size guide button next to the variant picker label of the options you list in Option names, for example "Size", or "Men's Size, Women's Size" for a store with separate size charts. 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.

Text and Price settings

Text block settings

Setting	Type	Default	Description
Text	Rich text	Text block	The content shown in the block.
Show 'Read more' button for long text	Toggle	Off	Texts longer than 250 characters are shortened and can be expanded by customers.
Style as boxed text	Toggle	Off	Shows the text inside a box.
Use subdued style	Toggle	Off	Shows the text in a softer, lower-contrast color for secondary information.
Margin top	Range	8 px	Space above the block. Between 0 and 48 px.
Size modifier (desktop / mobile)	Select	Default	Font size, set separately for desktop and mobile. Options: Tiny, Small, Default, Large, Huge, Gigantic, Outrageous.

Price block settings

Setting	Type	Default	Description
Margin top	Range	8 px	Space above the block. Between 0 and 48 px.
Font weight	Select	Regular	Options: Regular, Bold sale price, Bold. Also applies to the sticky buy bar. Bold sale price only affects products on sale.
Size modifier (desktop / mobile)	Select	Default	Price size, set separately for desktop and mobile. Options: Tiny, Small, Default, Large, Huge, Gigantic, Outrageous.

Variant picker

The variant picker settings are in Theme settings → Variant picker. They apply to the Variant picker block on every product template and to the variant picker in the quick view, so the picker looks the same everywhere.

Variant picker theme settings

Setting	Type	Default	Description
Picker style	Select	Buttons	Options: Dropdown, Buttons.
Cross out unavailable variants	Toggle	On	Crosses out variant buttons that are unavailable. Buttons style only.
Show selected value next to the option name	Select	For all options	Shows the selected value next to the option name, for example "Color: Forest green". Options: For all options, Only for color swatches, Never. Buttons style only.
Button width	Select	Fit to text	Equal width lines the buttons up in even columns that fill the row. Color swatches keep their size. Also applies to sibling products shown as labels.
Selected button	Select	Hairline	How the selected button is marked. Solid fills it with the text color. Color swatches keep their outline. Also applies to sibling products shown as labels.
Options which use the dropdown picker	Text area	—	Option names that always use a dropdown, for example Size. Separate names with commas or line breaks. Not case sensitive.
Options which use the button picker	Text area	—	Option names that always use buttons, for example Color. Separate names with commas or line breaks. Not case sensitive.

Variant picker block settings

Each setting is set to Use theme setting by default. Change one to use a different value on this product template only. The quick view always uses the theme settings.

Setting	Type	Default	Description
Picker style	Select	Use theme setting	Options: Use theme setting, Dropdown, Buttons.
Cross out unavailable variants	Select	Use theme setting	Options: Use theme setting, Yes, No.
Show selected value next to the option name	Select	Use theme setting	Options: Use theme setting, For all options, Only for color swatches, Never.
Options which use the dropdown picker	Text area	—	Leave empty to use the theme setting. Separate names with commas or line breaks.
Options which use the button picker	Text area	—	Leave empty to use the theme setting. Separate names with commas or line breaks.
Margin top	Range	8 px	Space above the block. Between 0 and 48 px.

Sale prices

When a product has a Compare at price higher than its price, the Price block shows both: the original price with a strikethrough and the sale price. You control how they look in three places:

• Price order — In Theme settings → Currency and localization, choose whether the original price or the sale price comes first. It applies across your store: product pages, product cards, the cart and order pages.
• Sale price color — In Theme settings → Colors, each color scheme has a Sale price color and a Sale price on card background color. Leave them transparent to use the normal text color. See Colors.
• Font weight — In the Price block, Bold sale price makes only the sale price bold, while Bold makes the whole price bold.

How to Control Related and Complementary Products

You can either manually select products in the Upsell and complementary products block or use a dynamic source connected to the Search & Discovery app.

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: 

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
3. Name: Sibling products
4. Key and namespace: woolman.sibling_products
5. Content type: Product - List of products
6. 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.

Attribute insights

The Attribute insights block shows a product attribute on a visual scale, for example a True to size fit guide for clothing. 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

Product pages remember the products a customer views during their visit. Add the Recently viewed products section to the product template, or any other page, to show them. See Recently viewed products.

---

Advanced

This section is intended for developers customising the theme. No changes here are required for normal use.

Product block snippets

From Taiga 9.0.0, the markup of most product page blocks lives in its own snippets/product-block-*.liquid snippet (for example product-block-buy-buttons.liquid, product-block-price.liquid and product-block-collapsible-tab.liquid) instead of snippets/product-template.liquid. The template keeps only the block loop and control flow, such as hiding empty blocks. If you have customised a block in product-template.liquid, move your changes to the matching snippet.

Price styles

The Price block passes its font weight to snippets/price.liquid as font_weight, which adds price--bold or price--bold-sale to the price. Sale price colors come from the --color-sale-price and --color-card-sale-price color scheme variables; when a scheme's color is transparent the variable is reset to initial and the price keeps its inherited text color.