EmilyMcCreative Posted March 26, 2023 Share Posted March 26, 2023 Hi all! I am working on building an online boutique. I have my products on Shopify and have them embedded on my Squarespace site. The product photos themselves look high-quality, but when I embed them using the Shopify "Buy Button", the quality diminishes. When just browsing the photos, they look normal.. but when I click "View Product" and the item photo gallery opens up, all of the photos are super blurry/pixelated. I have gone through SO MANY forms on Shopify as well as Squarespace trying to find a solution. I have tried every solution I've found but none of them have worked. I have also reached out to both of their help contacts. I will attach photos of my browsing mode where you can see the normal quality pics as well as the blurry pics that come up when I click "View Product". Also, here is the buy button code from my "Featured" section: <div id='collection-component-1679790008145'></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: '756e15.myshopify.com', storefrontAccessToken: 'c936562246f4f7e9281fff5033fd6358', }); ShopifyBuy.UI.onReady(client).then(function (ui) { ui.createComponent('collection', { id: '436859339060', node: document.getElementById('collection-component-1679790008145'), moneyFormat: '%24%7B%7Bamount%7D%7D', options: { "product": { "styles": { "product": { "@media (min-width: 601px)": { "max-width": "calc(33.33333% - 30px)", "margin-left": "30px", "margin-bottom": "50px", "width": "calc(33.33333% - 30px)" }, "img": { "height": "calc(100% - 15px)", "position": "absolute", "left": "0", "right": "0", "top": "0" }, "imgWrapper": { "padding-top": "calc(75% + 15px)", "position": "relative", "height": "0" } }, "title": { "font-family": "Lato, sans-serif", "color": "#000000" }, "button": { "font-family": "Lato, sans-serif", "color": "#f6f5f3", ":hover": { "color": "#f6f5f3", "background-color": "#000000" }, "background-color": "#000000", ":focus": { "background-color": "#000000" }, "padding-left": "24px", "padding-right": "24px" }, "price": { "font-family": "Lato, sans-serif", "color": "#0b0000" }, "compareAt": { "font-family": "Lato, sans-serif", "color": "#0b0000" }, "unitPrice": { "font-family": "Lato, sans-serif", "color": "#0b0000" } }, "buttonDestination": "modal", "contents": { "options": false }, "text": { "button": "View product" }, "googleFonts": [ "Lato" ] }, "productSet": { "styles": { "products": { "@media (min-width: 601px)": { "margin-left": "-30px" } } } }, "modalProduct": { "contents": { "img": false, "imgWithCarousel": true, "button": false, "buttonWithQuantity": true }, "styles": { "product": { "@media (min-width: 601px)": { "max-width": "100%", "margin-left": "0px", "margin-bottom": "0px" } }, "button": { "font-family": "Lato, sans-serif", "color": "#f6f5f3", ":hover": { "color": "#f6f5f3", "background-color": "#000000" }, "background-color": "#000000", ":focus": { "background-color": "#000000" }, "padding-left": "24px", "padding-right": "24px" }, "title": { "font-family": "Helvetica Neue, sans-serif", "font-weight": "bold", "font-size": "26px", "color": "#4c4c4c" }, "price": { "font-family": "Helvetica Neue, sans-serif", "font-weight": "normal", "font-size": "18px", "color": "#4c4c4c" }, "compareAt": { "font-family": "Helvetica Neue, sans-serif", "font-weight": "normal", "font-size": "15.299999999999999px", "color": "#4c4c4c" }, "unitPrice": { "font-family": "Helvetica Neue, sans-serif", "font-weight": "normal", "font-size": "15.299999999999999px", "color": "#4c4c4c" } }, "googleFonts": [ "Lato" ], "text": { "button": "Add to cart" } }, "option": {}, "cart": { "styles": { "button": { "font-family": "Lato, sans-serif", "color": "#f6f5f3", ":hover": { "color": "#f6f5f3", "background-color": "#000000" }, "background-color": "#000000", ":focus": { "background-color": "#000000" } } }, "text": { "total": "Subtotal", "button": "Checkout" }, "googleFonts": [ "Lato" ] }, "toggle": { "styles": { "toggle": { "font-family": "Lato, sans-serif", "background-color": "#000000", ":hover": { "background-color": "#000000" }, ":focus": { "background-color": "#000000" } }, "count": { "color": "#f6f5f3", ":hover": { "color": "#f6f5f3" } }, "iconPath": { "fill": "#f6f5f3" } }, "googleFonts": [ "Lato" ] } }, }); }); } })(); /*]]>*/ </script> Please let me know if you can help. I am so discouraged and really want to find a solution to this. Thank you so much. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment