CartGenie makes adding and editing a cart super easy! Follow this guide below to add a cart to your new store.
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!
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:
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)
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 it).
Now, anytime someone adds an item to cart, they will see the exact same cart modal every time.
If you forget to add the cart to your site or to a specific page, CartGenie will use our default cart to ensure your customers are never left without a cart.
By default, the cart will be set to display:none as you don’t want it visible to your customers when they load your site.
If you want to preview the site in your Webflow designer in order to style it, simply select the cart layer and then in the layer style panel, select “Block” as the display method.
You should now see your cart in your designer.
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.
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.
