Setting Up Display Conditions for Shopify Cart Abandon

Turn a Drag and Drop Cart Abandon template into a dynamic template that will link users towards one of two places: either to their checkout screen after they have abandoned their cart, or to a product from their cart. Users can be directed to their checkout screen if the unique Checkout Shopify link is available. Otherwise, if the checkout Shopify link is unavailable, users can be linked back to a product from their cart.

To accomplish this, build two rows into the template that feature the product name and the CTA button.  These rows will be controlled by conditional statements so that only one is displayed each time.

Note: Before getting started, make sure you are familiar with the basics of the Template Builder, Conditional Statements, and the Display Conditions control.

First, select the template you would like to use as a starting point, and clone it. We recommend testing changes to an existing campaign, instead of assuming a new version is always better!

Determine which elements will be displayed conditionally

In this example, we will be linking the hero image and the CTA button conditionally.  Because of this we will place the hero image, product name, and CTA button content blocks in their own row.

When the row is selected, you will be able to highlight the content blocks inside by moving the mouse over each element.

Build the First Display Condition

1. Select the row.
2. Within the menu on the right side, click Add condition in the "Display condition" section.
   
   
   
   
3. Fill out the fields as follows:
   • Name: Display if Shopify link exists (is not null and is not blank)
   • Description: send the user back to their cart/checkout
   • Before: {% if rs_str_1_usr_attr != null and rs_str_1_usr_attr != '' %}
   • After: {% else %}{% endif %}
4. Click Confirm.

Set Your Conditional Content

Once a display condition has been set, we must set the content that follows this statement.  If the Shopify checkout link exists we want to send users to that Shopify link. Our custom merge tag, {{rs_str_1_usr_attr}}, can be utilized to direct your customer to their checkout page. Here we linked the hero image to the checkout Shopify page.

And we linked the CTA button to the checkout Shopify page, as well.

Clone Your Content for the Second Display Condition

Select the row and click the copy icon to create a second identical row below it that you will use to set up the second display condition.

Build the Second Display Condition

Your display conditions will be copied over from the original row.  Now we will swap the != "does not equal" for == "equals", and we will swap the "and" for an "or".

1. Select the copied row.
2. Click Edit condition.
   
   
   
   
3. Fill out the fields as follows:
   • Name: Display if Shopify link does not exist (is null or if blank)
   • Description: send user back to a product from their cart
   • Before: {% if rs_str_1_usr_attr == null or rs_str_1_usr_attr == '' %}
   • After: {% else %}{% endif %}
4. Click Confirm.

Set Your Conditional Content

Once a display condition has been set, we must set the content that follows this statement. If the Shopify checkout link does not exist, we want to send users to a product page instead. Our merge tag, {{ rs_rpu1 }}, can be utilized to link users to the product page. Here we linked the hero image to the product page.

And we linked the CTA button to the product page. We also set the CTA button to say "Continue Shopping" since it does not lead back to the user's cart.

Finalize and Save Your Template

Make sure all content is ready to send, double-checking filters, subject lines, and other advanced settings. Once it's saved and ready to go, don't forget to activate!