Add to Shopify

Theme block and styling

Add the builder to your theme, use the block settings, CSS tokens and stable class names.

The builder is a theme app block. It works with Online Store 2.0 themes and takes its font and text color from your theme unless you change them.

Add the block

  1. In Shopify Admin, go to Online Store, Themes, Customize.
  2. Open a product template used by your customizable products.
  3. Add a block or section, choose Apps, then Moddify Studio.
  4. Save.

The block finds the customizer published for the product on its own. Fill in Customizer ID only to show a different customizer.

Prefer not to touch templates? Turn on the Moddify Studio app embed under App embeds and enable Show the builder on customizable products without an app block. The embed does nothing on product pages that already have the block.

Block settings

Setting Options
Layout Split (preview beside options), Stacked, Full screen (opens from a button)
Preview position on desktop Left, Right
Height on desktop For the split layout
Price bar Sticky at the bottom on mobile, or inline
Show step numbers On or off
Accent color, Background, Text color Background matters on dark themes
Corner radius, Image tile size Sizes in pixels
Font Same as theme, or a custom font from the font picker
Choices shown in the cart None, Short (one line), Full (one line per option)
After add to cart Go to cart, or stay on the page
Starting preset ID See Presets and saved designs
Mount selector Move the builder into another element, for themes that need it
Custom CSS Anything the settings do not cover

CSS tokens

All styling runs through CSS custom properties on the builder root (.cmz). Set them in Custom CSS:

.cmz {
  --cmz-radius: 4px;
  --cmz-tile: 104px;
  --cmz-accent: #b5246e;
}
Token Default Notes
--cmz-text, --cmz-bg theme text, Canvas Text and background
--cmz-accent, --cmz-on-accent text, background The on-accent color is chosen for contrast
--cmz-surface, --cmz-border, --cmz-border-subtle, --cmz-muted mixed from text and background Work on light and dark backgrounds
--cmz-error, --cmz-focus red, accent Error text and focus ring
--cmz-radius, --cmz-radius-sm, --cmz-radius-pill 12px, half, 999px Corners
--cmz-space-1 to --cmz-space-6 4 to 32px Spacing scale
--cmz-font, --cmz-font-heading inherit Fonts
--cmz-fs-xs to --cmz-fs-xl 0.8125 to 1.375rem Type scale
--cmz-tile, --cmz-swatch, --cmz-target 88px, 36px, 44px Tile and swatch size, minimum touch target
--cmz-height, --cmz-preview-max, --cmz-panel-min 80vh, 45vh, 340px Layout sizes

Class names

These class names are stable between releases, so overrides keep working:

Part Classes
Root cmz, cmz--split, cmz--stacked, cmz--fullscreen, cmz--preview-left, cmz--preview-right
Preview cmz-preview, cmz-preview__stage, cmz-preview__layer, cmz-views, cmz-view--active
Steps cmz-steps, cmz-step, cmz-step--active, cmz-step--error
Questions cmz-question, cmz-question--{type}, cmz-question__title, cmz-question__help, cmz-question__error
Answers cmz-answers--swatch, --tiles, --buttons, --list, cmz-answer, cmz-answer--selected, cmz-answer--soldout, cmz-answer__label, cmz-answer__price
Price bar cmz-pricebar, cmz-pricebar__amount, cmz-pricebar__add, cmz-pricebar__message

Example: a heavier outline on selected answers.

.cmz-answer--selected .cmz-answer__body { box-shadow: none; outline: 3px solid var(--cmz-accent); }

Accessibility

Answers are real radio buttons and checkboxes, focus is always visible, price changes are announced to screen readers and touch targets are at least 44 px. If you change colors, check that text and the accent keep enough contrast against your background.