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.

how-to-add-a-link-to-apply-a-dynamic-coupon-code-on-shopify-checkout_1
You can the coupon code name 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.

how-to-add-a-link-to-apply-a-dynamic-coupon-code-on-shopify-checkout_2
Put the link into the Button’s “Link URL” field.

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.

how-to-add-a-link-to-apply-a-dynamic-coupon-code-on-shopify-checkout_3
For Images, place the URL 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 link 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.

how-to-add-a-link-to-apply-a-dynamic-coupon-code-on-shopify-checkout_4
Applied code in the “Source” section of a Table Block

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' %}
how-to-add-a-link-to-apply-a-dynamic-coupon-code-on-shopify-checkout_5
Insert the part that will show the generated coupon code in your Text Block.

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

how-to-add-a-link-to-apply-a-dynamic-coupon-code-on-shopify-checkout_6
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' %}
how-to-add-a-link-to-apply-a-dynamic-coupon-code-on-shopify-checkout_7
Example of setting up a Link for a text in a Text Block.

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”.

how-to-add-a-link-to-apply-a-dynamic-coupon-code-on-shopify-checkout_8
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”.

how-to-add-a-link-to-apply-a-dynamic-coupon-code-on-shopify-checkout_9
You should see the name of your coupon code followed by “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.