Streaming live at 10am (PST)

5000 character limit stops me from embedding new Shopify buy button


#1

Hi,

Shopify have released a new "Buy button" but as it has new features and design the embed code is a lot lot larger.

I've copied the code straight from my "buy button" for a particular product on Shopify and tried to embed this on my page on Webflow but it's telling me that it is over 5000 characters.

Please let me know what I can do to work around this.

Thanks!
Andrew


Banish the 5k custom code character limit
#2

It has been on the wishlist for over a year, along with many threads about the same problem.

https://forum.webflow.com/search?q=character%20limit

https://forum.webflow.com/search?q=embed%20limit

https://forum.webflow.com/search?q=5000%20limit

Requested here, please voice your opinion in these threads as well


#3

so to be clear....are you saying the new shopify buy button is not compatible with webflow? if so, that is a real shame. i am working on a site now that i was integrating with shopify.


#4

it does work:

however, if you add special color or layout changes within the shopify code generator, then it'll add more characters to the code.


#5

ok got it. thank you.


#6

Sorry my ignorance and lack of knowledge..

Why is there a character limit for custom code?


#7

To get around the 5,000 character limit for the new shopify code, you'll need to:

  1. copy your shopify embed code from shopify
  2. paste it into something like notepad, textedit or pastebin.com
  3. now cut (CMD + X or CTRL + X) all of the code between the <script type="text/javascript"> and </script> tags
  4. go to http://www.minifier.org/ and paste your code in there
  5. click on minify
  6. copy that new compressed code
  7. paste that code back in between the <script type="text/javascript"> and </script> tags inside of your notepad, textedit or pastebin.com
  8. copy all of that code and paste that into your Webflow embed component

Basically you're removing all of the unneeded spaces that shopify added.


#8

Yeah I did that before with the minifying as there was a lot of unnecessary white space, however I did want to use different fonts and colours.

I managed to work around this however as I beautified the code and saw that there were a lot of repetitions (so moved attributes outside certain nodes) and also deleted a lot of settings that seemed unnecessary/default.

Managed to get it below 5000 characters even with custom settings!

A separate issue that I found is that I have a shop page which uses an embedded buy button for each dynamic item in a list, however the new buy button stacks all the buttons in the same place, one under each other (if that makes sense). However the old buy buttons stay in the correct place it's just that they take a long time to load.


#9

I solved that issue here:


#10

First of all, thank you for your help! Unfortunately, my generated code is longer than 5000 characters even after minifying...is there anything else I can do? Thanks a lot!


#11

even when you minified it?


#12

Yes, well this is what I meant by "even after minifying it" :slight_smile:


#13

Sooner or later we need a custom code limit increase. Furthermore, this function is only available to pro users. Imagine those upgrading just to use the custom code field suddenly finds out that there is a limit after upgrading their plan. Users should not have to use "workarounds" like minifying code, as the minified code will not be easily editable after.


#14

Our team is looking into lifting it. I'll keep you all posted


#15

@samliew @andrewrubio @dapitts08 We got a new solution:

Put this code in your </body> custom code area:

<script data-shopify-buy-ui>
//<![CDATA[

/* <BuyButton> */
(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }

})();
/* </BuyButton> */
//]]>
</script>

Then, inside of your embed component, put the product code:

