Auto Add Item from CTA Click | Shopify Only

Looking to upsell some items? With a little custom code we've created you can now auto add an item to your cart page from a CTA click. 

Check out this video or follow the instructions below: 

SHOPIFY CUSTOMERS: If you installed Justuno onto your Shopify store BEFORE 6/25/2017 please uninstall the application and reinstall it to activate these features. 

Step 1: Head to your promotions section and hit New Promotion then Custom Promotion (You must enter a promotion name and then click Get Started). 

Step 2: Select device type then display type, then choose unlocked (Website Messaging). 

Step 3: Choose a template and edit your design accordingly. Please make sure to have a CTA layer that will add the item in question

CTAadd.pngStep 4: Paste this code in the custom pop up JS section of your design: 

$(function(){
  $(document).on('click', '.design-layer[data-layertype="standard-button"] .design-layer-editable[data-id!=""]', function(){
    var pass_data = {
                      'juCustom':true,
                      'variantid':jju(this).data('id')
                    };
    $.postMessage(
      JSON.stringify(pass_data),
      parent_url,
      parent
    );
  });
});


customcodearea.png

customcode.png

Step 5: Paste in the code below in the tab js section and make sure both override default JS toggles are on

 
window.juIframeCatch = function(data) {
    jju.ajax({
        url: '/cart/add.js',
        type: "post",
        dataType: "text",
        data: {"id": data.variantid,"quantity": 1}
    }).done(function(data) {
        document.location = '/cart';
    });
}

NOTE: This code calls for the cart page html document in the last statement, which will redirect the page to the cart. To remain on the current page without the redirect simply replace the statement:

document.location = '/cart';

with the statement:

location.reload();

Step 6: Find the variant ID that you want to auto add to your cart, this is usually located in the URL of the product. For example: https://www.thegldshop.com/products/diamond-cuban-link-choker-10mm-in-yellow-gold?variant=36451285842

Step 7: Paste in the variant ID in the Data ID option of the CTA. Now you have a CTA that will Auto add an item to your cart!

variantIDlocation.png

TAGS: Upsell, auto add item, increase cart, upsell, upselling, cross-selling, cross sell, gifting, bundle, bundling, gift

 

Have more questions? Submit a request

6 Comments

  • 0
    Avatar
    Rudy Est

    Hi Jenna, 

    Sounds like a very nice feature, but nothing happens when clicking CTA.

    I even tried to hard code the variant ID, but still no luck.

    I 'd appreciate any advice you may have.

    PS: I am on shopify.  App installed last week.

    Thanks,

    Rudy

  • 0
    Avatar
    Yuno

    Hi Rudy! 

    It appears that there was a step missing and more custom code that needed to be added to the promotions custom code tab area. Please check out the additional code that was added to the article and this feature should work for you! 

     

    Feel free to reach out to support directly with any other questions

  • 0
    Avatar
    Theoccultcorner

    dos this method still work? nothing seems to work.

  • 0
    Avatar
    Yuno

    Hi there!

    This still works, the most common issue tends to be the variant ID or not having the custom code override turned on. 

    I sent out an email to help.

     

    Kind regards,

    Yuno

  • 0
    Avatar
    Cool Kid vids

    Hi there,

    This example seems to be leaning towards Product Variants Upsell. What if I want to upsell using different products? What changes should I make in the code?

  • 0
    Avatar
    Yuno

    Hi there!

    Happy to help. The last time we checked, every product is given a variant ID even if it has no variants.

    So you would simply add another CTA and use the new product's variant ID. Just reach on out to Support@justuno.com

    if you run into any issues. Here to help.

     

    Kind regards,

    Yuno

Please sign in to leave a comment.