Webflow sync, pageviews & more.
NEW

Is there a way to work around product variants in Webflow until it is officially released?

TL;DR
  • Create separate products for each variant and link them via a CMS reference to group and display related variants.
  • Use custom dropdowns or CMS collections with Buy Buttons and JavaScript to simulate variant selection and dynamic product info.
  • For full variant control, integrate third-party tools like Foxy.io or Snipcart.

Webflow’s native support for product variants is still in development, but there are a few workarounds to simulate variants using current Webflow Ecommerce tools.

1. Use Separate Products for Each Variant

  • Create individual products for each variant (e.g., a t-shirt in S, M, L becomes 3 separate products).
  • In the product name or title, include the variant detail, like “T-Shirt – Small”.
  • Group them using a product reference field in a CMS Collection (e.g., a “Product Group” collection that all variants reference).
  • On the product page, use a Collection List to display all related variants using this reference.
  • Create custom Dropdown or Radio button elements for users to select options.
  • Each option is linked to a different product using Webflow’s Buy Button element.
  • Update the price and product info dynamically using interactions or custom JavaScript if necessary (Webflow doesn’t do this natively yet).

3. Combine CMS and Ecommerce for Custom Variant Logic

  • Use a CMS Collection to simulate variant options (color, size, etc.).
  • Each variant is linked to a different Ecommerce product via a reference or multi-reference.
  • You can show/hide or swap product info based on variant selection using Webflow interactions or JavaScript (e.g., swapping elements on user selection).

4. Integrate Snipcart or Foxy for Full Variant Control

  • Use Foxy.io or Snipcart instead of Webflow’s native Ecommerce.
  • These platforms allow full control over variants, inventory, pricing, and conditional logic.
  • Products are managed in the CMS, and you add custom cart buttons via embedded attributes.

Summary

Until Webflow officially supports product variants, the most accessible workaround is creating separate products for each variant and connecting them with CMS relationships or dropdown logic. For more advanced control, integrating Foxy or Snipcart is a powerful alternative.

Rate this answer

Other Webflow Questions