Sample quick-add

Shoppers comparing tiles pick samples from the collection grid, not one product page at a time. The Sample quick-add block puts an Add sample button on every product card that has a sample, so a shopper can collect five samples from one collection page and go straight to the cart.

What the shopper sees

A button on the card, with the sample price after the label if you turn that on, and the sample allowance line under it when an allowance is on ("First 3 samples free"). A card whose product has no sample shows nothing.

Adding the block

On themes whose product cards take app blocks (Horizon and the themes built on it):

1. Open the theme editor (Online Store, Themes, Customize) and go to a collection page.
2. In the sidebar, expand the collection's product grid and open the Product card block.
3. Click Add block inside the Product card and choose Sample quick-add from the Apps section.
4. Drag it to where it should sit in the card and save.

The block uses the card's product, so the same block works inside the product card of a featured collection section, the search results and product recommendations. On a product template it uses the page's product.

Settings

• Button: the label ("Add sample").
• Button after adding: what the button says for a moment when the theme has no cart drawer to open ("Sample added").
• Style: outline, solid, a text link, or an icon: a round plus button that reads the Button label aloud and shows it as a tooltip, then turns into a check mark once the sample is in the cart. The icon suits the overlay placement in a corner of the product image.
• Show the sample price: the price after the label.
• Show the sample allowance line: the free or discounted sample offer set in the app, under the button. Nothing shows when the allowance is off.
• Placement: Inline, where the block sits in the card, or Overlay on the product image, pinned to the corner of the card's image you pick in Overlay corner, with an Overlay offset. A card with no image falls back to inline.
• Colours (button background, button text, borders), the font size, and the top and bottom margins for the inline placement.

What happens on click

The sample goes into the cart without leaving the page. When the theme has a cart drawer, the drawer opens with the sample in it. When it has none, the button reads Sample added for a moment and the cart count in the header updates. With JavaScript off the button still works: it submits a plain add-to-cart form.

Where the sample comes from

The same place the buy boxes find it. In the separate-products setup it is the Sample product linked on the Products page. In variants mode it is the product's sample variant: the option value you set in Samples, then Settings, or, once the catalog has been indexed, the variant the index marked as a sample. A variant whose title contains "Sample" works as a last resort. A product with none of these leaves the card empty. See Samples for the two setups.

Legacy themes

Themes whose product cards do not take app blocks need a small paste into the product card snippet instead. Find the snippet that renders one card (usually snippets/card-product.liquid or snippets/product-card.liquid) and paste one of the two slots where the button should appear. The script finds the slot and builds the same button in it; the click does the same as above.

For stores where the sample is a separate product:

{%- assign cpc_sample = card_product.metafields['$app:calculator'].sample_product.value.selected_or_first_available_variant -%}
{%- if cpc_sample -%}
  <div data-cpc-sample-slot data-variant-id="{{ cpc_sample.id }}" data-product-id="{{ card_product.id }}" data-price="{{ cpc_sample.price | money }}" data-group="{{ cpc_sample.metafields['$app:calculator'].sample_group.value }}" data-label="Add sample" data-added-label="Sample added"></div>
{%- endif -%}

For stores where the sample is a variant of the card's product (variants mode):

{%- assign cpc_sample = nil -%}
{%- for cpc_v in card_product.variants -%}
  {%- if cpc_sample == nil and cpc_v.available and cpc_v.metafields['$app:calculator'].sample_group.value != blank -%}{%- assign cpc_sample = cpc_v -%}{%- endif -%}
{%- endfor -%}
{%- if cpc_sample -%}
  <div data-cpc-sample-slot data-variant-id="{{ cpc_sample.id }}" data-product-id="{{ card_product.id }}" data-price="{{ cpc_sample.price | money }}" data-group="{{ cpc_sample.metafields['$app:calculator'].sample_group.value }}" data-label="Add sample" data-added-label="Sample added"></div>
{%- endif -%}

card_product is the variable the snippet uses for the card's product; in some themes it is product, so match the name your snippet uses. The variants-mode slot relies on the mark the catalog index writes on each sample variant, so it shows nothing until the index has run once (it runs every night, and Index now on the Samples page runs it on demand).

Optional attributes on the slot: data-style="solid" or data-style="text" for the button style, and data-allowance="First 3 samples free" for a line of text under the button. The slot cannot read the allowance from the app, so write that line yourself and keep it in step with your allowance settings. Leave out data-price to hide the price.