Manually connect store page elements using the Designer Extension

The Easy Way:

Our Designer Extension makes it super easy to create store pages by instantly pasting in one of our page templates. We highly recommend using this easier method and then styling the blocks to match your brand.

Connect Existing Elements (Advanced)

This method is very advanced and requires tedious work. We recommend using the easier method above.

If you have an existing store with product, checkout, & confirmation pages that you want to convert to CartGenie, you can use our Webflow Designer Extension to manually connect elements from your site to our app!

Note: Webflow doesn’t allow editing of certain Ecommerce blocks. You can edit some, but will have to recreate most.

This help doc is not about connecting a page template block to the CMS custom field to dynamically populate the text or image (see how to do that here). This is about ensuring that page components are able to be manipulated and information is able to be sent to CartGenie’s app.

In Webflow, open the App tab in the left-hand menu and launch the CartGenie app.

Click on the “Connect Existing Elements” option

While editing your product, checkout & confirmation pages, you can no select an element (such as the item title or the shipping address city input field) and connect it to CartGenie so we can pull that information upon checkout.

Once you click on the desired element, find the corresponding item in the dropdown box. You can also search here if needed. Then click the save button.

This process will add a Custom Attribute to the item, which you can view in the Settings tab.

Required Fields to Connect

In order for CartGenie to function properly, you must connect each of the following elements using the Designer Extension.

Product Page

Add the following elements to the product page and connect them to CartGenie

• Product Price

• Old Price

• Quantity

• Add to Cart button

• Checkout button

Checkout Page

Add the following elements to the checkout page and connect them to CartGenie

Contact

• Email

• Phone

Shipping

• Shipping section

  • Shipping address section

    • Shipping Fullname

    • Shipping address line1

    • Shipping address line2

    • Shipping address city

    • Shipping address country

    • Shipping address state

    • Shipping address zip

Shipping Verification

• Shipping address verification failed

  • Shipping address verification failed option radio

Shipping Method

• Shipping method container

  • Shipping option radio

  • Shipping option description

Billing

• Card number input field

• Card date input field

• Card CVV code input field

• Billing same as shipping checkbox

• Billing Fullname

• Billing address line 1

• Billing address line 2

• Billing address city

• Billing address country

• Billing address state

• Billing address zip

Products

• Item section

  • Item image

  • Item title

  • Item Price

  • Item quantity

  • Item option name

  • Item option value

  • Item total

Discount Code

• Discount field

• Apply Discount button

Summary

• Subtotal

• Taxes

• Shipping total

• Total

• Place order

• Paypal Button

Confirmation Page

Add the following elements to the confirmation page and connect them to CartGenie

Info

• Thank you message

• Email

• Customer Phone

• Shipping address

• Billing address

• Shipping method

• Payment method

Items

• Item section

• Item image

• Item title

• Item option name

• Item value

• Item quantity

• Item total

Summary

• Order subtotal

• Order taxes

• Order shipping total

• Order total