Texts and styles

Texts

t(key) returns one of the template’s texts. Keys are grouped, with a dot between the group and the name:

<h2>{{ t('general.cartTitle') }}</h2>

Texts can have placeholders in curly braces, which you fill in with the second argument:

<!-- "You're {amount} away from free shipping" -->
{{ t('progress.remaining', { amount: progress.remainingFormatted }) }}

Some texts change with a number, such as “1 item” and “4 items”. In the template they have a form for each plural category of the language: one and other in English, one, few, many and other in Polish, and so on (the categories are those of Intl.PluralRules). Pass count and the language’s rules pick the form. A zero form, if there is one, is used for 0 in any language. A missing form falls back to other, then many, then one:

<!-- { "one": "{count} item", "other": "{count} items" } -->
{{ t('subtotal.itemsCount', { count: ns.itemCount }) }}

If a key doesn’t exist, or a text with forms gets no count, t returns the key itself, which makes typos easy to spot in the preview.

Languages

The cart shows its texts in the language the shopper is browsing the store in. A text missing in that language comes from the next one that has it:

1. The shopper’s language, such as pt-BR
2. Its base language, pt
3. The store’s primary language
4. English

The texts come with the template version the cart was created from, one set per language (en, de, pt-BR). Merchants can reword any of them per language in the editor’s Translations tab and add their own under custom (t('custom.welcome')); their wording wins over the template’s. Minimalist 2.4.0 and later comes in English, Danish, Dutch, French, German, Italian, Japanese, Polish, Portuguese (Brazil and Portugal), Spanish and Swedish; carts created from an earlier version are in English only.

Texts merchants write

A block setting of type text or textarea is written once per language: config holds the text in the shopper’s language, or the primary language’s when there’s no translation. Text in any setting can name one of the cart’s texts as {{ group.key }}, such as {{ custom.sale }}, which config already has replaced with that text in the shopper’s language. Names need a group, so a single name in braces, such as a money format’s {{amount}}, stays as it is. These need snippet 1.3.0.

The cart’s own texts

Some texts are shown by the cart itself rather than by your markup, such as the message after a discount code is applied. They’re in the core group, translated into English, Danish, Dutch, French, German, Italian, Japanese, Polish, Portuguese (Brazil and Portugal), Spanish and Swedish. A template can give its own wording for any of them under the same key.

Key	Shown when
core.cart.updateError	A change to the cart failed and Shopify gave no reason
core.cart.addError	A product couldn’t be added from the store’s product form
core.discounts.success	A discount code was applied
core.discounts.invalid	Shopify can’t apply the code to this cart
core.discounts.error	The request to apply or remove a code failed

When Shopify refuses a change and says why, such as “You can only add 3 of this item”, the cart shows Shopify’s reason, which is already in the shopper’s language.

Design variables

Each setting in the editor’s Theme tab is also a CSS variable, set on the cart (#ns-cart) and on the overlay behind it (#ns-overlay), so it works anywhere inside them but not in the rest of the page. Its name is the setting’s name in the template, in lower case with dashes and --ns- in front: the Button colour, colorButton in the template, is --ns-color-button. In Custom CSS, the editor suggests them as you type.

#ns-cart .my-banner {
  background: var(--ns-color-accent-background);
  color: var(--ns-color-accent-text);
}

Styling blocks

The cart is the element #ns-cart. Each block inside it has the classes ns-cart-block and ns-cart-block-<type>, and each section has ns-cart-section-<section>: ns-cart-section-top-bar, -header, -body and -footer.

The block types are cart-title-bar, items, checkout, discount, subtotal, announcement, announcement-message, progress-bar, loyalty, payment-methods and html (Custom HTML), so the cart items list is .ns-cart-block-items.

While it’s open, the cart also has the class ns-cart-open, and ns-cart-position-left or ns-cart-position-right tells which side it slides in from.

Start selectors with #ns-cart, as the template’s own CSS does. That keeps your rules from affecting the rest of the store. Your Custom CSS comes after the template’s CSS, so at the same specificity your rule wins:

#ns-cart .ns-cart-block-subtotal {
  border-top: 2px solid var(--ns-color-border);
}