Creating a cloneable CartGenie template

Thanks for building with CartGenie! We’re happy to have you on board as we work to grow the future of e-commerce on Webflow.

Need help or noticed a bug? Don’t hesitate to reach out anytime to us at [email protected] —we’re here for you.

Happy building! 🧞‍♂

📖 General Help Docs

We’ve built out a library of guides to help your customers use CartGenie. These guides might also help you better understand the system and inform your design & development process.

Step 1 - Create a Blank Webflow CMS site or Use an Existing CMS Site

To start, you’ll need to create a blank CMS site to use as your template. Once done, you can move on to step 2 and creating a CartGenie account!

Using an existing Site

Before starting, we recommend duplicating your existing site instead of working off your original. We’ll need to add several new CMS collections and pages to the site so it is better to have a dedicated site for CartGenie.

We recommend using a Webflow CMS site.

Using a Webflow Ecommerce site is possible, but a little complicated currently due to Webflow preventing you from changing product collection and page slugs, etc. Webflow also doesn’t allow you to modify certain cart blocks and checkout elements on store pages. So, in order to offer a clean URL structure (such as /products/item) and in order to more easily add the necessary elements to your site, a CMS site is easier.

However, if you would prefer to modify an Ecommerce site, it is possible but there are extra steps to consider. Therefore, we recommend moving your design to a CMS site if at all possible. Webflow does plan on releasing these blocks in the future, which will make this process easier.

Step 2 - Create a CartGenie Account

Next, you’ll need to create your own CartGenie account. This will be used to add products, categories, custom fields, etc. This will also allow you to insert our product page, checkout page, and confirmation page templates which includes all the necessary elements for CartGenie’s app to function.

Connect your new cloned template site and fill in your personal information.

Step 3 - Complete Setup Guide

Go through the setup guide to complete your store and enable checkout. This will help familiarize you with the platform as well in case a customer has any questions./

Note: These app settings will not transfer to your customers’ cloned sites and are specific to your site only. Therefore, the only required steps are step 1, 3, & 4. Step 8 is required only if you enable shipping on a product.

Adding New Products

You can create your own products for your template in CartGenie’s products tab.

All products for your store should be created in CartGenie, which will then sync them to your CMS collections.

Or, we’ve created a few placeholder products that you can import into your CartGenie account to make setup even easier.

Adding New Custom Fields

If you want to add any additional custom fields to your products or categories, be sure to do so from within CartGenie Product Settings (or Category Settings).

Any custom fields added in Webflow directly may not be synced.

Step 4 - Style Your Template!

Now to the fun part! Feel free to design out all the pages you want to add to your template –homepage, shop (all products grid), category pages, contact pages, etc.

Be sure not to erase any custom fields in the CartGenie CMS collections or delete any elements on the product, checkout, or confirmation pages. Doing so may result in the app not functioning properly.

We recommend keeping the “How to use this template” page (feel free to rebrand it) we included for your customers so that they will understand that they must create a CartGenie account and complete the setup steps before being able to go live.

You can also send them this Template Setup Guide that details the extra steps templates must follow when setting up a CartGenie site.

Step 5 - Start Distributing Your Template

Once your template is looking nice and pretty, you’re ready to start selling it or giving it away for free to Webflow customers!

Please send us a link to your template and we’ll promote it on our website and social media.

Thanks for being a part of the future of e-commerce on Webflow!