Add to Cart

The "Add to Cart" element is a fundamental component of any e-commerce website. It serves as the primary mechanism for customers to initiate the purchase process, allowing them to accumulate selected products in a virtual shopping cart before proceeding to checkout.

Essentially, it's a user interface element (typically a form) that, when activated, triggers the addition of a specific product (and often a specified quantity) to the customer's shopping cart. This seemingly simple action is crucial for a smooth and efficient online shopping experience.

This document will delve into the various aspects of implementing and designing effective "Add to Cart" elements when using Smootify.

Before deep diving in all the different Custom Elements and Custom Attributes you can use, let's first understand a key concept, "Variants".

In the world of e-commerce, offering product variations is essential for catering to diverse customer preferences. Shopify's "product variants" feature allows you to sell different versions of a single product, such as different sizes, colors, materials, or styles, all from a single product page or listing. The add to cart is fundamental for this feature, since is the only part of your site where customer can choose which variant to add to their cart.

What are Shopify Product Variants?

Product variants are different versions of a single product that share the same core attributes but differ in specific characteristics. These characteristics are defined by "variant options," which are attributes like size, color, material, etc.

Example:

A t-shirt might have the following variant options:

• Size: Small, Medium, Large, Extra Large
• Color: Red, Blue, Green

Each combination of these options (e.g., Small Red, Medium Blue, Large Green) constitutes a unique product variant that can have a different price and inventory.

Shopify allows you to create up to 3 option sets and based on your store up to 100 or 2k variants.

Why variants are not imported inside Webflow CMS?

Seen the large amount of variants you can create in Shopify, the limitations that Nested Collections List do have in Webflow (max 10 items showned), and the low limit of CMS items you are allowed to create on Webflow CMS (max 20k on the highest priced site plan - before enterprise), we've decided to avoid syncing variants with the CMS. Everything related to Product Variants is JS rendered with attributes, so keep it in mind while you design. You will see the result only on the published site and not in the preview of Webflow. (Webflow Canvas allows only custom css code, js code is stripped out for security reasons)

Smootify Add to Cart

The Smootify Add to Cart is a powerfull Custom Element that will allow your customer to easily select variants, customize products and add them to the cart. All without losing the design freedom you require.

Generally speaking, the Smootify Add to Cart is a Custom Element that wraps the native Webflow Form. This allows a lot of benefits:

1. Standard HTML: Forms are a standard HTML element, ensuring broad compatibility across browsers and devices.
2. Accessibility: Forms are inherently accessible to users with disabilities, particularly when used with proper labels and ARIA attributes.
3. Input Validation: Forms allow you to implement client-side validation to ensure that the data entered by the user is correct and complete. For example, if you add a custom property to your add to cart to gather additional informations (like an Engraving text), you can ensure that the form doesn't get submitted without that field being properly validated. All natively by the browser.
4. Inside Webflow form you can add all kind of inputs you wish, without having to struggle with custom embeds.
5. Webflow forms already have error messages that can be used to inform the customers about the errors that could happen - E.g your user added already all in stock products to the cart and tries to add more.

If you want to kickstart your project without having to customize everything on your own just copy our element

Add to Cart

Create the perfect purchase flow, Variant selectors, swatches and quantity input included

Copy Element

Our element includes everything you need to start, variant selectors are already defined with both swatches and dropdowns (swatches for first option set and dropdown for the other 2 sets), a quantity input, a buy button and a direct checkout button. You will just have to paste the component inside the Product Custom Element and you are good to go.

All parts of the Add to Cart

Below, you'll find a comprehensive breakdown of the various components that typically comprise an "Add to Cart" form. Each element plays a crucial role in capturing and transmitting the necessary data to facilitate the purchase process. We'll explore the purpose and functionality of each part, from input fields for product selection and quantity to additional fields that you can use to gather user informations. This detailed examination will provide a clear understanding of how these elements work together to create a robust and efficient "Add to Cart" experience.

Buy Button

For a perfect UX, Form accessibility and design freedom, instead of using native Webflow submit inputs (that you can use the same if you wish).

The Buy Button is instead a Custom Element with tag button (a real button basically) that has the custom attribute:

type

submit

This basically just informs the browser that a click on that element will submit the form, and that's exactly the perfect purpose for it!

Why a custom element and not the native submit input?

Legit question! And the reason is pretty simple, we wanted to allow an higher design freedom, a submit input allows you only to change the value of it (that is rendered as the text), so to add a loading state or even an icon you have to use custom css, paddings and background images. A <button> element, instead, allows you to add inside it different other elements, like icons and texts, this is a lot easier to style without touching up the code and doesn't influence at all the accessibility of the form!

