Docs
Free ON WEBFLOW.IO DOMAINS

Cart Module Overview

Take an in-depth look at the Cart module. Cart module is a block of cart components that provide complete Shopify cart functionality to be used globally on your Webflow site.

Cart module is a block of cart components that provide complete cart functionality to be used globally on your store. Cart module is a required component in every Shopyflow page that allows your users to add a product to cart.

Even though it is present both in Shopyflow Starter theme and the Shopyflow Relume Starter theme as a component in every page, you can also insert it into your store using the Shopyflow Webflow App.

Adding a Cart Module to the page

When you are building a page with Shopyflow that allows customers to add a product to cart you are always going to need a Cart Module in the page for the user to see that the product is added to Cart. Before introducing our Buy Module to the product page template let's add a Cart popup to the page.

To add the Cart Module open the Shopyflow App in Webflow and follow the below steps:

  1. Navigate to CMS Product page template in the Pages panel
  2. Open the Shopyflow Webflow App in the apps section
  3. Go to Store Builder section
  4. Click Add New button in the app
  5. Select Cart Module from the list
  6. In the opening screen select with popup option and click Copy element button
  7. Paste the Cart Module anywhere in the page

Don't set the display property of the Cart Popup element to none.

If you change the display property to none for the Cart Popup, the cart opening transitions are not going to work. Instead, when you edit the Cart Module go ahead and add the sf-cart-opened class to the --Cart Popup element to make it visible and remove the same class to hide it.

Managing the Cart Popup visibility

Once you pasted the Cart Module, it is placed in a fixed positioned popup. The cart popup element becomes visible with a class called sf-cart-opened, after a new element is successfully added to the cart. To hide the cart popup initially on the page load:

  1. Open the Navigator Panel
  2. Make sure you select the --Cart Popup element which is the outermost element of the Cart Module.
  3. Remove the class sf-cart-opened class from the element.

Cart module structure

Cart Module is wrapped in the --Cart Container component. --Cart Container is a Div Block that is assigned the sf-cart attribute and it is the outer wrapper element of the Cart Module.

Inside of the --Cart Container you are given the following main parts

  1. Cart Container (Module wrapping element)
  2. Cart Items List
  3. Discount Code Block
  4. Cart Note Input
  5. Cart Summary

Cart Module components

When you introduce a Cart Module to your page, you are going to find the following components in it.

Cart Container

Cart Container element contains the cart module components. It is the outermost element of the Cart Module.

Learn more →

Cart Items List

It features the list of the products that are added to cart by the user. Each product in the list is displayed using the --Cart Item component as a template.

Learn more →

Cart Summary

Cart summary is the block of components that displays the cart total, subtotal, applied discounts and coupons and the checkout button.

  • Cart Total
  • Cart Subtotal
  • List of applied order discounts
  • List of applied discount coupon codes
  • Checkout button

Learn more →

Discount Code Block

Discount code block contains the discount code input and the list of applied discount codes.

Learn more →  

Cart Empty Message

Cart Empty Message is a Div Block that becomes visible when there are no products in the cart, and hidden when a product is added.

Learn more →

No items found.
No items found.
No items found.