> ## Documentation Index
> Fetch the complete documentation index at: https://docs.atomcommerce.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify Theme Extensions

> Set up and configure Atom Commerce app embeds and app blocks from the embedded Setup menu.

Use this page after the required **Atom Discounts App** embed is active on your
live theme. It covers every optional Shopify theme extension currently shown in
Atom Admin's **Setup** menu.

<Warning>
  Make these changes on your live Shopify theme. After every change, click
  **Save** in Shopify, return to **Setup** in Atom Admin, and click **Refresh
  status**. Opening or previewing a theme-editor deep link alone does not
  activate an extension.
</Warning>

## Required app embed: Atom Discounts App

The **Atom Discounts App** app embed is required for all storefront offers.

1. In Atom Admin, open **Setup** and click **Enable app embed**.
2. Shopify opens the live theme editor. In **App embeds**, enable **Atom
   Discounts App**.
3. Click **Save** in Shopify.
4. Return to Atom Admin and click **Refresh status**.

When Setup shows the embed as active, offers are ready to run on the
storefront. Use **Manage app embed** to reopen its settings later.

The app embed also contains the shared storefront settings for cart upsells,
Gift With Purchase, the free-shipping bar, discount badges, and advanced theme
selectors. The free-shipping bar is a setting in this embed, not a separate
theme extension. Its settings include enablement, display location, pages,
appearance, messages, and a shipping details page URL. Use the detailed guides
for [Cart Upsells](/upsells/settings), [Gift With Purchase](/gwp/settings),
and the [Free Shipping Progress Bar](/upsells/free-shipping-bar) before
changing those settings.

## Optional theme extensions

| Extension | Shopify surface | Required for | Setup destination |
| - | - | - | - |
| **Buy More Save More** | App block | Volume-tier display on product pages | Product template |
| **Cart Coupon (Liquid)** | App block | Drag-and-drop coupon field on the cart page | Cart template |
| **Cart Coupon (Javascript)** | App embed | Coupon field placed with CSS selectors | App embeds |

All three are optional. Choose the extension that supports the experience you
want; enabling every extension is not necessary.

## Buy More Save More app block

Add this block to a product template to show qualifying volume or tier offers
on product pages.

1. In **Setup**, select **Add Block** or **Manage Block** for **Buy More Save
   More**.
2. Shopify opens the relevant product template. Add the block if it is not
   present, then select it in the left panel.
3. Configure the block in the right panel, save the live theme, and refresh
   the status in Atom Admin.

| Settings group | Available settings |
| - | - |
| Presentation | **Widget Style** (Standard or Compact) |
| Header and labels | **Header Text**, **Use Discount Title as Header**, **Button Text**, **Best Savings Badge Text** |
| Colors | Background, header text, selected-tier fill and border, default-tier fill, discounted-price, and button colors |
| Sizing | Header font size, button font size, block padding, and button padding |
| Best-savings badge | Badge style, background, border, text color, and font size |
| Behavior | **Keep variant dropdowns closed by default** and **Minimum tiers required to show widget** |

The widget hides when an eligible offer has fewer tiers than the configured
minimum. Use **Use Discount Title as Header** when the offer title should
replace the block's custom header text.

## Cart Coupon (Liquid) app block

Use this app block when you want to place the coupon field manually in the cart
template with Shopify's drag-and-drop editor.

1. In **Setup**, select **Add Block** or **Manage Block** for **Cart Coupon
   (Liquid)**.
2. Shopify opens the cart template. Expand the template section and add or
   select the block.
3. Configure the field, save, and refresh its status in Atom Admin.

| Settings group | Available settings |
| - | - |
| Accordion | **Use Accordion Layout**, **Accordion Title**, **Accordion Button Style**, **Accordion Button Text**, **Accordion Header Background Color**, and accordion content padding |
| Coupon copy | **Invalid Code Text**, **Apply Button Text**, **Placeholder Text**, and **Cart Does Not Qualify Text** |
| Button style | **Apply Button Color** and **Apply Button Border Radius** |

When accordion layout is off, the coupon form is shown directly in the selected
cart-template position. When it is on, shoppers first open the accordion.

## Cart Coupon (Javascript) app embed

Use this optional app embed when your theme needs CSS-selector placement rather
than a drag-and-drop cart block.

1. In **Setup**, select **Enable App Embed** or **Manage App Embed** for
   **Cart Coupon (Javascript)**.
2. In Shopify **App embeds**, enable **Cart Coupon (Javascript)**.
3. Configure placement and appearance, save, then refresh its status in Atom
   Admin.

| Settings group | Available settings |
| - | - |
| Cart page placement | **Show coupon on cart page**, placement mode, and the cart-page CSS selector |
| Cart drawer placement | **Show coupon in cart drawer**, integration mode, placement mode, and the cart-drawer CSS selector |
| Appearance | Accordion layout, title, button style and text, header color, content padding, coupon copy, apply-button color/radius/font size, and horizontal form padding |

Use **Standard (Online Store 2.0 / Dawn)** drawer integration unless your theme
requires persistent custom placement. Incorrect CSS selectors can prevent the
coupon field from appearing, so change them only when you know the relevant
theme markup.

## Troubleshooting

| Problem | Resolution |
| - | - |
| Required embed is inactive | Enable **Atom Discounts App** in **App embeds** on the live theme, save, then refresh Setup status. |
| Block is not added | Open the block's action from Setup, add it to the required template, save, and refresh. |
| Block is inactive | Select the existing block in Shopify's theme editor, enable it if necessary, save, and refresh. |
| Coupon field does not appear | Confirm the selected Liquid block is on the cart template, or review the Javascript embed's selectors and placement mode. |
| Status did not change after saving | Wait briefly, then click **Refresh status** in Atom Admin. Confirm that the edited theme is the live theme. |

## Related

* [Get Started](/getting-started/setup)
* [Cart Upsell Settings](/upsells/settings)
* [Gift With Purchase Storefront Settings](/gwp/settings)
* [Free Shipping Progress Bar](/upsells/free-shipping-bar)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.