How to dynamically display products in emails

How to dynamically display products in emails

In this guide, you’ll learn how to display products dynamically in your emails. Getsitecontrol offers this option in three different email automations:

  1. Checkout abandonment automation
  2. New order automation
  3. Fulfilled order automation

Follow the steps below to set up dynamic products for your emails.

Add the dynamic items element to the email

Click the +Insert button in the email editor and select the items element from the menu:

The ‘items’ element in the +Insert menu of a checkout abandonment automation

This element may be called Abandoned items, Purchased items, or Fulfilled items, depending on the type of automation you’re building. Regardless, these elements work in the same way: they dynamically display the products (abandoned, purchased, or shipped), and feature buttons that allow customers to view the products in your store.

On the right-side panel, you’ll see the element settings:

The ‘items’ element settings in the panel on the right

The product image, name, price, and quantity will be automatically fetched from your store, but you can adjust the design, placement, and colors of these elements.

Below is a walkthrough of the available options.

Style the product images

Open the Images block and proceed to style the product images. You can adjust the following parameters:

  • Image ratio: square, portrait, or original (the image format from your store)
  • Radius: the degree of rounding of the image corners
  • Border: the thickness of the border; if set to 0px, no border will appear
  • Border color

The ‘Images’ block settings

The toggle in the top-right corner allows you to enable/disable product images altogether:

The toggle to enable/disable images

Style the buttons

All buttons in the items element lead to the corresponding product pages on your store.

To adjust the appearance of the buttons, open the Buttons block. The settings allow you to customize the following:

  • Button text
  • Style: Solid, Outline, or plain Text
  • Radius: the degree of rounding of the button corners
  • Button color and Button text color

The ‘Buttons’ block settings

In the top-right corner, you’ll find the toggle to enable/disable buttons altogether.

Select product details to display

Open the Items block and choose what information you want to display about the featured products:

  • Price
  • Description (information about the specific product variant)
  • Quantity

The ‘Items’ block settings

Set the cart price format

Lastly, open the Cart price block to adjust the format and label of the cart price. You can display the cart price as:

  • Subtotal: the price before discounts, taxes, and fees
  • Total: the price after applying all the above

The ‘Cart price’ block settings

In the top-right corner, you’ll find the toggle to enable/disable the cart price altogether.

To further customize the appearance of your items element, take advantage of the container settings.

When you’re satisfied with your work, Save & close the email.

Should you need help creating or editing your emails, do not hesitate to reach out to our Tech Support team.

Browse by category

Groups

Widgets 

7 sections

Contacts 

4 videos

Broadcasts 

1 article 1 video

Automations 

13 articles 11 videos

Emails 

13 articles 5 videos