Product blocks

Title

• Heading size

• Enable share icon: When enabled, a link icon appears next to the title which allows users to share the link or copy the link to clipboard, depending on their browser

• Share color scheme: If there is no native sharing available in the browser, users will see a simple copy to clipboard message. This setting determines the color scheme of that message.

Price

• Font style

Description

• Text: On the product template, the text field automatically connects to the product description dynamic source. Note that when using the Featured product section, you will need to connect the description block manually to the dynamic description source.

• Truncate content: When enabled, this truncates the product description at a specific point and allows users to display the rest in a modal

  • Enable truncation

  • Word limit: Threshold at which the description will be truncated, e.g. 40

  • Modal title: This is the title of the modal, default set to "Description" but you could also connect the product title as the dynamic source

Variant picker

• Style: Choose between Text button (default), Bordered button or Dropdown.

• Swatch: Choose between default (the style specified in Theme settings) or none to simply display color variants as plain text

• Show variant images for these options: Comma-separated list of variant option names (e.g. Size, Color) that should display variant images instead of the selected default style. Available in version 1.2.0 and later Instead of color swatches, we're displaying each variant image instead.

• Modal: This is a flexible feature that allows you to place a modal, e.g. a Size guide, next to specific variant options. You can add modals for up to three option names. Here are the settings for each modal/option name:

  • Option name: Case-sensitive name of the option you wish to display the modal for, e.g. Size

  • Page: Select the content for the modal

  • Label: Display the modal trigger as a simple info icon or as the page title

Buy buttons

• Show dynamic checkout: See Shopify's documentation about accelerated checkout

• Show quantity selector: Enabling this places a quantity selector within the Add to cart button. It only displays if no quantity selector block exists elsewhere in the section.

• Show recipient information form for gift cards. Allows buyers to send gift cards on a scheduled date along with a personal message. Learn more about gift cards.

Quantity elector

This block is available should you prefer to display a quantity selector by itself instead of including it within the Add to cart button (see above). It has a visible label for enhanced accessibility.

Subtitle

If you have set a subtitle for products, you can choose to display it in your product form by using this block.

SKU

If a SKU exists for the product, this allows you to display it.

Badges

If you have added badges to products, you can choose to display them in your product form by using this block.

Use the style setting to choose between primary, secondary or text style.

Separator

Use the separator to either add a visible border or white space between blocks to increase visual hierarchy. The border color is inherited from the color scheme used in Product information (see above).

• Opacity: Set to 0 to just use this block as spacing with no border

Pickup availability

Allows you to display if/where the product is available for pickup. Please consult Shopify's documentation about in-store pickup.

Collapsible item

Display an accordion/collapsible block. If multiple collapsible items are added in sequence, they will be grouped together.

• Heading

• Heading font

• Text: This can be the same for all products that use this template/section or you can choose to add a dynamic source, e.g. a metafield for "Details".

• Page: Assign page content instead of the text content (above). When no page is assigned

• Open by default Available in version 1.4.0 and later

Note: For added flexibility, if no content is added to the Text field (e.g. the specified metafield is empty) or if the text field is empty and no page is assigned, the collapsible block will not display at all.

Product rating

If you are using a reviews app, display the product rating with this block.

Line item property

This block allows you to add a line item property field to any product, e.g. engraving, packaging preferences or another piece of data you'd like to collect from the customer.

Here are the settings common to each type:

• Type: Choose between Text, Checkbox or Dropdown

• Label: Ensure this is a unique label for this specific section

• Required: If required, customers will not be able to add to cart without making a selection

  • For the checkbox type, if you set it to required, customers will not be able to proceed without checking the box. This could be useful for asking customers to confirm they've read additional information, for example, before proceeding with their purchase.

Then, depending on which option you chose, fill in the relevant fields for your selected type:

• Text

  • Input type: Choose between a single line of text or multiline

  • Character limit: Available in version 1.4.0 and later

    • Enable character limit

    • Character limit

• Checkbox

  • Checked value: This will be the value visible in the cart when they've checked the box, e.g. Would you like packaging? Yes

  • Unchecked value: If the field is not required, this means you can collect the unchecked value instead of requiring the checkbox to be checked in order to add to cart. For example: Would you like packaging? No

• Dropdown

  • Options: Comma-separated list of options. Accepts any text except for "None" as this is a reserved keyword for select dropdowns. Example: Option 1, Option 2

Icon with text

• Icon

• Icon size

• Image

• Image maximum width

• Text

• Font style

• Layout:

  • Layout: Row/column

  • Horizontal/vertical alignment

  • Padding

  • Gap

  • Color scheme

Low inventory

If inventory is being tracked and a product is unavailable or inventory falls below a determined threshold, this message will display. It will also show if stock is incoming and if a date is available, the date will be displayed.

• Low inventory threshold

• Content:

  • Icon

  • Icon size

  • Image

  • Image maximum width

  • Text

  • Font style

  • Layout:

    • Layout: Row/column

    • Horizontal/vertical alignment

    • Padding

    • Gap

    • Color scheme

Breadcrumbs

For collection-aware breadcrumbs, enable collection-aware product links in Theme settings.

Complementary products

Follow our guide on how to add complementary products.

Custom liquid

Custom liquid is an advanced block where users can add entirely custom code to to the product information block.

Linked products

The Linked products block (also known as sibling products) links together different products as if they were variants. This is ideal when a separate product page is needed for each product variation (e.g. size, color) but you still want to show the different options to customers. Each option clicks through to that specific product page.

To set up linked products:

• Create the separate products (in the above example, we have the Large Leather Crossbody Bag and the Mini Leather Crossbody Bag)

• Create a new product metafield that takes a list of products:

• For each linked product, fill in the new metafield: select all the linked products, including the current product and keeping the same order

• On the product template, add the new "Linked products" block and connect the product list metafield you created

• Optional: Add the Option name (e.g. "Size" for the above example)

• Optional: Specify a product metafield (string only) where you'll be overriding the product titles with a shorter, more concise name, e.g. "Large" instead of "Large Leather Crossbody Bag".