How to Add a Link to Apply a Dynamic Coupon Code on Shopify Checkout

To set a coupon code in Klaviyo that will automatically apply on the checkout page you need to put your coupon code into a special line of code that will pass the generated coupon code into the URL.

Let’s get deeper into this…

There are a couple of scenarios where you might want to use this. If you want to send a coupon code in your emails and save your subscribers the hassle of copy and pasting it, you can do that by inserting your coupon code into a special line of code and applying that code in a text line, button or image. Upon clicking on the coupon code they will be redirected to your webstore and the coupon code will be applied on checkout.

This line of code varies depending on the placement – e.g. Image, Button or Link. It can also be adjusted to send your subscribers to the homepage of your store or redirect them to a specific page (product, collection etc.)

Assuming that you’ve already created the coupon code, the next thing you need is the coupon code name. You can take that from the “Coupons” section of Klaviyo.

Linking the Coupon Code to the Homepage

You can set this option in Image, Button or Text(Link). Let’s first talk about sending your subscribers to the homepage of your webstore.

Using Buttons or Images to Apply Coupon Code

To set the coupon code in image or button to auto apply on click replace the placeholders in this line with actual information:

https://yoursite.com/discount/{% coupon_code 'CouponName' %}

Note: The placeholders are highlighted.

For example, if our coupon name was “example_coupon_code”, and our website was retentioncommerce.com, the full link would look like this:

https://retentioncommerce.com/discount/{% coupon_code 'example_coupon_code' %}

Next, you need to put the link into the Button’s “Link URL” field as shown in the image below.

This process is the same if you want to use an image instead of a button. You generate your URL and place it in the link field of the image.

Using Text (Links) to Apply Coupon Code

To apply this line of code to a text and make a clickable link you’ll need to add the HTML element into the code. The code for a link is as follows:

<a href=”{link to your site}”>Text of the Link</a>

This is an example where the linked text will actually show the generated coupon code and make it clickable so it’s automatically applied on checkout.

Replace the highlighted placeholders with the actual information and place it in the “Source” section of your text block.

<a href="https://yoursite.com/discount/{% coupon_code 'CouponName' %}">{% coupon_code 'CouponName' %} </a>

This is how the code should look when applied.

If you’re not comfortable using the “Source” section, you also have an option to select a text and insert the link using their linking feature.

In this case, we’ll have to reconstruct the link into three parts with different functions.

• Show the generated coupon code: {% coupon_code ‘CouponName’ %}
• Set the protocol that your website is using: Usually “https://” or “http://”
• Applies the coupon code on checkout: yoursite.com/discount/{% coupon_code ‘CouponName’ %}

In our example:

Our coupon code name is “example_coupon_code”

Our website is: https://retentioncommerce.com

The settings we need to show the generated coupon code, link it to our website and set it to be automatically applied on checkout are:

• Coupon code: {% coupon_code ‘example_coupon_code’ %}
• Website protocol: https://
• Link URL: retentioncommerce.com/discount/{% coupon_code ‘example_coupon_code’ %}

Insert the part that will show the generated coupon code in your Text Block.

{% coupon_code 'CouponName' %}

Select the code and click on the “link” button from the text block editor options.

In the “Link Info” tab, set the “Link Type” to “URL”. Set the protocol that your website is using. Usually it’s the “https://”. And then in the URL field, place the code that will link the coupon code to your website and automatically apply the coupon code on checkout, which is the third part of the reconstructed link.

yoursite.com/discount/{% coupon_code 'CouponName' %}

Linking the Coupon Code to a Specific Page or Product

To send your subscribers to a specific page of your website and automatically apply the coupon code we need to add the “redirect” element into the URL.

Using Button or Image

Use the instructions above to generate your basic URL. At the end of the URL place the “?redirect=” element and specify the page you want to redirect people to.

Example:

https://retentioncommerce.com/discount/{% coupon_code 'example_coupon_code' %}?redirect=/insights

When subscriber clicks on the image/button the coupon code will be applied and the subscriber will be redirected to https://retentioncommerce.com/insights

Using Text (Link)

Same goes for setting this up in a link of your text. Use the instructions above to generate the URL and add the “?redirect=” element at the end of it.

Example:

<a href="https://retentioncommerce.com/discount/{% coupon_code 'example_coupon_code' %}?redirect=/insights">{% coupon_code 'example_coupon_code' %} </a>

Preview

You can test to see if you’ve successfully added your coupon code by previewing your email. Click on “Preview” and choose “Show directly in Klaviyo”.

If the coupon code says “{your code name}-PREVIEW” you know that you’ve set the coupon code right. Since this is not an actual email that is sent, a unique coupon code won’t be generated but instead of that, after your code name, you can see “PREVIEW”.

If you want to be absolutely sure that you did everything right, you can use the template to send yourself a campaign email. This way, Klaviyo will actually generate a unique coupon code and you can check if the code and the auto apply logic works.

Linking the Coupon Code to the Checkout Page

Klaviyo also allows you to link to the Checkout Page if you are adding a coupon code in a “Checkout Started” Triggered Flow. Typically, this is most often used in the standard Cart Abandonment Flow.  Please note, this ONLY works with the “Checkout Started” triggered Flows and can’t be used anywhere else.

There’s a special event property in the Checkout Started event properties called event.extra.token that has to be appended to the Shopify checkout URL which recreates the Cart for checkout regardless if the user returned to the website from a different device or browser than the one they started with.

The full URL to use, along with the discount code, looks like this:

https://www.mysite.com/STOREFRONT_ID/checkouts/{{ event.extra.token }}?discount={% coupon_code 'NAME_OF_YOUR_COUPON' %}

Notice, you will need an additional value called the “STOREFRONT_ID”

How To Get Your Shopify STOREFRONT ID

To get your STOREFRONT ID, you need to navigate to Analytics > Metrics > Checkout Started > Activity Feed. Here you can see all the checkout started events from your customers. From here, you need to click on the timestamp for one of the events.

A pop up will appear that contains all the metadata passed for that event. You need to find the “checkout_url” parameter, which contains the abandoned checkout URL. The part after your website URL is your STOREFRONT ID. In this example, our STOREFRONT ID is 9223045156. This ID is unique for each Shopify store.

Now that you have the STOREFRONT ID, all you need to do is to change the placeholder elements from this snippet:

https://www.mysite.com/STOREFRONT_ID/checkouts/{{ event.extra.token }}?discount={% coupon_code 'NAME_OF_YOUR_COUPON' %}

You can use this link in your “Return to Cart” button, image, or link, and it will automatically apply the coupon code.