▼
Streaming live at 10am (PST)

Creating multiple product templates using different button sizes for options

Design help Ecommerce
#1

Hi
I’m in need of help with my first real Webflow site. I have multiple product templates and need different variations on the add to cart elements for each template. Is there a way to build (from scratch) option buttons? The presets baked into the drag and drop “add to cart” elements are making it really difficult to customizing different layouts.

Even though I’ve added different named classes to each element, when I make a change to one template it effects the others.

read only link:

images of templates

Screen Shot 2020-11-02 at 11.11.36 AM
Screen Shot 2020-11-02 at 11.11.36 AM1802×1119 260 KB

Screen Shot 2020-11-02 at 11.10.52 AM
Screen Shot 2020-11-02 at 11.10.52 AM1800×1122 367 KB

Site layout has only been designed for 1440 at this point

thank you in advanced for your help

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

I’m having this exact same problem, did you come up with a solution for this? Any advice gratefully received. Thanks

#3

Hi Edward

I don’t know if this is the right way of doing it, but it worked for my situation.

I created a custom field in the CMS for each layout

Then assigned in the CMS one layout for each product ***Forgot to add this visual below, but this is the correct order

Then made a layout/section for each one in the product template page

Then I made a Conditional Visibility on each layout section in the product template

Hope that makes sense. And again I don’t know if this is the right way of doing it or not.
Let me know if you have any other questions or if I can make it clearer on what I did

#4

created a custom field in the CMS for each layout

Screen Shot 2021-01-17 at 4.14.00 PM
Screen Shot 2021-01-17 at 4.14.00 PM629×544 22 KB

#5

Then made a layout/section for each one in the product template page
Screen Shot 2021-01-17 at 4.15.09 PM

#6

Then I made a Conditional Visibility on each layout section in the product template
Screen Shot 2021-01-17 at 4.15.43 PM

#7

Sorry forgot to add this step. This is adding a layout to each product in the CMS. This should have been the screen grab for step number 2

Screen Shot 2021-01-17 at 4.31.38 PM
Screen Shot 2021-01-17 at 4.31.38 PM1282×823 81.9 KB

#8

See response. Good luck

#9

Thank you so much @JacobT - this is extremely helpful. Appreciate the comprehensive reply.

1 Like
#10

My Pleasure, hope it helps