Modal Designer

Overview

Modal Designer is a visual editor for the storefront gift picker. It lets merchants arrange content blocks, preview desktop and mobile layouts independently, select representative store products, and style the modal without custom CSS.

Modal Designer is available on the Advanced plan and higher. The standard legacy modal remains available on every supported plan.

Each saved design is stored as an app-owned Shopify metaobject. A theme uses a design only after its ID or handle is entered in the AutoCart theme extension settings.

Open Modal Designer

1. In AutoCart, open Settings.
2. Find the Modal Designer card.
3. Click Manage designs.

The card is always visible, but its action is disabled when the shop is not on the Advanced plan or higher. Eligible shops can also open Modal Designer from the callout on the AutoCart home page.

Create a design

1. Click Create design.
2. Start with the included preset.
3. Switch between Desktop and Mobile to configure each viewport.
4. Select a block in the left sidebar or directly in the preview to edit it.
5. Drag blocks to reorder them, or use the arrow controls.
6. Click Add block to insert content.
7. Use the contextual save bar to save the design.

When creating a design, the initial preset is treated as unsaved even before a field is changed. Discard returns to the designs list. When editing an existing design, Discard restores the last saved configuration.

Install a design in the theme

After saving, click Install in theme in the editor header and copy the generated design ID. Then:

1. Go to Online Store → Themes in Shopify admin.
2. Click Customize on the active theme.
3. Open the existing AutoCart app embed, or add AutoCart Block to the required section.
4. Set Modal version to Modal Designer (Advanced).
5. Paste the design ID into Modal design ID or handle.
6. Save the theme.

The setting accepts the complete Shopify GID, its numeric ID, or the design handle.

Manage designs

The designs table displays the name, theme ID, handle, last update, and available actions. You can:

• Click a design name or Edit to reopen it.
• Copy the theme ID for use in the theme editor.
• Delete a design after confirming in the AutoCart confirmation modal.

Deleting a design does not edit theme settings. A theme that still references the deleted ID automatically falls back to the legacy modal.

Next steps

• Settings reference — Every modal, block, product, and button setting
• Storefront behavior — Product data, discounts, selection, responsive layouts, and fallback rules
• Theme extension block settings — Theme-editor activation settings