Dropdown

Use a Dropdown when customers need to choose one value from a longer option list. Dropdown values can support Live Preview, price add-ons, variant-linked inventory, and Conditional Logic.

Overview

Dropdowns display a list of options in a select menu. Useful when you have many options and want to save space on the product page.

How to add a Dropdown option

1. Open the product in Podifai and enter its option editor. Add a Dropdown option.
2. Set its Label, such as "Decorative motif", and add named values such as "Leaf" and "Star". Use the plus button to add another value.
3. Choose whether a selection is required and set a default or placeholder. Configure images, price adjustments, or inventory links only if this choice needs them.
4. Save the customizer and open the product page. Select each value and confirm that the selected name is correct.

For a choice that only collects a motif name, leave Live Preview off. To show the motif on the product, enable Live Preview and assign the intended preview artwork to each value. A menu thumbnail alone does not change the product preview; each value also needs a preview image (see Live Preview). Follow the verification checklist after configuring it.

Live Preview

Dropdown supports Live Preview. When enabled, selecting a dropdown option updates the product image in real time.

1. Select the Dropdown, open Dropdown Properties → Live Preview, and turn on Live customizer.
2. Assign a Preview image to each value in its Edit option value dialog.
3. Position the preview layer on the product image.
4. Choose the leading-image layout if you also want thumbnails inside the menu; the preview works without them.

When Dropdown values use images, you can apply a built-in mask or upload a custom PNG mask for the preview. See Image Masks.

General Settings

• Label value — The option group title (e.g. "Choose a decorative motif")
• Required field — Whether a selection is mandatory
• Default option — Pre-selected option when the page loads
• Help content — Hover or popup guidance.
• Placeholder — Text shown before selection (e.g. "Choose...")

Option Values

Each value needs a name and optionally an image. You can duplicate or delete values. Additional settings per value:

• Image — Optional PNG, JPG, JPEG, WebP, or SVG thumbnail shown in the dropdown menu
• Price adjustment — Surcharge for specific selections
• Track inventory — Link to a Shopify variant for stock tracking

Add leading images to Dropdown values

Appearance

Hide a Menu Thumbnail or Hide Preview Artwork

These are separate changes. The optional Image on a Dropdown value is the thumbnail inside the menu; the option's Live Preview settings control artwork placed on the product preview.

• To hide images inside the dropdown menu, review the value's optional Image and the Dropdown Appearance Layout. Turning off Live Preview does not by itself remove menu thumbnails.
• To keep collecting a selection without placing its artwork on the product image, turn off Live Preview for that option and verify the storefront selection and saved order value.

• Layout — Choose how values are presented, including a leading image.
• Size — Set the control size.
• Radius — Set corner rounding.
• Fill & outline — Choose the fill and outline style.
• Outline color — Set the outline color.
• Filled color — Set the fill color.

Change Dropdown size

Change Dropdown border style

Change Dropdown corner radius

Conditional Logic

Use Conditional Logic to show or hide this option based on another selection. For example, show a decorative motif list only when the shopper chooses to add a design.

Set a Placeholder Image

Open this option's Live Preview tab and turn on Enable placeholder image. Choose a provided placeholder or add your own image. This setting is available for Image Upload, Image Swatch, Badge Group, Dropdown, and image-enabled Checkbox.

Dropdown Choices and Shopify Variants

Keep size, stock color, and other choices that define the base product SKU in Shopify variants. A Dropdown saves a personalization choice. Linking a value for add-on inventory or pricing does not replace the base variant selected by the Shopify product form. See Shopify Variants vs Podifai Options.

Verify the Dropdown

• Check the label, placeholder, default selection, and required setting on desktop and mobile.
• Select every value and verify its configured preview image and charge.
• If values have inventory links, test the linked stock behavior separately from the base product variant.
• If the Dropdown is conditional, test both the matching and non-matching parent selections.

Finish with the cart, checkout, and order checks.