CartGenie’s Designer Extension gives you access to CartGenie page templates and components directly inside your Webflow designer!
Here is a rundown of each section of the app.
You can find the CartGenie app inside your Webflow projects. Go to a site that is connected to CartGenie and click on the “App” icon in the left hand menu in Webflow.
Then, find the CartGenie app and click Launch.
Easily create your store’s e-commerce pages using our premade templates and components
This section allows you to instantly generate a CartGenie checkout and confirmation page on your site which will contain our default template.
You can set your preferred page and slug for these (useful for stores in other languages).
Once your store pages are created, you can paste in the template (if you didn’t use the instant generation above). You’ll create your products CMS collection page inside of CartGenie:
Creating the CartGenie CMS collections in Webflow
How to create, set up, and connect the CMS collections necessary for your store
The page templates contain all the necessary elements for a page to function in CartGenie – including all the necessary custom attributes. We highly recommend starting with our page templates and then modifying the style of them to match your site.
The Designer Extension has templates for:
Checkout Page
Confirmation Page
Product Page
Click on a block to copy it to the clipboard and paste it into your Webflow page.
Components are individual parts of the page templates that can be inserted individually. It also includes elements like the cart modal and button which are not part of the page templates and should be inserted into every site.
Components are also super useful if you need to swap out a part of your existing page template with a newly updated block (such as our image+gallery option).
The components available in CartGenie currently are:
Cart
Cart Button: Shows current cart count and opens the cart
Cart Modal: Cart as a modal popup
Cart Side Left: Cart as a left-hand sidebar
Cart Side Right: Cart as a right-hand sidebar
Product
Wrapper: Necessary to be the container for all product blocks. Paste the remainder of the blocks inside of this wrapper on your product template page
Image: Single main image
Image + Gallery: Main image + a gallery of thumbnails for a product’s extra images. Opens in a light box
Product Title
Price
Compare Price
Description: Rich text block
Product Option Dropdowns: The dropdowns which contain the variant options for each product
Personalization Field (optional): Used to personalize products
Quantity (optional)
Add to Cart Button
Checkout Button: Goes directly to checkout without opening cart
Checkout
Wrapper: Necessary to be the container for all checkout page blocks. Paste the remainder of the blocks inside of this wrapper on your checkout page
Contact Info Form: Email and phone
Shipping Address Form
Shipping Method Form
Payment Form: Contains all payment method tabs and the necessary fields inside of each
Cart Item List: Lists items customer has added to cart
Discount Code Form
Order Summary
Order Button
Confirmation
Wrapper: Necessary to be the container for all confirmation page blocks. Paste the remainder of the blocks inside of this wrapper on your confirmation page
Contact Info: Displays email and phone entered at checkout
Shipping Address: Displays shipping address entered at checkout
Shipping Method
Billing Address
Payment Method
Purchased Item List: Displays all items that were included in the order
Order Summary
