Creating product variants — Webflow Ecommerce tutorial

Variants are things like large red socks,
medium teal socks, and baby polka dotted socks (the plural of polkadot, of course, being
polkasdot). But it starts with the socks. (The product.) Say we have a special kind of sock. These new socks have holes in the bottom,
hence the name ImpracticalSocks. This is a new product we’re adding to our
products page. (We want to sell ImpracticalSocks.) We have a bunch of different versions — different
options we want to give shoppers for each sock. We want to give them an option for size. We want to give them an option for color. So right here, we’re typing out the options
we have for size. Hitting the return key after typing each. Four options in this case: baby, small, medium,
and large. What do the sizes mean? Nobody knows. These socks are highly impractical as-is. And we’ll move on — we’ll start adding
another set of options. This’ll be for the color. ImpracticalSocks come in red. ImpracticalSocks come in teal. Impractical socks come in polkadot. And of course, Impractical socks come in transparent
houndstooth. But notice down below? We have variants. Based on the options we specified, unique
variants are created automatically. It’s using advanced trigonometric identities
in a Python matrix to display all the possibilities as different SKUs. Except it isn’t. It’s just generating the combinations. And it’s doing it exactly as you’d expect:
it’s just taking each of our options and making different variants based on what we
entered above. So instead of having to write out each and
every variant, we just specify the options. Variants are automatically generated. So. How does all this show up on your product
page? A dropdown is automatically added to the product. With all the variants available. Customers go to the product, select the variant
(just like they do when they’re choosing something like quantity), and then they buy
your things. (If you don’t see it on your product page,
make sure you have an add to cart button, because the variant dropdown is included with
that.) One final note: each variant can have its
own image. (An image for each variant.) And the image you choose there? Will automatically show up in the product
page as you select a variant from the dropdown. And you can edit these at any time. For instance: you might want to clean up the
casing on these so they look pristine in your published project. Just make those changes, and the variants
will automatically update on the product page. And that’s creating product variants in
Webflow Ecommerce.

, , , , , , , , ,

Post navigation

6 thoughts on “Creating product variants — Webflow Ecommerce tutorial

  1. Is it possible to customize the variant drop down menu? For example, maybe selectable thumbnails to change the color of a shirt?

  2. Is it possible to generate automatic prices for different variants?
    For example baby size 2$, small 3$, normal 4$, big 5$ and red color 2$, blue 1$ and so on, so it calculates the baby blue sock together to 3$ and the big red one to 7$?
    I hope you understand my point, my english isn´t that great obv.

Leave a Reply

Your email address will not be published. Required fields are marked *