5000 character limit stops me from embedding new Shopify buy button

andrewrubio · November 3, 2016, 11:38am

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

samliew · November 3, 2016, 11:42am

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

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

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

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

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

dapitts08 · November 3, 2016, 5:12pm

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.

PixelGeek · November 3, 2016, 5:16pm

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.

dapitts08 · November 3, 2016, 5:23pm

ok got it. thank you.

LuckyScooby · November 3, 2016, 5:37pm

Sorry my ignorance and lack of knowledge…

Why is there a character limit for custom code?

PixelGeek · November 3, 2016, 5:58pm

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

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

andrewrubio · November 3, 2016, 6:13pm

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.

PixelGeek · November 3, 2016, 6:19pm

I solved that issue here:

gabermesz · November 4, 2016, 7:22pm

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!

PixelGeek · November 4, 2016, 9:48pm

even when you minified it?

gabermesz · November 4, 2016, 10:44pm

Yes, well this is what I meant by “even after minifying it”

samliew · November 5, 2016, 2:50am

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.

PixelGeek · November 5, 2016, 4:38am

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

PixelGeek · November 5, 2016, 5:16pm

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

ALLMAVEN · November 6, 2016, 3:48am

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!!!

AntonioBalderas · November 6, 2016, 7:54am

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.

alexanderwong · November 6, 2016, 7:58am

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.

Andy_Kenney · November 6, 2016, 5:39pm

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.

andrewrubio · November 6, 2016, 8:21pm

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

Hope this helps!

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

Topic		Replies	Views
Increase Character Limit for Embed Widget Product feedback	24	6994	February 14, 2017
Alternative to 5K custom code character limit Custom code	11	5179	April 1, 2016
Increase HTML embed character limit Product feedback	7	3901	November 7, 2016
Reached 10000 limit in custom code Custom code	2	2455	April 27, 2017
Page's Custom Code 10,000 Character Limit Reached 👎 Custom code	16	6078	April 11, 2023

5000 character limit stops me from embedding new Shopify buy button

Related topics