▼
Streaming live at 10am (PST)

How do I create variable for my products

Design help CMS
#1

Hi Alex, thanks for all the great tip & tricks you’ve been providing us all with. I look forward to enjoying your “Webflow to Shopify full export” tutorial.

Meanwhile, just wanted to ask you one thing on this subject. How would you go about creating variable products using Webflow CMS?

I mean, let’s say we have the following standard scenario:

  • Product (e.g. XYZ)
  • Collection: (e.g. Fall / Winter 2016)
  • Color: White
  • Size: Small
  • etc.

On Webflow’s CMS I’d just create the following collection pages:

  1. COLLECTIONS
    (e.g. Fall / Winter 2016; Spring / Summer 2016, etc.)
  2. PRODUCTS
    A collection of all the single products on sale.
    The Products collection would then contain a single reference field which I’d use to reference each single product back to a given Collection (e.g. Product XYZ from Fall / Winter 2016 Collection ).

Assuming the above is correct (or maybe it is not - if so please let me know), how should I go about adding the “Color” and “Sizes” fields to the Product collection?

I’m under the impression the best would be for me to create further two collections as follows:

  1. COLORS
  2. SIZES

Then I’d go back to my PRODUCTS COLLECTION and reference each product back to these two newly created collections using the following fields (i.e. on the single Product page within the Product Collection):

  • Color
    Type of field: Single Reference (assuming shoes XYZ would only have one main color)

  • Size
    Type of field: Multi-Reference (assuming shoes XYZ would come in 4 different sizes)

Is the above correct?

Thanks a lot in advance.

Best,
Omar

Webflow to Shopify Full Export
Webflow to Shopify Full Export
#2

Actually, I forgot one thing.

How about Product Images?

Shall I create a new collection of those and then on the Product collection single item reference back to it?

Thanks.

#3

You seem to be on the right track.

If your product variants are simple things like size then you can think about using the category field. This way you don’t have to create a new collection.

For your images you can create a image field in the products collection to upload product images.

#4

I appreciate your feedback Alex.

On using the “Category” field for sizes, what field within a Collection page are you exactly referring to? I can see “Plain Text, Rich Text, Image …, Switch, etc.” but no such “Category” field…

Also, how would you add ALL sizes (e.g. Small, Medium, etc.) within that “Category” field when creating single Product pages?

Thanks once again.

#5

Sorry the field is called “option”. You would create the field and name it sizes then input all the sizes you want available to choose for a product.

#6

Of course! Sorry for being so dumb! :wink:

Now we are left with one - very last - question answered: I did as you suggested and created a Size field using the Option field. I then went on adding four sizes to the list to select from.

As expected, when you then create a, say, single product page within that collection you can only choose ONE size at a time… while most of the time I’d obviously need to select all of them.

Thoughts?

#7

PS: apologies for keep bothering you but I’ve been thinking about this for days now

#8

Oh yes I see what you are saying.

If you have one product that comes in multiple sizes and want to display all available sizes on one product page then using a collection to create all of the sizes it your best bet.

In the products collection you would use a multi-reference field the connects the size collection to the products collection. The multi-reference field allows you to choose multiple sizes from the size collection.

On the product page you would use a dynamic list to display the sizes on the page. You would then use the filter settings to only show sizes that are connected to the product.

#9

Legend.

Thank a lot Alex!

1 Like
#10

Glad I could help.

PS. I moved this conversation to a new topic so other can find it more easily. :slightly_smiling:

#11

Well done Alex! Speak soon

#12