# Product variants (size, color) aren't showing on the landing page

Variants have to be created on the product first, then added to the landing page separately by inserting the **Product Variants** block — creating a variant on the product page alone does not make it appear on the landing page.

## Steps

1. Open the product and go to its **Variants** section; add the variant types you need (e.g. "Type": Balanced/Rich, "Size": 500g/1KG) and save.
2. Open the landing page in the builder, click **+** to add a block, and add the **Product variants** element.
3. Position the variants block above the order form so customers pick a variant before they check out.
4. Save, then test the live (published) link — pick a variant and confirm it carries through to a test order.

## Common problems

- Variant selector missing after generating a page with AI → AI-generated pages don't automatically include the Variants block; add it manually as in the steps above.
- Customer can confirm an order without selecting a required variant on mobile → move the variants/offer block above the order form; this mobile-specific gap doesn't yet have a platform fix, so treat the reordering as a workaround, not a permanent one.
- Color variant selection doesn't reflect correctly in the final order → use image/picture-type variants rather than plain dropdown or text variants for more reliable results on landing pages.

## Related
- [How to add a bundle or volume (quantity) offer to a landing page](https://help.dropify.shop/en/landing_page_builder/add-a-bundle-or-volume-offer-to-a-landing-page/)
- [How to set variants and a before/after (compare-at) price](https://help.dropify.shop/en/products_import/product-variants-before-after-price-and-discounts/)
- [How to customize the order form (Express Checkout) on a landing page](https://help.dropify.shop/en/landing_page_builder/customize-the-order-form-on-a-landing-page/)