Autofill Discount via URL - A Step by Step Walkthrough (eg. Auto Apply discount code using a Link!)

Excursionist
14 0 11

Hey Derek,

Thanks for building this.
If anyone can't clck the link to the apps.shopify link, there is probably a trailing space in the link.

I did not have positive results with this with the Retina theme. Derek, you've got mail.
thanks.

0 Likes
Shopify Expert
122 0 19

@Jeremy thanks for noticing the bad link to get the Automatic Discount app :D We are currently testing on the Retina theme and on testing via the console on your site. We found the bug and fix it. By the way, here's the good link to the free app: https://apps.shopify.com/automatic-discount-rules 

Feel free guys to test all the features, including the automatic discounts based on what's in the shopping cart, and give us more feedback, it really helps :D

1 Like
Shopify Partner
7 0 0

We just updated our coupon app to allow you to add the coupon directly in your 

Shopify store URL. For example yourshopifystore?coupon=CouponName 

Here is a link to our app:

https://apps.shopify.com/exit-intent-coupon-popup

We have other features to show off your coupons with popups too and background images.  We have a free version too that you can try and a one week free trial of the premium version.  Would be great to get some feedback!

0 Likes
Shopify Partner
2 0 0

Good solution, people. Thanks for posting!

Question: is the Github project the most up to date per @Jason & @Ryan's suggestions?

https://github.com/dilloninstruments/shopify-autofill-discount-from-url

0 Likes
Shopify Partner
1 0 2

I appreciate everyone's work on this. Unfortunately SessionStorage (like LocalStorage) doesn't behave in either Chrome's Incognito or Safari's Private Browsing modes. Plus, the code is a bit more complex than it needs to be. So I made this: https://gist.github.com/ccashwell/38cc80a977adaf1777fc6668bd438f28

In short, it uses a cookie instead of browser storage to stash the discount code and does away with the hidden field business.

<script>
  /* Put this in theme.liquid, preferably right before "</body>" */
  (function() {
    var discountParam = document.location.search.match(/discount=(\w+)/);
    if (discountParam && discountParam.length > 1) {
      document.cookie = discountParam[0];
    }
  })();
</script>
<script>
  /* Put this in cart.liquid, preferably at the bottom of the file.
   * Also, make sure your cart's "<form>" has an ID of "cartform".
   */
  (function() {
    var discountCookie = document.cookie.match(/discount=(\w+)/);
    if (discountCookie && discountCookie.length > 1) {
      document.getElementById('cartform').action = '/cart?' + discountCookie[0];
    }
  })();
</script>

Note: This won't work as expected with discount codes containing non-alphanumeric characters. Codes should be something like "FALL10" or "OMGSecretCodesAreAwesome", not "SAVE10%" or "FREE$HIPPING".

2 Likes
New Member
3 0 0

Some great instruction, thanks for putting all these work together, very helpful.

ready, steady, go ...
0 Likes
New Member
4 0 0

@Chris Cashwell

Your code snippet worked like a charm! Thank you much.

@Jeremy Roberts

I use Retina theme too, I applied Chris's solution and a bit more customization and it works. Let me tell you how,

 

1- Apply whatever Chris says

2- Change the second part of his code(as he menditoned for ID) a bit because retina theme's cart form id is "cart_form". So the code you should put in your cart.liquid would be this;

<script>
  /* Put this in cart.liquid, preferably at the bottom of the file.
   * Also, make sure your cart's "<form>" has an ID of "cartform".
   */
  (function() {
    var discountCookie = document.cookie.match(/discount=(\w+)/);
    if (discountCookie && discountCookie.length > 1) {
      document.getElementById('cart_form').action = '/cart?' + discountCookie[0];
    }
  })();
</script>

3 - In retina there are 2 checkout forms. So when you add a product, a form(pop up) would appear on the right side of the screen and if you click checkout on that, it wont apply the discount code. This code will only apply the discount code when you go through Add product -> Edit Cart -> Checkout. In order to solve that you should copy paste the following code in your theme.liquid at the very end.

<script>
  (function() {
    var discountCookie = document.cookie.match(/discount=(\w+)/);
    if (discountCookie && discountCookie.length > 1) {
      document.getElementById('cart').action = '/checkout?' + discountCookie[0];
    }
  })();
</script>

On that form, the action is "/checkout" and the ID is "cart".

Hope this helps, at least its working for me. YAY!

0 Likes
New Member
1 0 0

This was extremely helpful and will be a great addition to our tripwire page after our customers opt-in to any of our free content.

0 Likes
Excursionist
28 1 3

Anyone able to get this figured out with the Ajax Form? 
I try changing the form action URL like the above examples, but the action won't change. 

This is the right drawer in the Fashionopolis theme I'm talking about.

0 Likes
Shopify Partner
1 0 0

Thanks for the refrence.

It works 100%

0 Likes