# How to promote products on my website? You can now add product boxes to your website to provide quick access and encourage more engagement from your visitors. Before you begin: * connect your ecommerce platform to GetResponse. You can use one of our [plugins](https://www.getresponse.com/help/how-can-i-connect-my-online-store-to-getresponse.html) or [API](https://apidocs.getresponse.com/v3). * if you use one of our plugins, create a GetResponse store to receive all the ecommerce data. You do it when you configure the ecommerce tracking feature in the given plugin. Find out how to do it in the [Magento](https://www.getresponse.com/help/can-i-grow-my-contact-database-by-integrating-getresponse-with-magento.html), [WooCommerce](https://www.getresponse.com/help/how-to-add-woocommerce-customers-to-getresponse-in-legacy-wordpress-plugin.html), and [PrestaShop](https://www.getresponse.com/help/how-can-i-fully-integrate-my-prestashop-with-getresponse.html) plugins. * in your ecommerce platform, include the following product information: product name, image, category (optional), and SKU (product variant). * if you want to promote brand new products that no one has purchased yet, use the [Product feeds](https://www.getresponse.com/help/how-can-i-upload-my-product-data-to-getresponse.html) feature. It will upload your entire inventory of products to GetResponse. How to configure store settings? -------------------------------- 1. Open **[Website Builder](https://app.getresponse.com/wbe)**. 2. Click on the **Store settings** button. ![](https://us-wd.gr-cdn.com/help/sites/9/2024/01/2057/CleanShot-2024-01-16-at-15.36.39-2x.png) 3. From the drop-down menu choose the store you wish to use. 4. Choose your payment processor. Currently, we support **Stripe** and **PayPal**, and you can use one payment processor per store. 5. Select a **list** to which contacts who bought your products should be subscribed to. ![](https://us-wd.gr-cdn.com/help/sites/9/2024/01/2100/CleanShot-2024-01-16-at-15.41.08-2x.png) How to add products to the website? ----------------------------------- 1. Click on the **Add elements** button. ![](https://us-wd.gr-cdn.com/help/sites/9/2024/01/2103/CleanShot-2024-01-16-at-15.46.48-2x.png) 2. Under **Ecommerce** find the **Product box** element. ![](https://us-wd.gr-cdn.com/help/sites/9/2024/01/2104/CleanShot-2024-01-16-at-15.51.18-2x.png) 3. Drag and drop the ****Product box**** element into your page content. Note that the editor will highlight the spots where you can drop it. 4. In the popup window, select the products from your store that you want to present on your website. ![](https://us-wd.gr-cdn.com/help/sites/9/2024/01/2106/CleanShot-2024-01-16-at-15.56.03-2x.png) 5. Click **Save**. How to edit a product box? -------------------------- 1. Click anywhere inside the product box background to activate the menu. ![](https://us-wd.gr-cdn.com/help/sites/9/2024/01/2108/CleanShot-2024-01-16-at-16.00.58-2x.png) 2. To show products from another store, select it from the **Store settings** menu. 3. To select different products, click on the **EDIT SELECTION** button. ![](https://us-wd.gr-cdn.com/help/sites/9/2024/01/2115/CleanShot-2024-01-16-at-16.01.43-2x.png) 4. Expand **Display settings** to edit the layout, spacing, and visible fields of all displayed products. ![product box display settings](https://us-wd.gr-cdn.com/help/sites/9/2023/03/1524/pbw4.png) 5. Expand **Product card design** to edit the design of single or all visible products. You can change image size, image alignment, image border, font type, size, color, and alignment of each part of the product. You can also edit the text shown on the buttons. ![product cart design insde the prouct box](https://us-wd.gr-cdn.com/help/sites/9/2023/03/1531/pbw5.png) 6. Expand **Block settings** to customize block color, padding, border, radius, and shadow. ![product box block settings](https://us-wd.gr-cdn.com/help/sites/9/2023/03/1530/pbw6.png) 7. Enable **Absolute positioning** to move the product box to any place on your website. **Note**: we only recommend using this option if you have some unusual design that can’t be created in any other way. Using objects with absolute positioning can make your page less responsive on mobile devices. 8. Enable **Hide on mobile devices** to hide your product box while your page is opened on a mobile device. 9. Enable **Keep columns side-by-side on mobile devices** to display columns the same way they are displayed on the desktop. How to edit the Checkout and Confirmation pages? ------------------------------------------------ 1. After you place your product on your website, click on the **Home** button in the top left corner of the editor. ![](https://us-wd.gr-cdn.com/help/sites/9/2024/01/2123/CleanShot-2024-01-16-at-22.21.08-2x.png) 2. From the drop-down menu, you can choose to edit the pre-made **Checkout page** and **Confirmation page**. What does the purchase experience look like? -------------------------------------------- Your clients will go through a quick 3 step process in order to purchase a product: 1. Clicking the **Buy** button next to your product will redirect them to your **Checkout page**. ![](https://us-wd.gr-cdn.com/help/sites/9/2024/02/1503/wbe1.png) They will be asked to fill out all of the necessary details to complete the purchase. Remember that you can always edit the **Checkout page** to your liking, add custom fields, and specify which fields should be required. 2. After filling out the form and clicking the **Place order** button, your visitors will be redirected to the page of your payment processor to complete the purchase. ![](https://us-wd.gr-cdn.com/help/sites/9/2024/02/1514/wbe3.png) 3. When the payment is made they will be redirected to your **Confirmation page**. ![](https://us-wd.gr-cdn.com/help/sites/9/2024/02/1517/wbe2.png) If you would like to test the purchase process for yourself, you can set the price of your product to 0.00$. This will skip the second step, and you will see only the **Checkout page** and the **Confirmation page**. Where to find order details? ---------------------------- To find all of the order details, go to **Tools > Ecommerce tools** **\> Orders** tab. Here you will be able to verify all of the orders made, and their details: ![](https://us-wd.gr-cdn.com/help/sites/9/2024/02/1540/CleanShot-2024-02-13-at-16.38.26-2x.png) You can also check the **Status** of each order: * **Pending** – order was made, but the payment wasn’t finished or is still pending. * **Refunded** – money was refunded to the customer. * **Canceled** – purchase of the product was canceled. * **Paid** – order was made and the payment was processed successfully.