What elements should be set to display:none in Webflow?

There are several elements on each page that our template will have set to display:none so they don’t display by default. Then, if needed, CartGenie’s script can display these elements.

You can set these to display:block in order to see them and style as you wish. But in order for CartGenie to work properly, these elements must be set to display:none when your site is published:

Note: All of these elements use custom attributes in order for CartGenie to identify them and change their display settings. You can edit the style names as desired without affecting any functionality (with 1 or 2 noted exceptions).

Product Page

form_select-list

This is the hidden drop down list of option values for each option set.

cg-add-to-cart-error

This is the hidden error text that displays below the add to cart buttons if there is an issue.

Note: This block does not have a custom attribute so please do not change the class names.

Cart Modal / Sidebar

cg-cart-wrapper

This is the div that wraps around the entire cart component. By default, it will be set to display:none. If you want to style it, you can add the “is-visible” class to it to make it visible. Be sure to remove this class before publishing.

No items found

This is the hidden text that displays if a customer opens the cart when no items are added to it.

Checkout is set up

This hidden text notifies customers that checkout is not fully enabled on the site (such as no payment gateways are added yet) so they cannot checkout.

Checkout Page

cg-third cg-checkout-shipping-state

This hidden block is used as a text input for any shipping countries that we do not yet have a dropdown list of states/ provinces. If the US is chosen for instance, the states will be shown in the dropdown. If China is chosen, then the text input will be shown so that the customer can enter in their province manually.

cg-no-shipping-method

This hidden text is used if the customer selects a country + state or zip that does not have a shipping zone set up in CartGenie

cg-third cg-checkout-billing-state

This hidden block is used as a text input for any billing countries that we do not yet have a dropdown list of states/ provinces.

Confirmation Page

There should not be any hidden CartGenie elements on the confirmation page.

Notable elements that should be VISIBLE

All blocks not listed above should be visible. But we wanted to note these elements in particular as they are often hidden by users. These elements may seem like they should be hidden but should be visible when published.

cg-address-warning

The address verification block should be visible when the site is published. We will then hide it unless a customer needs to verify their address.

cg-success

cg-error

These two error messages should be visible when published. They will be hidden unless necessary.

checkout error

This error message below the checkout button should be visible when you publish your site. Inside of this block is text with cg-error class which should always be visible as well.