Creating a CartGenie store using Webflow's AI site builder

Webflow’s new AI site builder is a great way to jumpstart your CartGenie store. You’ll get a site that is customized to you and primed for CartGenie integration. For this example, I’m going to be creating an athletic store with some workout equipment.

Note: We haven’t refined or done much editing on the site. We just put this together as a preview of what is possible with very minimal effort.

Place a test order by entering “4242 4242 4242 4242” as the credit card number, an expiration date in the future, and any 3 digit CVV

Using Webflow’s AI Site Builder

To get started, go to your Webflow dashboard and create a new site.

Select the “AI Site Builder” from the site options.

Write out a short description of what you want the site to be. You can describe your preferred style, your industry, your products, etc.

Tip: Be sure to use words like “Ecommerce” so the AI knows to create a site that feels like an online store (don’t worry - the site created will still be a CMS site)

Next, choose your overall styles here preferences such as general theme, light vs. dark backgrounds, brand voice & tone, and primary colors.

Now you get to refine the site much further!

On the left, you can choose typographical styles, colors, section styling, imagery, and buttons.

On the right, you can go through the generated site and modify the chosen layouts. Click the left and right arrows (top right of each section) to scroll through various style and content options the AI has generated for that specific section. You can also click the swatch icon to choose color themes for that section.

Do this for each section on the site (you can always add more sections later if needed)

Once done, click “Start Building” and you’ll be transported to your Webflow designer!

Here you can customize the design just like you would any other Webflow site. You can also add new AI generated sections by clicking the little AI icon that appears when you hover between two sections.

Adding CartGenie to Your AI Site

Once your site is created, it is now time to integrate it with CartGenie! Login or create an account to get started.

The first step is to connect to Webflow. Be sure to select the new AI site you just created.

Once you create your account and connect it to your new site, you’ll land on our interactive Setup Guide.

Be sure to complete each step.
Here are a few specific tips for a couple steps:

Setup Guide Step 1

Use CartGenie’s automatic CMS collection creator to quickly create your product collections.

Setup Guide Step 4

Use CartGenie’s designer extension to instantly generate a checkout & confirmation page.

Once created, be sure to copy your AI template’s navigation and footer into the checkout, confirmation, and product pages.

Setup Guide Step 5

Use Webflow’s AI builder to add a product feature to your homepage / shop page.

While Webflow doesn’t have a CMS collection feed block for some reason, they do have this “Content Feed” which can generate columns of similar formatted items.

Here I used it to create this layout:

Once in the site, I then added a “Collection List” block to the site and connected that to my “Products” collection.

I copied an individual cell of the layout above and pasted it into my collection list item. I then connected each of the elements (image, title, and price) to those fields in my products collection.

You can do this by clicking on each item, clicking the gear icon, then clicking the purple dot and connecting to the relevant field.

Styling Your Pages

You can also style your product, checkout, and confirmation pages to match the rest of your site. The AI builder adds “Variables” such as colors, fonts, sizes, etc. that can be used to quickly modify CartGenie’s templates.

Setup Guide Step 9

Be sure to upload your logo and modify your email colors to match your AI site design

Done!

Once you’ve completed all of the Setup Guide, your site is ready to start selling!

I published the site I made for this tutorial so you can take a look below. Try adding an item to the cart and even placing an order!

Place a test order by entering “4242 4242 4242 4242” as the credit card number, an expiration date in the future, and any 3 digit CVV

Use your real email address to see your order confirmation email! (You don’t need to use your real shipping address)

Note: We haven’t refined or done much editing on the site. We just put this together as a preview of what is possible with very minimal effort.