Overview

Follow this guide to learn how to display all of your products in a the browse and checkout email in Klaviyo.

How to Include All Products in a Begin Checkout Email

Add an HTML Block:

• While you are editing your email template, use the left-hand navigation menu and navigate to the section of the menu titled "Blocks".
• Select the "HTML" block and add it to your template.
  • (See Figure 1)

_Figure 1_

Enter HTML Code:

• An additional side navigation menu will appear. Use the text box to enter the following code:

  • {% if event.items|length == 1 %}
      <!-- Center layout for 1 product -->
      <div style="text-align: center; margin-bottom: 20px;">
        {% for item in event.items %}
          <img src="{{ item.imageURL }}" alt="{{ item.productTitle }}" style="width: 150px; margin: 10px;" />
          <p style="margin: 5px 0; font-size: 14px; font-weight: bold;">{{ item.productTitle }}</p>
          <p style="margin: 0; font-size: 12px;">Quantity: {{ item.quantity }}</p>
        {% endfor %}
      </div>
    {% else %}
      <!-- Two-column layout for 2 or more products -->
      <div style="display: flex; flex-wrap: wrap; justify-content: space-between;">
        {% for item in event.items %}
          <div style="width: 48%; text-align: center; margin-bottom: 20px;">
            <img src="{{ item.imageURL }}" alt="{{ item.productTitle }}" style="width: 150px; margin: 10px;" />
            <p style="margin: 5px 0; font-size: 14px; font-weight: bold;">{{ item.productTitle }}</p>
            <p style="margin: 0; font-size: 12px;">Quantity: {{ item.quantity }}</p>
          </div>
        {% endfor %}
      </div>
    {% endif %}
    

• Once you have entered the HTML code, you will see this change reflect in your template.
  • (See Figure 2)

_Figure 2_

👍

Optional: Customize the Template

The HTML code above is fully customizable. You can adjust styles (such as font size, margins, and images) to match your email’s design.

Multiple Products Preview Example:

• When there are multiple items in the cart, the products will be displayed in a two-column layout.
  • (See Figure 3)

_Figure 3_

Single Product Preview Example:

• If there is only one product in the cart, the product will be displayed centrally.
  • (See Figure 4)

_Figure 4_

(Optional): Add a Dynamic "Checkout" Button

To enable customers to easily complete their purchase, you can add a dynamic checkout button that links to the checkout page, pre-populated with the products in their cart.

Add an Button Block:

• While you are editing your email template, use the left-hand navigation menu and navigate to the section of the menu titled "Blocks".
• Select the "Button" block and add it to your template.
  • (See Figure 5)

_Figure 5_

Add Dynamic Checkout Button Code:

• An additional side navigation menu will appear. Navigate to the section of the menu titled "Button Text" and use the text box labeled "Link Address" to enter the following code:

  • {{ organization.url }}/cart/{% for item in event.items %}{{ item.variantId }}:{{ item.quantity }}{% if not forloop.last %},{% endif %}{% endfor %}
    

  • (See Figure 6)

_Figure 6_

👍

Note: This will work most of the time for cross-device checkout item recovery!

Dynamic "Checkout" Button Preview Example: (See Figure 7)

_Figure 7_