# Shopping Cart Element in Email Builder > The Shopping Cart Element allows you to display product information, pricing, and checkout links directly within your emails. It’s designed to help you… - Source: https://docs.ghlcustomercare.com/docs/marketing/email-builder-capabilities/shopping-cart-element-in-email-builder - Section: Marketing / Email Builder Capabilities - Reading time: 2 min - Images: 4, each explained below --- The Shopping Cart Element allows you to display product information, pricing, and checkout links directly within your emails. It’s designed to help you promote products, recover abandoned carts, and encourage customers to complete purchases all while keeping your email visually appealing and conversion-focused. --- **TABLE OF CONTENTS** - [What is the Shopping Cart Element in Email Builder?](#what-is-the-shopping-cart-element-in-email-builder) - [Key Benefits of the Shopping Cart Element](#key-benefits-of-the-shopping-cart-element) - [How To Setup the Shopping Cart Element](#how-to-setup-the-shopping-cart-element) --- ## **What is the Shopping Cart Element in Email Builder?** The Shopping Cart Element is a drag-and-drop block that enables you to add product details and checkout links inside your email. It’s typically used for **abandoned cart reminders**, **product recommendations**, or **limited-time promotions**. You can customise each item’s image, name, description, price, and button link giving you full control over how your products are presented in the email layout. > **Note:** The Shopping Cart Element doesn’t process payments directly. Instead, it links users to your website or store checkout page for completing purchases. --- ## **Key Benefits of the Shopping Cart Element** Using the Shopping Cart Element in your email design offers several benefits: - Showcase product details and pricing in a clean, structured layout. - Add “Buy Now” or “Return to Cart” buttons with direct checkout links. - Drive conversions through visually optimized cart reminders. - Easily customise colours, spacing, and fonts for on-brand presentation. - Fully responsive displays beautifully on both desktop and mobile. --- ## **How To Setup the Shopping Cart Element** Follow these steps to add and configure the Shopping Cart Element in your email template: 1. Navigate to **Marketing → Emails → Templates** from your sub-account dashboard. ![Step 1 of 8: Navigate to Marketing → Emails → Templates from your sub-account…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057309221/original/C3iYBnaXq8WzbZXbxqj452ol322L6jWakQ.png) **Step 1 of 8: Navigate to Marketing → Emails → Templates from your sub-account…** This screenshot accompanies step 1 of 8 in the "How To Setup the Shopping Cart Element" section of "Shopping Cart Element in Email Builder". At this point in the walkthrough you navigate to Marketing → Emails → Templates from your sub-account dashboard. The next step is to open an existing template or click the + New button to create one. - Where to go: Navigate to Marketing → Emails → Templates from your sub-account dashboard. - Controls: Marketing → Emails → Templates, + New, Email Builder, Add Elements (+), Shopping Cart Element, Elements, Edit, Visibility, Device-Based Visibility, Conditional Sending, desktop, mobile - Next: Open an existing template or click the + New button to create one. Full procedure: 1. Navigate to Marketing → Emails → Templates from your sub-account dashboard. <- this image 2. Open an existing template or click the + New button to create one. 3. In the Email Builder, click the Add Elements (+) icon in the left sidebar. 4. Locate the Shopping Cart Element under the Elements section. 5. Drag and drop the Shopping Cart Element into your desired section of the email layout. 6. Click on the Shopping Cart Element to open the Edit tab on the left panel. Here you can: 7. (Optional) Use the Visibility tab to configure Device-Based Visibility or Conditional Sending rules. 8. Preview your email on desktop and mobile to ensure products display clearly and links function correctly. 2. Open an existing template or click the **\+ New** button to create one. ![Step 2 of 8: Open an existing template or click the + New button to create one](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057309292/original/JAFAOxuYJhdNVg1lttZC40a0V-iS-O9HLQ.jpeg) **Step 2 of 8: Open an existing template or click the + New button to create one** This screenshot accompanies step 2 of 8 in the "How To Setup the Shopping Cart Element" section of "Shopping Cart Element in Email Builder". At this point in the walkthrough you open an existing template or click the + New button to create one. The next step is to in the Email Builder, click the Add Elements (+) icon in the left sidebar. - Where to go: Open an existing template or click the + New button to create one. - Controls: + New, Marketing → Emails → Templates, Email Builder, Add Elements (+), Shopping Cart Element, Elements, Edit, Visibility, Device-Based Visibility, Conditional Sending, desktop, mobile - Next: In the Email Builder, click the Add Elements (+) icon in the left sidebar. Full procedure: 1. Navigate to Marketing → Emails → Templates from your sub-account dashboard. 2. Open an existing template or click the + New button to create one. <- this image 3. In the Email Builder, click the Add Elements (+) icon in the left sidebar. 4. Locate the Shopping Cart Element under the Elements section. 5. Drag and drop the Shopping Cart Element into your desired section of the email layout. 6. Click on the Shopping Cart Element to open the Edit tab on the left panel. Here you can: 7. (Optional) Use the Visibility tab to configure Device-Based Visibility or Conditional Sending rules. 8. Preview your email on desktop and mobile to ensure products display clearly and links function correctly. 3. In the **Email Builder**, click the **Add Elements (+)** icon in the left sidebar. ![Step 3 of 8: In the Email Builder, click the Add Elements (+) icon in the left…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057309433/original/k1veiJZ-qY3a6MRAVjo24RKZpSnMV0TxBA.png) **Step 3 of 8: In the Email Builder, click the Add Elements (+) icon in the left…** This screenshot accompanies step 3 of 8 in the "How To Setup the Shopping Cart Element" section of "Shopping Cart Element in Email Builder". At this point in the walkthrough you in the Email Builder, click the Add Elements (+) icon in the left sidebar. The next step is to locate the Shopping Cart Element under the Elements section. - Where to go: In the Email Builder, click the Add Elements (+) icon in the left sidebar. - Controls: Email Builder, Add Elements (+), Marketing → Emails → Templates, + New, Shopping Cart Element, Elements, Edit, Visibility, Device-Based Visibility, Conditional Sending, desktop, mobile - Next: Locate the Shopping Cart Element under the Elements section. Full procedure: 1. Navigate to Marketing → Emails → Templates from your sub-account dashboard. 2. Open an existing template or click the + New button to create one. 3. In the Email Builder, click the Add Elements (+) icon in the left sidebar. <- this image 4. Locate the Shopping Cart Element under the Elements section. 5. Drag and drop the Shopping Cart Element into your desired section of the email layout. 6. Click on the Shopping Cart Element to open the Edit tab on the left panel. Here you can: 7. (Optional) Use the Visibility tab to configure Device-Based Visibility or Conditional Sending rules. 8. Preview your email on desktop and mobile to ensure products display clearly and links function correctly. 4. Locate the **Shopping Cart Element** under the **Elements** section. 5. Drag and drop the Shopping Cart Element into your desired section of the email layout. 6. Click on the **Shopping Cart Element** to open the **Edit** tab on the left panel. Here you can: - **Adjust Layout and Spacing:** Control padding, margins, and alignment to create a clean product grid. ![Step 1 of 1: Adjust Layout and Spacing: Control padding, margins, and alignment to…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057312576/original/B_L-d7WgRd-ozrqfxFwywFGL481w9Xd_OA.png) **Step 1 of 1: Adjust Layout and Spacing: Control padding, margins, and alignment to…** This screenshot accompanies step 1 of 1 in the "How To Setup the Shopping Cart Element" section of "Shopping Cart Element in Email Builder". At this point in the walkthrough you adjust Layout and Spacing: Control padding, margins, and alignment to create a clean product grid. - What this covers: Adjust Layout and Spacing: Control padding, margins, and alignment to create a clean product grid. - Controls: Marketing → Emails → Templates, + New, Email Builder, Add Elements (+), Shopping Cart Element, Elements, Edit, Visibility, Device-Based Visibility, Conditional Sending, desktop, mobile 7. (Optional) Use the **Visibility** tab to configure **Device-Based Visibility** or **Conditional Sending** rules. 8. Preview your email on **desktop** and **mobile** to ensure products display clearly and links function correctly. --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com