CartGenie makes adding and editing a cart super easy! Follow this guide below to add a cart to your new store.
Default CartGenie Cart
If you’ve installed CartGenie, we automatically add a cart to your site to ensure your customers are never left without a way to add items. This cart is not editable in Webflow, but it is fully functioning otherwise.
If you like this cart and don’t want to spend the time adding and styling a cart yourself, then you are good to go and can skip the rest of this tutorial!
Adding a Custom Cart Component
If you want to customize the way your cart looks or change the layout, you can do so using our Designer Extension components.
In Webflow’s designer, open the apps tab in the left menu and open the “CartGenie” app.
Then, select “Create Product Pages” and open the “Components” accordion and “Cart Pages” section.
Here you’ll see 3 options for your cart layout:
Option 1: Modal
Option 2: Sidebar Left
Option 3: Sidebar Right
Click on the option you want to copy it to your clipboard. Then paste into your site using Ctrl-V (Cmd-V on Mac).
(The “Cart Button” is a cart item counter and trigger to open the cart and can be added to your navigation and/or footer as well)
Where should you place the Cart component?
We highly recommend adding the cart to a Webflow component that is present on all pages of your site.
Such as the navigation bar or the footer, etc.
If you’ve used the same navigation component across your entire site, then the cart will be added to all pages it is on as well.
Here we’re editing our navigation component and added the cart modal as a layer right below our actual nav (not inside of the nav container).
Now, anytime someone adds an item to cart, they will see the exact same cart modal every time.
Previewing & Editing Your Cart
By default, the cart will be visible when you paste it in. This is because we’ve added a custom “is-visible” class to the cart wrapper.
To hide the cart, simply remove the “is-visible” class from the cart wrapper.
This will still allow the cart to be opened/closed by customers on your site, but prevent it from always being visible in your designer.
If you go back into your Webflow designer and want to make additional changes, you can select the cg-cart-wrapper in your layers panel (as it will be invisible in the design view). Then simply add back the “is-visible” class to view it and make any design changes.
Now that you’ve added a cart to your store, you can start to style it to match your design!
Select each layer and add your preferred fonts, font colors, background colors, etc.
To edit the height of the mobile cart, simply select the cart-container, go to the mobile view, and set the “height” and “max-height” attributes to your preferred values.
Cart Button
The last step (if you haven’t done so already) is to add the Cart Button to your navigation and/or footer using the Designer Extension.
The Cart Button acts as an item counter to tell the customer how many items are currently in their cart. And, it also works as a cart trigger to open the cart when clicked.
Here you can see it added to a site’s navigation bar.