Buy button

Button that allows you to add the product to the cart

Copy Element

Element Structure

The element you can copy from this section is a Custom Element with tag button and inside 2 different Div Blocks

1. The 1st Div Block has the custom attribute

data-state

default

and inside has an icon and a text, this is the Div Block that you will see inside the designer

2. The 2nd Div Block has the custom attribute

data-state

loading

the class is-hidden (it doesn't show in the designer) and inside it has an icon and a text. This Div Block will be visible to customers when they press the Buy Button

Combo Classes

Dynamically Smootify scripts automatically disable the Buy Button by adding the is-disabled class when the selected variant is unavailable. Design your button styles accordingly to provide the UX you desire.

Buy Now Button

The Buy Now Button is the same exact component as the Buy Button with 1 only difference.

There is an additional custom attribute applied:

name

buy-now

By clicking this button the customer will be redirected to the Checkout.

Buy Now button

Button that allows you to directly checkout the selected variant

Copy Element

Quantity Input

The quantity input component is an user interface element designed to facilitate the selection of numerical values. It provides a structured way for users to increment, decrement, or directly input a desired quantity. This component includes interactive elements like increment and decrement buttons, as well as a numerical input field, to enhance user experience.

Quantity Input

Allow your customers to select how many items to purchase

Copy Element

Element Structure

The element you can copy from this section is a Custom Element with tag ``quantity-input` and inside 3 different elements:

1. A Custom Element with tag button and Custom Attribute:

data-action

minus

This button is the Decrement button

2. An Inputelement of type number.

3. A Custom Element with tag button and Custom Attribute:

data-action

plus

This button is the Increment button

Combo Classes

Dynamically Smootify scripts automatically disable both button elements by adding the is-disabled class when the selected quantity is either the min or the max purchasable quantity

Variants Selectors

We recommend designing your product pages to support all three possible option sets. Don't worry if some products don't use them all; our system will automatically clean up the display, ensuring a clean and relevant experience for your customers.

For each option set, you can choose from three display styles: selects, dropdown menus, or swatches. Feel free to mix and match these styles as needed by your design!

All display style elements do have 1 thing in common, the Custom Attribute:

data-option

index of the option set

Where the available indexes are 1, 2 and 3.

This attribute allows Smootify to correctly render the data of the corresponding option set inside the element you designed.

Variant Select

The "variant select" is the most common and usual interface element that allows your customer to choose different values of an option set.

Is basically a form select where dynamically the options will be rendered based on the values you have in Shopify for that specific option set.

Variant Select

A variant selector displayed as a select

Copy Element

Element Structure

The component is very simple and it's a Custom Element with tag variant-selector and inside:

1. A label element which text will be dynamically replaced by the Name of the corresponding option

2. A select element with dynamically rendered options

Do not forget to change the CustomAttribute

data-option

1

that you find in the copied component, with the index you require. Where the possible indexes you can use are 1, 2 and 3.

Variant Dropdown

The "variant select" is the most common and usual interface element that allows your customer to choose different values of an option set.

Is basically a form select where dynamically the options will be rendered based on the values you have in Shopify for that specific option set.

Variant Dropdown

A variant selector displayed as a dropdown menu

Copy Element

Element Structure

The component is very simple and it's a Custom Element with tag variant-dropdown and inside:

1. A label element which text will be dynamically replaced by the Name of the corresponding option

2. A Dropdown element with dynamically rendered options

Do not forget to change the CustomAttribute

data-option

1

that you find in the copied component, with the index you require. Where the possible indexes you can use are 1, 2 and 3.

Variant Swatches

"Variant swatches" are a visual enhancement used in e-commerce to improve the way customers select product variations. Instead of traditional dropdown menus, variant swatches display options as clickable visual elements.

They provide a more intuitive and visually appealing way to display product options like colors, patterns, or materials.

This is especially helpful for products where visual differences are crucial.

This can lead to a more engaging and efficient shopping experience.

Variant Swatches

A variant selector displayed as swatches button

Copy Element

Element Structure

The component is a Custom Element with tag variant-swatches and inside:

1. A label element which text will be dynamically replaced by the Name of the corresponding option

2. 3 button Custom element placeholders with 3 different classes applied, in this way directly in the designer you can easily style the 3 accepted states that a button can have

In particular there are 2 combo classes that are dynamically applied:

1. is-active when the button has been pressed or is automatically selected;
2. is-disabled when the button is associated to a value that cannot be selected, this happens when for example you have 2 or more option sets and the combinations are not fully exhaustive. E.g: you sell a t-shirt that has Sizes (SM, M, L) and Colors (Blue and Red) but the combination M / Red doesn't exists.

Do not forget to change the CustomAttribute

data-option

1

that you find in the copied component, with the index you require. Where the possible indexes you can use are 1, 2 and 3.

Variant swatches provide extensive styling flexibility. By utilizing Shopify's native swatch functionality or Option Metaobjects, you can dynamically modify the button element to reflect product variations.

To further style up the button you can use several attributes, remember to add them to the first button you find in the component you can copy in this section. The first button is the one that will act as template and dynamically duplicated, the other 2 are just for styling the combo-classes!

- Shopify Swatches

Shopify has announced native Swatches during “Winter 2024 Editions”. Some category of products do support automatically color/image swatches, so if your products do fall in between these categories you can use native swatches that Shopify do create automatically for them.

Let's breakdown the possible attributes for native Shopify Swatches:

Title

You can dynamically change any text element of your button by adding the attribute:

option

title

Image

You can dynamically change any img/div element (as background) by adding the attribute:

option

image

Color

You can dynamically change any text element color by adding the attribute:

option

color

Background Color

You can dynamically change any element background color by adding the attribute:

option

bg-color

- Options Metaobjects

Options Metaobjects are instead a feature provided by Smootify that allows to style button swatches with unlimited fields!

First of all you need to create 2 definitions in your Shopify panel, so follow up these simple steps:

Let's breakdown the possible attributes for Option Metaobjects:

Title

You can dynamically change any text element of your button by adding the attribute:

option

title

Description

You can dynamically change any text element of your button by adding the attribute:

option

description

Image

You can dynamically change any img/div element (as background) by adding the attribute:

option

image

Color

You can dynamically change any text element color by adding the attribute:

option

color

Background Color

You can dynamically change any element background color by adding the attribute:

option

bg-color

Additional Fields

You can dynamically change any element based on the type of the additional field you created by using the attribute:

option-metafield

key_of_your_metafield

For example if you created an additional field with name Discount Percentage

You have to use the attribute

option-metafield

discount_percentage

Subscription Swatches

Shopify Headless stores do support Subscription products, that you can create with any app you do prefer, we do suggest using the native Shopify Subscription App that is free of charge and integrates greatly with the Shopify Customer Dashboard!

Shopify Subscriptions are created in this way, you create Subscription Groups that are simply titles (E.g: premium plan, elite plan, etc), and inside each Subscription Group you create different Delivery Options like (every 1 year, every 1 week, etc). For each Subscription Group you can also offer a discount

To allow your customers to select if they wish to buy the product once or with a subscription you can use our component:

Subscription Swatches

Allows switching the purchase option from single to subscription

Copy Element

The element will show only for products that can be sold in subscriptions so you can add it freely in the product template add to cart without worrying about it

Element Structure

The element you can copy in this section is a Custom Element with tag subscription-swatches and inside just Tabs

The Tabs will come with 2 Tab Links

1. The 1st Tab Link that allows your customer to unselect a subscription group (One time purchase), it has and hidden Tab Pane and will be automatically deleted if you've set your product has purchasable only as a subscription

2. The 2nd Tab Link is a template for the subscription groups you created in Shopify and will be replicated once for each subscription group associated to the product, this Tab Link is associated with a Tab Pane that inside has a radio button field, the radio button field will allow your customer to select which Delivery Option they do prefer

When you click on any of the Tab Link the first Delivery Option that is associated with that Group will be automatically pre-selected. So if you know that for example all the subscription groups do have only one delivery option, you can even set the Tab Pane as hidden

Preselect Subscription Delivery Option

In some cases like in SAAS stores you could have a situation where you need to auto select the Subscription Group and the Delivery Option.

For example this happens in Pricing Pages where you sell same product with different tiers (like monthly and yearly).

You can just preselect the correct delivery option by adding 2 custom attributes on the Subscription Swatches dom element

data-selected-group

Subscription Group Title

data-selected-option-index

index

For example if you want to select the 2nd delivery Option inside the subscription group called "Premium" you have to use the attributes

data-selected-group

Premium

data-selected-option-index

1

Add to Cart Properties

Shopify platform allows you to add custom fields to your Add to Cart element to gather extra details from your customers, those are usually called as Properties, and you will see them in the order overview in the backend. This is really usefull when you need to sell products that are customizable like for example a Jewel that requires an Engraving text, etc.

To collect these custom informations, you have just to add any kind of field you wish in the Add to Cart, at the end is just a Form, so any native input of Webflow will be automatically accepted as Property by Shopify.

You can influence the visibility of the Property on both the cart and on the checkout by adding an underscore _ as prefix of your Input Name. Properties that have an underscore as prefix are known as Hidden Properties and are visible only from the backend.