Product image issue when embedding Shopify Buy Button on 3rd party website

Solved
Maximus000
Tourist
6 0 4

Hi,

 

I have embedded Shopify Buy Buttons from my Shopify store on a 3rd party website (by generating and copy&pasting the required HTML code onto the 3rd party website).

 

The buy buttons work as expected, but I am however facing the following product image quality issue:

 

1) The collection images of the embedded product collection are fine: they have an image size of 550 x 550 px and are good resolution

 

2) When selecting a particular product, by clicking on the 'VIEW PRODUCT' button, the product images of the selected product become blurry: I suspect this is because when inspecting the image size, they appears to have been reduced to: 280 x 280 px, making the image lower quality.

 

Question:

 

Is there a way to make a change in the below HTML code of the buy button, to avoid the image size being reduced from 550 x 550 px to 280x280px, to ensure the image size remains the same after clicking 'VIEW PRODUCT' button?

 

HTML code:

 

<div id="collection-component-09f89f4f641"></div>
<script type="text/javascript">
/*<![CDATA[*/

(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: 'the-crypto-world.myshopify.com',
storefrontAccessToken: '2696361a3c93ffbcd20a8f6cdaf48abd',
});

ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('collection', {
id: 5196644378,
node: document.getElementById('collection-component-09f89f4f641'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"buttonDestination": "modal",
"variantId": "all",
"contents": {
"imgWithCarousel": false,
"variantTitle": false,
"options": false,
"description": false,
"buttonWithQuantity": false,
"quantity": false
},
"text": {
"button": "VIEW PRODUCT"
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(50% - 40px)",
"margin-left": "40px",
"margin-bottom": "50px",
"width": "calc(50% - 40px)"
},
"imgWrapper": {
"position": "relative",
"height": "0",
"padding-top": "calc(75% + 15px)"
},
"img": {
"height": "calc(100% - 15px)",
"position": "absolute",
"left": "0",
"right": "0",
"top": "0"
}
},
"button": {
"background-color": "#77a488",
"font-family": "Lato, sans-serif",
":hover": {
"background-color": "#6b947a"
},
":focus": {
"background-color": "#6b947a"
},
"font-weight": "normal"
},
"variantTitle": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
},
"title": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
},
"description": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
},
"price": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
},
"compareAt": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
}
},
"googleFonts": [
"Lato",
"Lato",
"Lato",
"Lato",
"Lato",
"Lato"
]
},
"cart": {
"contents": {
"button": true
},
"styles": {
"button": {
"background-color": "#77a488",
"font-family": "Lato, sans-serif",
":hover": {
"background-color": "#6b947a"
},
":focus": {
"background-color": "#6b947a"
},
"font-weight": "normal"
},
"footer": {
"background-color": "#ffffff"
}
},
"googleFonts": [
"Lato"
]
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"variantTitle": false,
"buttonWithQuantity": true,
"button": false,
"quantity": false
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"background-color": "#77a488",
"font-family": "Lato, sans-serif",
":hover": {
"background-color": "#6b947a"
},
":focus": {
"background-color": "#6b947a"
},
"font-weight": "normal"
},
"variantTitle": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
},
"title": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
},
"description": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
},
"price": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
},
"compareAt": {
"font-family": "Lato, sans-serif",
"font-weight": "normal"
}
},
"googleFonts": [
"Lato",
"Lato",
"Lato",
"Lato",
"Lato",
"Lato"
]
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Lato, sans-serif",
"background-color": "#77a488",
":hover": {
"background-color": "#6b947a"
},
":focus": {
"background-color": "#6b947a"
},
"font-weight": "normal"
}
},
"googleFonts": [
"Lato"
]
},
"option": {
"styles": {
"label": {
"font-family": "Lato, sans-serif"
},
"select": {
"font-family": "Lato, sans-serif"
}
},
"googleFonts": [
"Lato",
"Lato"
]
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-40px"
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>

 

 

Accepted Solution (1)

Accepted Solutions
ColorAndCord
New Member
1 1 3

This is an accepted solution.

I found an odd solution to fix the image resolution. 

at the top of buy button code you'll see the 

 

var scriptURL = "https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js"

 

 
 
what you want to do is go to that link and save the file and add it to your project and then change the
scriptURL so it references your local file in your project instead of the shopify one.
 
for me it looks like 
 

 

var scriptURL = './buy-button-storefront.min.js';

 

 
then what you want to do is go into the file, and hit cmd/control + f to search for "240px" it should be "width:240px" , change that 240px to whatever desired resolution you want. Save and when you load the site the view product should have the higher resolution.

 

View solution in original post

Replies 14 (14)
saltwaterdesign
Tourist
10 1 3

Were you able to find a solution to this? I wish I could help, but I am also looking for a solution to this. 

Maximus000
Tourist
6 0 4
Hi,

Unfortunately no.

It's something the Shopify developers should fix, but I don't know if they
are working on it.

It would be helpful though if you also submit a support ticket highlighting
the same issue.

Maybe they will then pay attention to it
ryaneddylutz
Tourist
6 1 2

So, there is STILL no way to improve "but button" image resolution, or decrease image compression as of mid 2019???

Please tell me there is a solution...

parulvadehra
New Member
3 0 0

Hi - did you manage to find a solution? 

Maximus000
Tourist
6 0 4
No, the issue persists.

It's a bug in the app. Have brought this to the attention of the Shopify
devs, but unfortunately they don't seem to be bothered to fix it..
parulvadehra
New Member
3 0 0

Are you using an alternate tool then? Image quality is critical to success here. 

Maximus000
Tourist
6 0 4
No. Don't know of another tool offering the same functionality. So still
use it, but as you say, it's not ideal...
doggoroad
New Member
1 0 1

I also have the same issue 😞

ColorAndCord
New Member
1 1 3

This is an accepted solution.

I found an odd solution to fix the image resolution. 

at the top of buy button code you'll see the 

 

var scriptURL = "https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js"

 

 
 
what you want to do is go to that link and save the file and add it to your project and then change the
scriptURL so it references your local file in your project instead of the shopify one.
 
for me it looks like 
 

 

var scriptURL = './buy-button-storefront.min.js';

 

 
then what you want to do is go into the file, and hit cmd/control + f to search for "240px" it should be "width:240px" , change that 240px to whatever desired resolution you want. Save and when you load the site the view product should have the higher resolution.

 

Crivas
New Member
1 0 0

Hello  

 

achieve the same solution, however I am not the most experienced coder. I mostly use html and css. 

Can you clarify for me where I am supposed save the url file to my project in shopify? 

Can you also clarify if this is something I have to do for every buy button?

We are using shopify Lite and adding buy buttons to our squarespace site, I'm not sure if that changes anything.

Thank you in advance,

Chris

Maximus000
Tourist
6 0 4

Thank you so much for this input!   This has helped me put me on the right track and figure out the solution.

Allow me to expand on the proposed solution, in order to make it more understandable for people without any coding skills (like myself) and to avoid confusion regarding the given answer.

1) Clarification: the method proposed by ColorAndCord is absolutely right. However, if you want to increase the size of the cart image (i.e. the variant images shown after clicking on the 'View Product' button, you'll need to make a different change than the one mentioned in the answer of ColorAndCord.

More in particular, in your .js file you'll need to cmd/control + f to search for "280px" (not 240px). You should get 4 hits. You'll need to change the first hit (280px) to the desired format, for example I changed it to 480px which looks pretty good. See piece of code below:

{iframe:!0,buttonDestination:"cart",isButton:!1,layout:"vertical",manifest:["product","option"],width:"480px",order:

2) What is meant by 'adding it to your project' (answer to Chris's question):

If you're using the buy button on a Squarespace website, you'll need to upload the modified (see point 1)  .js file to you Squarespace theme files.

So first you go to the original link in you browser: 

https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js

Then you copy the text.

Then you open 'TextEdit' (if you're using a Mac) and paste the copied code.   

Make the change explained in point 1 above.

Save the file as a .js file (name the file as you desire, but make sure to put .js at the end).

Log in to your Squarespace dashboard and navigate to the HTML code editor. There should be an option somewhere to upload HTML files. (I don't use Squarespace)

Upload your .js file.

Figure out the path to the .js file which you've just uploaded to your theme files.

Finally, replace the original the destination link at the top of the Buy Button HTML code with the path to the .js file which you've uploaded in your Squarespace theme files:

var scriptURL='DESTINATION PATH';

Save the change.  Now the image issue should be fixed.

Hope this helps.

Tikva
New Member
1 0 2

Thanks so much to you all for finding this solution and explaining it to where I could follow (I have no coding experience)

I use Squarespace, and am using Shopify Buy Button Collection pages to add commerce to my site. I wrote down really specific instructions for myself for the next time I need to do this, and I'll post them here in case someone else who doesn't know coding, or what a .js file is, needs them.

----------------------------------------------------------------------

To alter size of puny images from shopify buy button in Squarespace

 

-open the editing box for the shopify buy button code you have already pasted into you page.

at the top of buy button code you'll see the 

 

var scriptURL = "https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js"

Copy it from your code

 

  • Open a new web tab and paste the web address (remove: var scriptURL = ")
  • CMD/CTRL + A to select all, and Copy it
  • Open the Program TEXT EDIT on Mac, or Notepad on Windows
  • Paste
  • Press Cmd/Ctrl+F to open a search bar in your program. Type in 280px in to the bar, you should come up with 4 hits. Use the arrow keys to navigate to them.
  • Select each and replace 280px with your choice of size. I used 720px because the other coding (that we aren't touching) prevents displaying images past a certain size, and if you choose a really big size, like 2048px, I believe you risk slowing down your website every time a customer clicks to see an image.
  • After you replace each instance of 280px with your new size, click on Format in the top menu bar of the program and find "Make Plain Text" (versus Rich Text). This will let you save your file correctly. Notepad will probably have similar options.
  • Now go to the File-Save, and type in a name for your file, I suggest the name of the product or collection your buy button is for, but it must include .js at the end to specify the type of format. Don't mind the drop down format option, whatever's there will be overridden (my understanding…)
  • Uncheck If no extension is provided, use ".txt", and then Save.
  • Now that you have your file ready, open your squarespace, and make a new page.  Disable the page in page settings.
  • Click on Edit to add a section to your page, select Add Blank page, and an empty text box will appear. Write something, like the  name of your button
  • s product or collection, and selecting it, choose the Add Link option in the small menu bar above the text box.
  • Click the settings gear to add a file. You'll see a few options, the File option is at the bottom on your right, click that, and upload your modified .js file. When its uploaded, be sure to click to see a checkmark. Save.
  • Close the setting box, and you'll see the name of your file in a small dialogue box. Before you click apply, select and copy the name of your file, this is the link address.
  • Check the Apply, and save your changes to the page.
  • Now you'll edit the page settings for your original page holding the Shopify Buy Button coding. Click on that page's settings, and choose Advanced. In the Inject Page Header coding box, you will paste the address to your file you already copied. Now paste this in to the box before it: <script src='PATH'></script> 
  • Delete out PATH and replace it with your copied file address.
  • Make sure to leave the ' '

It should look something like this:

Screen Shot 2021-05-29 at 3.06.38 PM.png

 

 

  • Close the settings box and preview your updated Image Sizes. Bigger, better?

I hope so. 

  • If you have multiple buy buttons to fix (I have several collection pages grouped under my Shop Folder), just use that same disabled page, make some New text boxes adding in the names for each buy button page to help you keep track, and name each .js file to the corresponding page as well. Limit the confusion. Was that confusing?

 

  • Ps:
  • You might be able to move your still disabled page that's holding the modified .js file into Not Linked section of your web pages. Not sure if you delete the hosted file your Buy Button/Collection Page will still operate the same? Anyone know?

-------------------------------------------------

THANK YOU to the members of these forums who came up with the solution to this weird problem when Shopify didn't feel like bothering, who tested it, and who rewrote it to apply to Squarespace. ColorAndCord + Maximus000 + Ingrid89

 

This set of instructions is for myself in the future when I forget all that I read on the forums and I need to do it again, and for anyone who doesn't no ANYTHING about coding or .js or whatever else.

RebGar3991
New Member
1 0 1

Hello everyone, 

Thank you so much for this. You have helped tremendously. 

I am stuck however. I have followed the steps and have uploaded the new .js file to my theme under assets :assets/buy-button-collection.js

When I go to replace the destination URL in the code from this

var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';

to

  var scriptURL = ‘.’/buy-button-collection.js’

it does not work. What should my destination URL be?

Thank you !

 

 

 

Zulay
New Member
1 0 0

Can you do this for me? Zulyaris@yahoo.com