Product Modal Slider — Setup Guide

The Product modal slider block adds a button to your product form that opens a modal with a swipeable image carousel and input fields. Customers reference the chart images (e.g. color charts, sizing guides, thread swatches) and fill in their selections — all of which submit as line item properties on the order.

Where it lives: Theme Editor → Product form section → Buy buttons group → Add block → Product modal slider

---

Quick start

1. Create the metaobject definition in Shopify Admin (Settings → Custom data → Metaobjects → Add definition). Call it whatever makes sense for your use case (e.g. "Chart Slide"). Add these fields:

   Field handle	Type	Purpose
   chart_image	File reference	The chart/swatch/sizing image for this slide
   chart_label	Single line text	Slide heading shown above the image
   input_key	Single line text	The line item property key (e.g. Color 1)
   input_placeholder	Single line text	Placeholder text inside the input (optional)

2. Create entries for each slide. For example, if you have 4 color chart images and customers need to pick 2 colors:

   • Entry 1: image = warm-colors-chart.png, label = Warm Colors, input_key = Color 1, placeholder = Enter your color
   • Entry 2: image = cool-colors-chart.png, label = Cool Colors, input_key = Color 1, placeholder = Enter your color
   • Entry 3: image = warm-colors-chart.png, label = Warm Colors, input_key = Color 2, placeholder = Enter your second color
   • Entry 4: image = cool-colors-chart.png, label = Cool Colors, input_key = Color 2, placeholder = Enter your second color

3. Add a metafield to the product (Settings → Custom data → Products → Add definition). Type: List of metaobject references pointing to the definition you just created.

4. Assign entries on each product that needs the slider. Go to the product page in Admin, scroll to the metafield, and add the entries in the order you want them to appear.

5. Add the block in the Theme Editor. Open the product form section, click Add block inside the buy buttons group, and choose Product modal slider.

6. Configure the block settings (see settings reference below). At minimum, enter the Metafield namespace (custom by default) and Metafield key (the handle you chose in step 3).

---

Shared inputs vs. per-slide inputs

This is the most important setting to understand.

"Link inputs to slides" = OFF (default — shared inputs)

Use this when multiple chart images reference the same input fields. This is the most common setup.

Example: You sell custom hats and the customer needs to pick 2 thread colors. You have 4 different color chart images (warm tones, cool tones, neutrals, metallics) that they can swipe through for reference. All 4 charts share the same two inputs: Color 1 and Color 2.

In this mode:

• The block collects all unique input_key values across every slide and renders one input per unique key
• All inputs are always visible below the slider regardless of which slide is active
• Customers swipe through charts for reference, then fill in the inputs below

"Link inputs to slides" = ON (per-slide inputs)

Use this when each slide has its own dedicated input field and you want only that slide's input to be visible at a time.

Example: You have a 3-step customization flow: Step 1 = pick a base color (chart 1, input: Base Color), Step 2 = pick an accent (chart 2, input: Accent Color), Step 3 = pick a thread (chart 3, input: Thread Color). Each slide shows one input at a time.

In this mode:

• Each slide gets its own input, shown/hidden as the customer swipes
• The input label uses the slide's chart_label instead of the input_key

---

Settings reference

Launch button

Setting	What it does
Button label	Text on the button (e.g. "Pick Your Colors")
Button style	Primary, Secondary, or Outline — matches theme styles
Helper text	Small text shown below the button for extra context

Modal

Setting	What it does
Heading	Optional large heading at the top of the modal
Description	Optional rich text shown below the heading
Confirm button label	Text on the bottom button (default: "Confirm")

Image slider

Setting	What it does
Metafield namespace	Usually custom. Only change if your metafield uses a different namespace.
Metafield key	The handle of the product metafield that holds your list of chart entries.
Link inputs to slides	See "Shared inputs vs. per-slide inputs" above.
Mark as required	Makes slider inputs required and shows a red asterisk (*) on the launch button. Turn this on whenever the modal contains any required fields — it tells customers they need to open the modal before adding to cart. The confirm button validates all required fields and won't close until they're filled in.
Enable click-to-zoom	When on, customers can click a chart image to zoom in. Moving the mouse pans the zoomed image. Click again to unzoom. A magnifying glass icon appears on zoomable images. Also works with keyboard (Enter/Space) and touch panning on mobile.
Zoom level	Controls how far the image zooms in (1.2× to 3.0×). Only visible when click-to-zoom is enabled.

