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

Solved
Highlighted
Tourist
6 0 3

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>

 

 

Highlighted
Tourist
10 1 1

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

0 Likes
Highlighted
Tourist
6 0 3
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
Highlighted
New Member
1 0 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...

Highlighted
New Member
3 0 0

Hi - did you manage to find a solution? 

0 Likes
Highlighted
Tourist
6 0 3
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..
0 Likes
Highlighted
New Member
3 0 0

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

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

I also have the same issue :(

0 Likes
Highlighted
New Member
1 1 2

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.