‘Default Title’ shows under products in the cart drawer

01Where “Default Title” comes from

Shopify’s cart API shows what a product with no options looks like in the cart: "variant_title": null, "variant_options": ["Default Title"] and "product_has_only_default_variant": true (Shopify, Cart API reference). Code that prints the first option without checking prints “Default Title”.

1. 01

   Two renderers, one check

   Liquid draws the drawer on page load; a script redraws it from /cart.js after an add. If the check was only added on the Liquid side, the drawer looks right on load and after a reload, and wrong the moment something is added.

2. 02

   A check on the wrong thing

   A check like unless item.variant.title contains 'Default' hides a real option with that word in it. has_only_default_variant says what you mean.

3. 03

   A second option that isn’t there

   Script that prints variant_options[0] and variant_options[1] prints the word “undefined” for a product with one option.

4. 04

   The same gap in other places

   On this thread (May 2022), a sticky add-to-cart bar built from a guide showed “Default Title” for products with one variant. On this one, started in 2019, people still asked in 2022 how to remove it from product pages, and one reply hides it with CSS. Hiding covers only the places the CSS matches.

02Put the same check in both places

For store owners: is it the drawer’s script?

1. 1

   Add a product with no sizes or colours

   If “Default Title” shows under its name in the drawer, reload the page and open the drawer again.

2. 2

   Gone after the reload?

   Then the theme draws the drawer twice and the script’s copy has no check. It’s a small code fix: send your developer the product link.

3. 3

   Still there after the reload?

   Then the theme has no check in either place, or draws the drawer only by script. It’s the same small fix, in the one place it is drawn: send your developer the product link.

For developers: the same check in both renderers

{%- unless item.product.has_only_default_variant -%}
  {%- for option in item.options_with_values -%}
    <div class="cart-item__option">{{ option.name }}: {{ option.value }}</div>
  {%- endfor -%}
{%- endunless -%}

function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

function optionsHtml(item) {
  if (item.product_has_only_default_variant) return '';
  return (item.options_with_values || [])
    .map((o) => '<div class="cart-item__option">' + escapeHtml(o.name) + ': ' + escapeHtml(o.value) + '</div>')
    .join('');
}

• Key it on product_has_only_default_variant (or variant_title, which is null for these products) rather than matching the text.
• Loop over options_with_values instead of reading fixed positions, so a product with one option never prints “undefined”.
• Best: don’t build cart markup in the script at all. Ask Shopify for the drawer’s section with the sections parameter on /cart/add.js or /cart/change.js, and swap in what comes back, so Liquid is the only renderer (Shopify, Section Rendering API). Dawn’s drawer is drawn this way, with the same has_only_default_variant check (Dawn, cart-drawer.liquid).

03Add products with none, one and two options

1. 1

   Add a product with no options

   Nothing under its name in the drawer, before and after a reload.

2. 2

   Add one with one option, then one with two

   Each shows its own options, and never “undefined” (search the page source for it too: it can be printed into a hidden element).

3. 3

   Look at the other places

   The cart page, a sticky add-to-cart bar, a quick view, and any upsell inside the drawer.