--- title: "Manually connect store page elements using the Designer Extension" description: "An exhaustive list of all the necessary elements your store pages need and how to manually connect them to CartGenie" url: https://help.cartgenie.com/en/articles/36-manually-connect-store-page-elements-using-the-designer-extension collection: "Migrate to CartGenie" updated: 2026-07-21 language: en --- # Manually connect store page elements using the Designer Extension An exhaustive list of all the necessary elements your store pages need and how to manually connect them to CartGenie ## 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. [ Creating your store pages in Webflow \*\*\* How to create your product, checkout, and confirmation store pages in Webflow and connect them to CartGenie ](https://help.cartgenie.com/en/articles/10-creating-your-store-pages-in-webflow.md) ## 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! > **Info:** 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_](https://help.cartgenie.com/en/articles/10-creating-your-store-pages-in-webflow.md)_). 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 ![](https://staticfiles.gleap.io/ghelparticle/MpVhdiggEBrBLyCWFyK9RvOONfyXTCDmSBZC43Wc1QScD63rnGawu2ZeAbjjJdkdp2Nh85R6zxP.png) 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. ![](https://staticfiles.gleap.io/ghelparticle/BvVsyb3Gwaxg59coruqSDfd3zUXOZfOqB3werTDso5nMzLN8v3fg3RNXKy1fIisrdhBr5ySCjeN.png) ## Required Fields to Connect In order for CartGenie to function properly, you must connect each of the following elements using the Designer Extension. [Comprehensive List of Required Fields](https://cdn.cartgenie.com/static/files/components.json) Definitions to note in this doc: - **Key** - Internal naming reference. Used for detailing parent / nesting requirements - **Page** - This is the page where this custom attribute must be placed on the relevant element - **Parent** - This is the parent element which this attribute must be **nested** inside of. - **Title** - Internal prettier name - **Attributes** - This is the **name** and **value** of the custom attribute that must be added in Webflow so CartGenie can recognize this element. - **Optional** - If optional is not listed, this custom attribute **must** be in the given Webflow page in order for CartGenie to function properly. - If optional = true, you may skip this custom attribute if you wish ## Examples of Required Fields This list may not be comprehensive and doesn’t detail nesting requirements. See link above for full required list. ### 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 ![](https://staticfiles.gleap.io/ghelparticle/OWjZobYMuPPhTK7w9nqDqHkSAtDFCcYla5izv5Mp0MR51ZVumM5ma0fW3F5hrP680tmo2zTF43D.png) ### Checkout Page Add the following elements to the checkout page and connect them to CartGenie **Contact** - Email - Phone ![](https://staticfiles.gleap.io/ghelparticle/hSA70fCtERDvksavEaAKwv1CcUFsfCEQ1o9dRa4Wce2VtYgNUxonUqLGOlDlo1HQvNHvXDAQhOJ.png) **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 ![](https://staticfiles.gleap.io/ghelparticle/r4Vl5YCZPDTILqu1bdZfoBTIR8oOwDlVEskIvsv3L15UBFOvsQR1KznMe9zCjODqLbDGdcPJFd6.png) **Shipping Verification** - Shipping address verification failed - Shipping address verification failed option radio ![](https://staticfiles.gleap.io/ghelparticle/XGgwBpijRqN5L2DkQjakiKJ3uTAd2ETO9L7YfTa93SCnPOwNk9T1ApTYXY9TkvzZWIjRkO5OEep.png) **Shipping Method** - Shipping method container - Shipping option radio - Shipping option description ![](https://staticfiles.gleap.io/ghelparticle/hzFu3jenEFUn65bc1JIbT4mAm1ktkuc5LaMOk14OBQpJruerRvVNJMDcqx8soJSm32ztGiPQsTJ.png) **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 ![](https://staticfiles.gleap.io/ghelparticle/mArpIN9EAlLot894zl1mtCc8iwfQQaUfB0rnIZF6H5am4KcMOrVEZYOZMoM3lCfI8varPsUMUZm.png) **Products** - Item section - Item image - Item title - Item Price - Item quantity - Item option name - Item option value - Item total ![](https://staticfiles.gleap.io/ghelparticle/u9AZZTm4v7yoQA4i1YWitjwnN2iyT2Z7VcO4kQYzRHVZ4ttSdExjbH2PxpZEMFCFkjXp5KwOXk7.png) **Discount Code** - Discount field - Apply Discount button ![](https://staticfiles.gleap.io/ghelparticle/U8XcLIqXXMzhJPwy7RUgXK2s8jcT9hPNWYxsU5JmOwEGw9lWs2bO4yWWYTlDluKz9OMz0NXfLTX.png) **Summary** - Subtotal - Taxes - Shipping total - Total - Place order - Paypal Button ![](https://staticfiles.gleap.io/ghelparticle/xSFEI6FULfNYM9lqcqasWqxlaxZp2ZqSvRioTgCesKzt3olu8XvZLOkyoo9EY30s8nH2NvU74P6.png) ### 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 ![](https://staticfiles.gleap.io/ghelparticle/5uDrnGKxtnxiReoVECVUb7rII75TEUiMw6d0SgmszffpVCjeTkSTyYegGLL2ydZwqzKtqY8gn0U.png) **Items** - Item section - Item image - Item title - Item option name - Item value - Item quantity - Item total ![](https://staticfiles.gleap.io/ghelparticle/TrbfmiJFrlLr8deHPfsDL6PzrSkPJ2o1GLcmTrqAqixOef2yIwacA7H3HWBO8OQWdinZPggDkaj.png) **Summary** - Order subtotal - Order taxes - Order shipping total - Order total ![](https://staticfiles.gleap.io/ghelparticle/J1IV55ejNVEns6EuMNnP8DZ3BwKX2yNwVf68qc8MSNjR6LM8sLCmoX1kJEw6L4ffmR9eE3qehZ4.png)