Settings Reference
Complete reference for responsive Modal Designer settings and blocks.
Editor layout
The editor follows the Shopify theme editor model:
- Left sidebar: block order, visibility, selection, add, remove, and modal settings
- Center: interactive storefront preview
- Right inspector: settings for the selected block or modal
- Header: desktop/mobile switch, save state, installation help, and back navigation
Desktop and mobile maintain separate block order and responsive values. Content shared by both devices, such as heading text or product visibility, is edited once.
Modal settings
Open Modal settings in the left sidebar to configure the design as a whole.
Design details and typography
| Setting | Description |
|---|---|
| Design name | Name displayed in the Modal Designer list. |
| Description | Internal description for the design. |
| Font family | Use the inherited theme font, system sans-serif, serif, or monospace. Theme font inheritance is preserved inside the storefront Shadow DOM through the host element. |
Desktop and mobile frame
Each device has its own frame settings:
| Setting | Description |
|---|---|
| Width | Maximum modal width, from 280px to 1440px. The modal remains constrained by the viewport. |
| Gap | Space between modal blocks. |
| Internal padding | Independent top, right, bottom, and left padding. |
| Border radius | Independent top-left, top-right, bottom-right, and bottom-left rounding. |
Colors and overlay
Every color field includes a color picker and text value. Supported values include hexadecimal, RGB/RGBA, HSL/HSLA, transparent, inherit, and currentColor.
| Setting | Used for |
|---|---|
| Show background overlay | Enables or disables the page overlay behind the modal. |
| Text | Default foreground text. |
| Muted text | Secondary text and fallback compare-at price. |
| Background | Modal surface. |
| Primary button | Default primary actions. |
| Primary button text | Text on default primary actions. |
| Secondary surface | Default secondary actions and surfaces. |
| Border | Default neutral borders and slider arrows. |
| Overlay | Overlay color and opacity. |
Reset styles restores typography, colors, desktop/mobile frames, arrow styles, and button styles after confirmation. It does not delete blocks or replace their content.
Blocks
Use Add block to insert any supported block. Blocks can be reordered independently on desktop and mobile. Use Remove block at the bottom of the inspector to delete the selected block.
| Block | Settings and behavior |
|---|---|
| Heading | Text, font size, weight, alignment, color, padding, and margin. |
| Subheading | Text, font size, weight, alignment, color, padding, and margin. |
| Text | Long-form text, font size, weight, alignment, color, padding, and margin. |
| Gifts / products | Demo products, collection layout, card orientation, product content, discounted prices, arrows, and product selection. |
| Selection counter | Counter label, font size, weight, alignment, color, padding, and margin. |
| Accept / discard buttons | Action layout, labels, visibility, colors, font size, padding, and rounding. |
| Divider | Color and thickness. |
| Spacer | Separate desktop and mobile space sizes. |
A valid design always contains exactly one Gifts / products block and one Accept / discard buttons block in both layouts.
Text spacing
Heading, subheading, text, and selection-counter blocks support independent top, right, bottom, and left values for:
- Padding: 0px to 160px
- Margin: -160px to 160px
Negative margins should be used carefully because they can overlap other blocks on small screens.
Gifts / products settings
Demo products
The preview initially uses the first six active, non-draft products returned by the store. Click Select products to choose up to ten products. Demo products and variants are saved with the design for preview purposes; qualifying rule products are used on the live storefront.
Layout
| Setting | Options | Behavior |
|---|---|---|
| Collection layout | Slider, Grid, List | Controls how product cards are arranged. |
| Product orientation | Vertical, Horizontal | Places product content below or beside the thumbnail. |
| Show navigation arrows | On/off | Available for Slider only. |
| Columns | Desktop: 1–4; Mobile: 1–2 | Number of products per grid row. |
| Visible rows | 1–10 | Height of the grid viewport before vertical scrolling. |
- Slider: displays the configured number of visible cards and supports working previous/next arrows in both preview and storefront.
- Grid: fills the configured columns and rows, then scrolls vertically when more products are available.
- List: displays one product per line and scrolls vertically. On mobile, vertical list cards use a taller portrait thumbnail and the list viewport displays complete cards.
Arrow buttons
Slider arrows support background, icon and border colors; button and icon sizes; border width; corner rounding; and shadow visibility. The preview and theme extension use the same values.
Product content
| Setting | Description |
|---|---|
| Show thumbnail | Shows or hides product images. |
| Thumbnail size | Small, medium, or large. Images preserve their proportions. |
| Show title | Shows or hides the product title. |
| Show price | Shows the regular variant price. |
| Show compare-at price | Shows a struck-through compare-at price when present. |
| Show discounted price | Calculates the rule discount for the displayed gift. A 100% discount uses the configured free label. |
| Free price label | Localizable text such as FREE or GRATIS. |
| Show variant selector | Shows the product variant chooser when needed. |
Title, regular price, compare-at price, and discounted price have independent font sizes. Regular, compare-at, and discounted prices also have independent colors. Prices display the localized currency amount without appending an ISO currency code.
Product cards also support a background color and corner rounding. The selected-card border uses the select-button color.
Select product button
The product action supports:
- Show/hide select button
- Select and unselect labels
- Button and text colors
- Font size
- Vertical and horizontal padding
- Corner rounding
The action toggles the product: the first click selects it and the next click unselects it. The preview permits one selected demo gift at a time. When Show select button is disabled, clicking the product card performs the same select/unselect action.
The variant selector matches the select button’s width, font size, height, and corner rounding.
Accept / discard buttons
The action block supports separate desktop and mobile layout direction and full-width behavior. Close, confirm, and discard actions each have their own:
- Label
- Button and text colors
- Font size (14px by default)
- Vertical and horizontal padding
- Corner rounding
The discard action can be hidden. Its checkbox icon can also be shown or hidden independently.
The storefront modal also includes a close icon in the top-right corner. Clicking outside the modal does not close it.