Webflow doesn't yet support native product variants, but there are workarounds using CMS collections, e-commerce options, or third-party tools to simulate variant functionality.
1. Use CMS Collections for Each Variant
- Create a CMS Collection (e.g., “Products”) and include fields like product name, price, image, and a Variant dropdown selection (like Size or Color).
- Use Reference or Multi-Reference fields to connect base products to their respective variants.
2. Simulate Variants with Option Fields
- Use custom option fields in each product page like dropdowns or buttons (e.g., Small, Medium, Large).
- Visually show or hide elements (images, stock info) based on selected variant using Webflow’s interactions or conditional visibility.
3. Use Custom JavaScript (Limited Use)
- Add custom JavaScript to track variant selection and dynamically update price, image, and Add to Cart button behavior.
- This requires integrating with Webflow’s Buy Button or modifying product forms via custom code.
- Keep in mind that Webflow’s cart system only supports static product listings—it won't track individual variant selections as separate products unless structured separately.
4. Create Each Variant as Its Own Product
- Create each variant (e.g., "T-Shirt - Small", "T-Shirt - Medium") as a separate product in the Webflow E-commerce backend.
- Group them on a single product display page using the CMS or a filter layout, such as with Finsweet’s CMS Nest or Jetboost filters.
5. Use Third-Party Integrations
- Use tools like Finsweet's Attributes, Foxy.io, or Shopify Buy Buttons:
- Foxy.io: Allows full control over variants with a Webflow front end.
- Shopify’s Buy Button: Embed a Shopify product with variants on your Webflow site.
- Finsweet Attributes: Can be used to simulate filterable variant options.
Summary
To work around product variants in Webflow, simulate them using CMS collections, custom option fields, or custom code. For full variant functionality, consider alternatives like Foxy.io or Shopify Buy Buttons until Webflow releases official support.