Storefront Behavior

Runtime selection

The AutoCart Liquid runtime chooses one storefront bundle before mounting the modal.

The Modal Designer bundle is loaded only when all of these conditions are true:

1. Modal version is Modal Designer (Advanced).
2. The shop has the Advanced-or-higher Modal Designer entitlement.
3. Modal design ID or handle is not blank.
4. The ID, numeric ID, or handle matches a visible AutoCart modal-design metaobject.

If any condition fails, AutoCart loads the original legacy bundle and preserves the exact legacy modal behavior.

This fallback is evaluated on each page load. No theme code or configuration is migrated when a design is enabled.

Saved configuration

Each design is stored in an app-owned $app:modal_design metaobject. Its configuration contains:

• Global typography and color tokens
• Desktop and mobile modal frames
• Blocks and block content
• Separate desktop and mobile block order
• Product layout and responsive card styles
• Preview product snapshots

Only AutoCart modal-design metaobjects can be edited or deleted through Modal Designer routes.

Live products and rule data

Products selected under Demo products make the editor representative; they do not replace products from an automation rule. When a rule opens the storefront picker, the modal renders the products and variants supplied by that rule.

The live modal supports:

• Product and variant images, with a neutral placeholder when no image exists
• Variant selection
• Select/unselect toggling
• A maximum selection count from the active rule
• A live selection counter
• Declining the offered gifts when enabled
• Confirmation before cart mutation

Discounted prices

When Show discounted price is enabled, the modal derives the displayed amount from the rule discount:

• Percentage discounts reduce the selected variant price.
• Fixed per-item discounts reduce the price and stop at zero.
• A 100% or otherwise zeroed price displays the configured free-price label.
• Unsupported or inactive discount types are not estimated.

The Shopify discount function remains responsible for the actual cart/checkout discount. The modal value is a storefront representation of the rule, not a replacement for discount execution.

Responsive behavior and scrolling

Desktop and mobile use separate modal width, padding, rounding, block order, product layout, orientation, thumbnail size, and action layout.

Product overflow is contained inside the product collection:

• Sliders move by card while keeping variant controls interactive.
• Grids scroll vertically after their configured visible rows.
• Lists show complete cards and scroll vertically when their content exceeds the available modal height.

The modal itself stays centered in the viewport on index, product, and cart pages. Its overlay and content use a high isolated stacking context so theme drawers and headers do not cover it.

Shadow DOM and theme fonts

The designed modal renders inside a Shadow DOM. This isolates its layout and controls from broad theme CSS such as empty-element rules, global button styles, and product-page positioning rules.

When Font family is set to Theme font, the host inherits the theme’s computed font family and exposes it inside the Shadow DOM. Other typography and component styles remain isolated, which keeps the editor and storefront rendering consistent.

Modal interaction

• Clicking outside the modal does not dismiss it.
• The top-right close icon remains available.
• The focus outline added by the dialog primitive is suppressed on the modal frame.
• Slider arrows, variant controls, select/unselect actions, discard, and confirm remain interactive inside the isolated root.

Troubleshooting

The legacy modal appears

Verify the plan, Modal version, and design value. Recopy the numeric theme ID from the designs table or the Install in theme dialog. A deleted, inaccessible, or mistyped design intentionally falls back to legacy.

The preview and storefront differ

Confirm that the theme references the design you most recently saved. Unsaved editor changes are not available to Liquid. Also remember that the editor uses demo products while the storefront uses products from the qualifying rule.

Discounted prices do not appear

Enable Show discounted price in the Gifts / products block and verify that the active rule uses a supported, active percentage or fixed discount. Separately verify the Shopify discount function if the cart price itself is not discounted.

Theme CSS affected the old modal

Make sure the configured design is resolving and that the designer bundle is loaded. The designed modal uses Shadow DOM isolation; the legacy modal intentionally keeps its original theme-CSS behavior.