Support

Getting Started

Showing selected options in the cart

By default, a customer who configures a product sees their options at checkout but nowhere in the cart drawer or on the cart page. That is how Shopify works, not a theme problem — it happens identically on Dawn, Horizon, Refresh and every other theme. Attribase fixes it with a one-click app embed.

Where the options appear

Underneath the product title and variant on each cart line, in the same place your theme already prints line item properties, using your theme’s own fonts and colours. Lines with no configuration show nothing at all. Change a quantity or remove a line and the options follow correctly, including two of the same product configured differently.

Options still not showing? Check these first

1. The embed is on for the theme you are looking at. Open that theme in Online Store → Themes → Customize → Theme settings → App embeds and check that Cart selections is switched on.
2. The product has an attribute group and the customer actually chose something. Lines with no selections show nothing, by design.
3. The line was added after Attribase was installed. Older cart lines carry no selections to show.

Custom themes: how Attribase finds your cart lines

Attribase needs two things from each line in your cart drawer and on your cart page: which cart line it is (the line’s item.key) and where to print the options. Themes that follow Shopify’s standard cart structure already provide both, so there is nothing to do. A theme built from scratch may need one attribute added.

1. Standard Shopify cart markup — works automatically

This covers Dawn, Horizon, Refresh, Tinker, Savor and themes built on them. If your theme was built from one of these, keep this structure and Attribase finds each line on its own. A line is recognised when its wrapping element (a <tr>, an <li>, or an element with the class cart-item) carries the line key in any one of these places:

<tr data-key="{{ item.key }}">                          <!-- Horizon, Tinker, Savor -->
<tr id="CartItem-{{ item.key }}">
<a href="/cart/change?id={{ item.key }}&quantity=0">  <!-- Dawn, Refresh: the remove link -->
<input name="updates[{{ item.key }}]">

The options are printed inside the line’s details element, found by the class cart-item__details, cart-items__details or cart-drawer-item__details. Without one of those, they are added at the end of the element that holds the product title link.

Some cart drawers, including Dawn’s, don’t include the line key anywhere. There Attribase matches lines by position instead, and only when the drawer shows exactly as many lines as the cart holds. If your drawer shows only some of the lines, add the attribute from step 2.

2. Fully custom theme — add one attribute

If your cart lines show nothing, add data-attribase-line, holding the line’s item.key, to the element that wraps each cart line. Do this in both places your theme renders cart lines: the cart page and the cart drawer. They are usually different files. Any element works: <tr>, <li> or <div>.

{%- comment -%} cart page, e.g. sections/main-cart.liquid {%- endcomment -%}
{%- for item in cart.items -%}
  <div class="my-cart-line" data-attribase-line="{{ item.key }}">
    <a href="{{ item.url }}">{{ item.product.title }}</a>
    ...
  </div>
{%- endfor -%}

{%- comment -%} cart drawer, e.g. snippets/cart-drawer.liquid {%- endcomment -%}
{%- for item in cart.items -%}
  <li class="my-drawer-line" data-attribase-line="{{ item.key }}">
    ...
  </li>
{%- endfor -%}

To choose exactly where the options appear, add an empty element with data-attribase-slot inside the line. Otherwise they are added at the end of the element that holds the product title link.

<div class="my-cart-line" data-attribase-line="{{ item.key }}">
  <a href="{{ item.url }}">{{ item.product.title }}</a>
  <div data-attribase-slot></div>   <!-- options are printed here -->
  ...
</div>

data-attribase-line is checked before anything else, so once it is present Attribase stops guessing and uses only your markup.

3. A cart drawer drawn by JavaScript

Some drawers are built in the browser from /cart.js rather than from Liquid. Add the same attribute using each item’s key. There is no event to fire and no function to call: Attribase notices the new lines on its own and fills them in.

cart.items.map((item) => `
  <li class="my-drawer-line" data-attribase-line="${item.key}">
    <a href="${item.url}">${item.product_title}</a>
    <div data-attribase-slot></div>
  </li>`)

What this cannot reach

• Cart drawer apps that replace your theme’s drawer with their own markup, which you can’t add the attribute to, and any drawer drawn inside a shadow DOM, which Attribase can’t see into. Your cart page and checkout still show the options.
• Headless storefronts (Hydrogen or a custom front end). Theme app embeds only run on Online Store themes. Read the selections from the _Product Attribute Selections line property and render them yourself.

Still stuck? Email us your store URL and theme name and we will look at it.

Why “Buy it now” disappears on customizable products

On any product with an attribute group assigned, Attribase hides the dynamic checkout buttons — Buy it now, Shop Pay, Google Pay, PayPal and the rest. This is deliberate and it protects your orders.

Those buttons submit straight to checkout without going through the product form, so the customer’s selections are never attached to the line and required fields are never checked. The order arrives with no configuration on it and at the base price: you cannot fulfil it, you cannot tell what was wanted, and you have undercharged. Hiding the buttons is the only way to keep every purchase going through the cart.

• Customers add to cart as normal and check out from the cart — nothing else changes.
• Products without an attribute group keep their dynamic checkout buttons.
• Remove the group from a product and the buttons come straight back.

You will also see this noted on the product assignment screen inside Attribase and in the theme editor next to the Product Attributes block.

Showing options on packing slips

Shopify’s default packing slip template does not print the options a customer selected. It is a one-time edit to fix, and it applies to every order from then on.

1. Go to Settings → Shipping and delivery
2. Scroll to Packing slips and choose Edit packing slip template
3. Find the line items loop — the block that prints each product’s title
4. Paste the snippet below just under the product title, then Save

{%- if line_item.properties['_Product Attribute Selections'] == blank -%}
  {%- for property in line_item.properties -%}
    {%- unless property.first == blank or property.first contains '_' -%}
      <div>{{ property.first }}: {{ property.last }}</div>
    {%- endunless -%}
  {%- endfor -%}
{%- endif -%}

If you use a third-party packing slip or invoice app, add the equivalent loop in that app’s template editor — the property names are the same.

Common Questions

Contact Us