<script data-shopify-buy-ui>
function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'your-sub-domain.myshopify.com',
      apiKey: 'your-API-key',
      appId: '6',
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [product-ID-goes-here],
        moneyFormat: '${\{amount}}',
        options: {"product":{"buttonDestination":"cart","layout":"vertical","variantId":"all","width":"280px","contents":{"img":true,"title":true,"variantTitle":false,"options":true,"price":true,"description":false,"buttonWithQuantity":false,"button":true,"quantity":false},"text":{"button":"ADD TO CART"},"styles":{"product":{"@media (min-width: 601px)":{"max-width":"calc(25% - 20px)","margin-left":"20px","margin-bottom":"50px"}},"button":{"background-color":"#78b657","color":"#ffffff","font-family":"Helvetica Neue, sans-serif","font-size":"15px","padding-top":"16px","padding-bottom":"16px","padding-left":"26px","padding-right":"26px","border":"none",":hover":{"background-color":"#5f9d3e","color":"#ffffff"},"border-radius":"3px"},"variantTitle":{"font-family":"Helvetica Neue, sans-serif","font-size":"14px","color":"#4c4c4c"},"title":{"font-family":"Helvetica Neue, sans-serif","font-weight":"bold","font-size":"18px","color":"#4c4c4c"},"description":{"color":"#4c4c4c","font-size":"14px","font-family":"Helvetica Neue, sans-serif"},"price":{"font-family":"Helvetica Neue, sans-serif","font-size":"14px","color":"#4c4c4c"},"quantityInput":{"font-size":"16px","padding-top":"16px","padding-bottom":"16px","color":"#4c4c4c"}}},"cart":{"contents":{"title":true,"lineItems":true,"footer":true,"button":true},"text":{"title":"Cart","total":"Total","notice":"Shipping and discount codes are added at checkout.","button":"CHECKOUT"},"styles":{"button":{"background-color":"#78b657","color":"#ffffff","font-family":"Helvetica Neue, sans-serif","font-size":"16px","padding-top":"16px","padding-bottom":"16px","padding-left":"26px","padding-right":"26px","border":"none",":hover":{"background-color":"#5f9d3e","color":"#ffffff"},"border-radius":"3px"},"cart":{"background-color":"#ffffff"},"footer":{"background-color":"#ffffff"},"title":{"color":"#4c4c4c"},"close":{":hover":{}}}},"modalProduct":{"contents":{"img":true,"title":true,"variantTitle":false,"options":true,"price":true,"description":true,"buttonWithQuantity":false,"button":true,"quantity":false},"text":{"button":"ADD TO CART"},"styles":{"product":{"@media (min-width: 601px)":{"max-width":"100%","margin-left":"20px","margin-bottom":"50px"}},"button":{"background-color":"#78b657","color":"#ffffff","font-family":"Helvetica Neue, sans-serif","font-size":"15px","padding-top":"16px","padding-bottom":"16px","padding-left":"26px","padding-right":"26px","border":"none",":hover":{"background-color":"#5f9d3e","color":"#ffffff"},"border-radius":"3px"},"variantTitle":{"font-family":"Helvetica Neue, sans-serif","font-size":"14px","color":"#4c4c4c"},"title":{"font-family":"Helvetica Neue, sans-serif","font-weight":"bold","font-size":"26px","color":"#4c4c4c"},"description":{"color":"#4c4c4c","font-size":"14px","font-family":"Helvetica Neue, sans-serif"},"price":{"font-family":"Helvetica Neue, sans-serif","font-size":"14px","color":"#4c4c4c"},"quantityInput":{"font-size":"16px","padding-top":"16px","padding-bottom":"16px","color":"#4c4c4c"}}},"productSet":{"styles":{"products":{"@media (min-width: 601px)":{"margin-left":"-20px"}}}},"toggle":{"styles":{"toggle":{"font-family":"Helvetica Neue, sans-serif","background-color":"#78b657",":hover":{"background-color":"#5f9d3e"}}}},"modal":{"styles":{"modal":{"background-color":"#ffffff"}}},"option":{"styles":{"label":{"font-family":"Helvetica Neue, sans-serif","font-weight":"normal","color":"#4c4c4c"},"select":{"font-family":"Helvetica Neue, sans-serif","font-weight":"normal","color":"#4c4c4c"}}}}
      });
    });
  }
</script>

This should save some space on the character count. Let me know if this works for you all.


#16

This code doesn't work. Not having any success. Even if this one code would work, there still would be character issues with the other buttons. This code still only supports an embed button - we can't use the other two options, nor embed collections which are larger and require even more code.

We've got to have a character limit raise because it's just not efficient to have only 5k and recode so many buttons. I'm not even sure when it was lowered to 5k, as I remember it was raised to 10k a long time ago.

Our entire store relies on embedded Shopify buttons and we can't do anything. The old code isn't working on Webflow's SSL, so in terms of encryption this is also an issue. I'm sure the new code covers this for compliance, but the new code is too long. If the character limit doesn't get raised, we'll have to move the entire store directly over to Shopify.

I'm begging and pleading with you guys please raise the character limit! Shopify updated all of their stuff so that merchants had more options to for their stores for Black Friday, in which they do 40% more. We hope to do the same and we'll be toast if we can't. We're already taking a hit now.

PLEASE RAISE THE CHARACTER LIMIT!!!!!!


#17

Quick solution: Raise the character limit!

The API will be the solution but we are months away from that.


My current level of trust about webflow it's very low right now.


#18

if @PixelGeek would enlighten us why is there a 5,000 char limit in the first place would be greatly appreciated. I recently had been doing some heavy custom script stuff for a site, and that limit is really a pain. If or unless you provide us a method to upload ".js" file extensions; else please lift the limit.


#19

Chiming in that I also just ran into this issue this morning trying to add new products to our site from Shopify...

I agree with @AntonioBalderas that simply raising the character limit would be the best quick solution. With the holidays approaching we have a host of new products to get listed on our site and need a more practical solution to get these up. (outside of minify).

Fingers crossed you guys can get this resolved asap as this is going to be a real problem getting everything done in time.


#20

Hi everyone, original poster here. I managed to get the code down to less than 5000 characters including the extra config changes that the Shopify buy button offered. This includes colour changes, quantity box, and font changes.

Please feel free to copy my code and change any of the above settings where you see fit. If you go on http://jsbeautifier.org/ you can see it clearer :slight_smile:

