# Product blocks ### Title

Product title block with a share icon enabled.

* **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** The supplementary text ('Taxes included') in the screenshot can be edited in the theme settings. ### Description

Description block with content truncated

* **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

Four different variant picker styles. From top to bottom, there is the swatch display style, the bordered button, the text button and the dropdown.

* **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\ \ ![](https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FA9assTeCuSoqegNOkHzB%2Fimage.png?alt=media\&token=05da56fc-f2ac-4585-973d-dac98154bcb3)\ \&#xNAN;*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

Buy buttons with dynamic checkout buttons.

* **Show dynamic checkout:** See Shopify's documentation about [accelerated checkout](https://shopify.dev/docs/storefronts/themes/pricing-payments/accelerated-checkout#implementing-accelerated-checkout-buttons-in-your-theme). Dynamic checkout buttons will not show if you have added a cart checkbox. The style of the button depends on if the dynamic checkout is enabled; if there is no dynamic checkout button, it will use the **primary** button style. If there is a dynamic checkout button, the **secondary** button style will be used. * **Show quantity selector**: Enabling this places a quantity selector within the Add to cart button. * **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](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields). {% hint style="info" %} To show a preorder button instead of "Add to cart", check out [this guide](https://docs.ultramarinastudios.com/guides/how-to-create-a-preorder-product). {% endhint %} ### Quantity selector

Quantity selector, with a label, a minus and plus button and an input.

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)](#buy-buttons). It has a visible label for enhanced accessibility. ### Subtitle

Product title with a product subtitle block underneath it.

If you have set a [subtitle for products](https://docs.ultramarinastudios.com/guides/how-to-add-a-product-subtitle-cutline), 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

Product badges above a product title and subtitle.

If you have [added badges to products](https://docs.ultramarinastudios.com/guides/how-to-add-product-badges), 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

A separator is used to provie spacing between the product form and the complementary products.

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)](#product-information). * **Opacity**: Set to 0 to just use this block as spacing with no border ### Pickup availability

Text that reads: Pickup available at Primavera Headquarters. Usually ready in 24 hours. View store information.

Allows you to display if/where the product is available for pickup. Please consult Shopify's documentation about [in-store pickup](https://help.shopify.com/en/manual/fulfillment/setup/delivery-methods/pickup-in-store). ### Collapsible item

Collapsible item labelled 'Shipping' with some content underneath about the store's shipping policy.

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

A text field that says Engraving, with additional label text saying 4 characters max.

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 with text on the Precision product page — The icon with text block can be used to display promotions.

The icon with text block can also be linked to metafields be used to display product features in a list.

* **Icon** * **Icon size** * **Image (Optional)**: Set Icon to "None" so only the image appears. * **Image maximum width** * **Text** * **Font style** * **Layout**: * **Layout**: Row/column * **Horizontal/vertical alignment** * **Padding** * **Gap** * **Color scheme** ### Low inventory

The low inventory block has an icon with text saying 'Only 1 availabale'

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

Example of breadcrumbs on Precision demo store — Breadcrumbs placed above the product title.

For collection-aware breadcrumbs, enable [collection-aware product links](https://docs.ultramarinastudios.com/theme-settings/product-card) in Theme settings. ### Complementary products

Complementary products on the Artistry demo store — Complementary products on the Gaia demo store

Follow our guide on how to [add complementary products](https://docs.ultramarinastudios.com/guides/how-to-add-product-recommendations). Add optional context to the product list with the following settings. * **Heading** * **Font Style** * **Text** Control the display of the products with the following settings. * **Maximum products to list** * **Style**, choose between **card** or **list** * **Card color scheme** only applies if 'card' style is selected
### Custom liquid {% hint style="success" %} Available in version 1.2.0 and later {% endhint %} Custom liquid is an advanced block where users can add entirely custom code to to the product information block. ### Linked products {% hint style="success" %} Available in version 1.4.0 and later {% endhint %}

Product page for an example crossbody bag that links between the large and mini size. — The Large and Mini versions of the bag are promoted on each product page to allow customers to easily discover the different available sizes.

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:\ Linked products metafield is a list of products

Linked products metafield is 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".