April 2, 2020
Customizing the add-to-cart button states — Webflow Ecommerce tutorial

Customizing the add-to-cart button states — Webflow Ecommerce tutorial


We’re going to go over three different states
for the add-to-cart button. And although it might, at first, seem counterintuitive,
we have four different circles on the screen right now. Three for states. One for how we access them. Let’s access them. We’ll click inside our add-to-cart button. And we want to make sure the add-to-cart button
itself is selected (which we can do from our lower navigation). And our controls (all our options for states)
can be found in our element settings. That’s how to selec– STOP. Go back. There’s a keyboard shortcut for these. With any element in the add-to-cart button
selected, we can make sure to select a state (any state). In this case, it’s the Default state. And to navigate through the different states? Left and right keys. Why is this happening? Well, if we look in the Navigator, we can
see that the different states are siblings. Left and right keys let us move around in
terms of the currently-selected element. (They let us alternate between sibling elements.) And up and down? This is selecting parent or child elements. Let’s move on to each of the states. Default state. The default add-to-cart button state is what
you see in a basic add-to-cart button when you drag it in. (It’s the button itself and the quantity
field.) And if you have variants of a product? The variant selection dropdown will appear
here, too. Okay. Out-of-stock state. This is, of course, as you might imagine based
on the name, what people see when the item runs out of stock. What can we do here? We can double-click to edit the message. We can make it say whatever. We can also style this in any way we want. And that leaves us with an error state. This one, indeed, is really flexible: it’s
what shows up (it meaning the error state, or, rather, the content that’s shown during
the error state) when there’s some kind of error regarding adding a product to cart.
…is a terrible sentence that lacks both clarity and any semblance of stuff that makes
a good sentence. A better way to say this is the error state
is what shows up when something goes wrong. There are different kinds of errors. If you double click the error message? This will bring up the error message settings. Just select each message to view it on the
canvas. Once it’s pulled up (once you’ve pulled
up an error message), you can edit the text. And when you’re done, save. And yes, you can restore the default message
at any time. And that’s it! You can access and customize any of these
three states from the element settings…on any add-to-cart button.

4 thoughts on “Customizing the add-to-cart button states — Webflow Ecommerce tutorial

Leave a Reply

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