<script data-shopify-buy-ui> (function(){var scriptURL='https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js'; if (window.ShopifyBuy){if (window.ShopifyBuy.UI){ShopifyBuyInit();}else{loadScript();}}else{loadScript();}function loadScript(){var script=document.createElement('script'); script.async=true; script.src=scriptURL; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script); script.onload=ShopifyBuyInit;}function ShopifyBuyInit(){var client=ShopifyBuy.buildClient({domain: 'smith-and-sinclair.myshopify.com', apiKey: '54e8e901a1c06b0d398baaad2b6e5e7f', appId: '6',}); ShopifyBuy.UI.onReady(client).then(function(ui){ui.createComponent('product',{id: [7676391559], moneyFormat: '£{{amount}}', options:{"product":{"buttonDestination": "cart", "layout": "vertical", "variantId": "all", "width": "240px","font-weight": "bold", "contents":{"img": false, "title": false, "variantTitle": false, "options": true, "price": false, "description": false, "buttonWithQuantity": true, "button": false, "quantity": false}, "text":{"button": "Add to basket"}, "styles":{"product":{"@media (min-width: 601px)":{"max-width": "100%", "margin-left": "0", "margin-bottom": "50px"}}, "button":{"font-family": "Roboto, sans-serif", "background-color": "#0f1f3c", "color": "#ffffff", "font-size": "13px", "padding-top": "14.5px", "padding-bottom": "14.5px", "padding-left": "14px", "padding-right": "14px", ":hover":{"background-color": "#1a3566", "color": "#ffffff"}, "border-radius": "5px", ":focus":{"background-color": "#1a3566"}, "font-weight": "bold"}, "quantityInput":{"font-size": "13px", "padding-top": "14.5px", "padding-bottom": "14.5px", "color": "#4c4c4c"}, "compareAt":{"font-size": "12px"}}, "googleFonts": ["Roboto"]}, "cart":{"contents":{"title": true, "lineItems": true, "footer": true, "button": true}, "text":{"title": "Basket", "total": "Total", "notice": "Shipping and discount codes are added at checkout.", "button": "CHECKOUT"}, "styles":{"button":{"background-color": "#0f1f3c", "color": "#ffffff", "font-family": "Roboto, sans-serif", "font-size": "13px", "padding-top": "14.5px", "padding-bottom": "14.5px", "padding-left": "26px", "padding-right": "26px", "border": "none", ":hover":{"background-color": "#1a3566", "color": "#ffffff"}, "border-radius": "5px", ":focus":{"background-color": "#1a3566"}, "font-weight": "bold"}, "cart":{"background-color": "#ffffff"}, "footer":{"background-color": "#ffffff"}}, "googleFonts": ["Roboto"]}, "modalProduct":{"contents":{"img": true, "title": true, "variantTitle": false, "options": true, "price": true, "description": true, "buttonWithQuantity": false, "button": true, "quantity": false}, "text":{"button": "ADD TO CART"}, "styles":{"product":{"@media (min-width: 601px)":{"max-width": "100%", "margin-left": "20px", "margin-bottom": "50px"}}, "button":{"background-color": "#0f1f3c", "color": "#ffffff", "font-family": "Roboto, sans-serif", "font-size": "13px", "padding-top": "14.5px", "padding-bottom": "14.5px", "padding-left": "14px", "padding-right": "14px", "border": "none", ":hover":{"background-color": "#1a3566", "color": "#ffffff"}, "border-radius": "5px", ":focus":{"background-color": "#1a3566"}, "font-weight": "bold"}, "variantTitle":{"font-family": "Roboto, sans-serif", "font-size": "14px", "color": "#4c4c4c", "font-weight": "bold"}, "title":{"font-family": "Roboto, sans-serif", "font-weight": "bold", "font-size": "26px", "color": "#4c4c4c"}, "description":{"color": "#4c4c4c", "font-size": "14px", "font-family": "Roboto, sans-serif", "font-weight": "bold"}, "price":{"font-family": "Roboto, sans-serif", "font-size": "14px", "color": "#4c4c4c", "font-weight": "bold"}, "quantityInput":{"font-size": "13px", "padding-top": "14.5px", "padding-bottom": "14.5px", "color": "#4c4c4c"}, "compareAt":{"font-family": "Roboto, sans-serif", "font-weight": "bold"}}, "googleFonts": ["Roboto", "Roboto", "Roboto", "Roboto", "Roboto", "Roboto"]}, "productSet":{"styles":{"products":{"@media (min-width: 601px)":{"margin-left": "-20px"}}}}, "toggle":{"styles":{"toggle":{"font-family": "Roboto, sans-serif", "background-color": "#0f1f3c", ":hover":{"background-color": "#1a3566"}, ":focus":{"background-color": "#1a3566"}, "font-weight": "bold"}, "count":{"color": "#ffffff", ":hover":{"color": "#ffffff"}, "font-size": "13px"}, "iconPath":{"fill": "#ffffff"}}, "googleFonts": ["Roboto"]}, "modal":{"styles":{"modal":{"background-color": "#ffffff"}}}, "option":{"styles":{"label":{"font-family": "Roboto, sans-serif", "font-weight": "bold", "color": "#4c4c4c"}, "select":{"font-family": "Roboto, sans-serif", "font-weight": "bold", "color": "#4c4c4c"}}, "googleFonts": ["Roboto"]}}});});}})();</script>

Hope this helps!

I also agree with increasing the character limit though would solve many problems!