Child fields

Setting	What it does
Show fields outside modal	When enabled, child line item property blocks (text fields, selects, etc.) appear on the product page AND inside the modal. When disabled, they only appear inside the modal.

Visibility

Setting	What it does
Required product tag	Only show this block on products with this tag. Leave blank to always show.
Hide when design is selected	Automatically hides the block when a pre-made design is selected.

Conditional display

These settings show or hide the entire modal slider block based on the value of another line item property field on the same product form.

Setting	What it does
Show based on another property	Master toggle — turn this on to enable conditional logic.
Controlling property key	The property key to watch (e.g. Customization Type).
Visibility rule	Has any value, Is any of, or Is not any of.
Values (comma separated)	For "Is any of" / "Is not any of" — list the values to match against.

Layout

Standard width controls (full/half on tablet and desktop) — same as every other block in the theme.

Button spacing

Controls the margin around the launch button on the product page (top, bottom, left, right). Use "Bottom" to push the button away from the block above it, or "Top" to add space above.

Modal padding

Controls the internal padding of the modal dialog itself (top, bottom, left, right). Defaults to 20px on all sides. Increase "Top" to push content down from the top edge of the modal, or reduce sides for a tighter layout.

---

Adding child line item property blocks

The modal slider can contain child blocks inside it — the same field types available elsewhere in the product form:

• Product custom property (text, textarea, checkbox)
• Product file upload
• Product custom select (dropdown, enhanced dropdown, radio)
• Product custom multiselect (checkboxes)
• Product swatch group
• Product note

To add a child block, click into the Product modal slider in the Theme Editor sidebar, then click Add block within it. Configure the child block exactly as you would if it were placed directly in the product form. All conditional logic, required validation, and fee support work the same way.

If Show fields outside modal is enabled, these child blocks appear both on the product page and inside the modal.

---

How the data flows

1. Every input inside the modal uses the HTML form attribute to link back to the main product form — even though the input is inside a dialog overlay.
2. When the customer clicks Add to Cart, all filled-in values submit as line item properties on the cart item.
3. The confirm button just closes the modal. Inputs sync to the form live as the customer types — nothing is lost if they close the modal early.
4. Values appear in the cart, order confirmation, and admin order detail under the property keys you defined in the metaobject entries (e.g. Color 1: Scarlet, Color 2: Navy).

---

Common setups

Color picker with multiple charts

Goal: Customer picks 2 colors from any of 4 color charts.

• Create 4 metaobject entries with alternating input_key values of Color 1 and Color 2
• Leave Link inputs to slides OFF
• Result: 4 swipeable chart images, 2 always-visible inputs below

Step-by-step guided customization

Goal: Walk customers through 3 choices, one at a time.

• Create 3 metaobject entries each with a unique input_key
• Turn Link inputs to slides ON
• Result: each slide shows its own input, swipe to advance

Sizing chart reference (no inputs from slider)

Goal: Modal just shows sizing chart images with no associated inputs, but includes a text field child block for entering a size note.

• Create metaobject entries with chart_image and chart_label filled in, but leave input_key blank
• Add a Product custom property child block inside the modal slider for "Size Notes"
• Result: swipeable sizing charts with a free-text field below

Conditional visibility

Goal: Only show the color chart modal when the customer has selected "Custom" from a dropdown.

• Enable Show based on another property
• Set the controlling property key to whatever your dropdown's property key is (e.g. Design Type)
• Set visibility rule to Is any of → Custom
• Result: the entire block (button + modal) is hidden until Design Type = Custom

---

Troubleshooting

Problem	Fix
No slides appear in the modal	Check that the metafield namespace and key match exactly. Verify the product has entries assigned.
Inputs not showing up	Make sure input_key is filled in on the metaobject entries. Blank keys are skipped.
Only 1 input shows instead of 2	If using shared mode, make sure at least 2 entries have different input_key values.
Values not on the order	Confirm the metafield key is correct. Check browser dev tools → the input should have a form attribute pointing to the product form ID.
Block not appearing on a product	Check the Required product tag setting and Conditional display settings.
Slider navigation arrows not working	Make sure there are at least 2 slides. Navigation only renders when there are multiple entries.
Child blocks not rendering	Make sure you added child blocks inside the Product modal slider block, not as siblings next to it.