Guest Posted November 28, 2020 Share Posted November 28, 2020 Hello, I am using Squarespace to design this website, but all products are on Shopify. As a code feature from Shopify I am using the "buy button" code and adding the products to my page. I have two questions when comes to customizing the layout that is insert in the code generated from Shopify. On this single product code from Shopify (applied already on Squarespace), I want to change the color of the background selector field. I want it to be transparent or the same color of the background (not the white box). Is it possible to change that? 2 - Now when I create a collection code "buy button" with all products, and click on ADD TO CART a pop-up with appear, unfortunately the product view on this pop up is very poor, images very pixelated. Is there any way I can have this pop up with a better quality on the images and wider? Or instead of showing the pop-up go to the an individual page only for that item? ex of the pop-up: Your help would save my day!!! Thank you so much! Link to comment
creedon Posted November 29, 2020 Share Posted November 29, 2020 I don't have any specific answers for you. However I was just reading some Shopify info today and one thing I came across is that if your button doesn't look the way you want you have to start all over again with a new button to fix it. I don't know if that is really true but it sounded painful and that there wasn't a lot of hope fixing from the embedded code side. If I read that wrong someone please let us know. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
paul2009 Posted November 29, 2020 Share Posted November 29, 2020 (edited) On 11/28/2020 at 8:47 PM, joaop2020 said: On this single product code from Shopify (applied already on Squarespace), I want to change the color of the background selector field. I want it to be transparent or the same color of the background (not the white box). Is it possible to change that? As @creedon correctly states, you must decide all of your content and style options BEFORE you copy the Buy Button code from Shopify. There is no ‘connection’ between Shopify and Squarespace, and therefore no way to ‘update’ the choices that you made when you created the Buy Button. You must create it again and make the required style choices again. If you only have less than 25 products (excluding variant options) then you may prefer to create a Product/Store page on Squarespace and add your product titles, descriptions and images to Squarespace too. Once you have done this, you can use the Buy Button solely for the ‘add to cart’ button, quantity and variant options. By doing it this way, you will have the best of the Squarespace design features, whilst retaining the cart/checkout/payment/shipping options of Shopify. However, if you have more products, or the inventory changes often, this may be administratively burdensome. Edited May 13, 2022 by paul2009 creedon 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
Ingrid89 Posted May 11, 2021 Share Posted May 11, 2021 Hi, I am by no means a css/html expert, but I did find the solution to your 2nd question. https://community.shopify.com/c/Shopify-APIs-SDKs/Product-image-issue-when-embedding-Shopify-Buy-Button-on-3rd/m-p/826203#M53654 Here (especially on page 2) someone explains in detail how to change the html url file. You open the css of your Shopify button (which you've pasted into squarespace), then you see a url - open this in a new tab and copy paste the whole thing into word or pages. Cntrl + f and look for 280 - change 280 in 1024 or whatever you want it to be (I changed all four of them into 2048px). Save the whole document as a .js file. Then go to Squarespace, create a new page (disable it), and create a text block and type a word, whatever word. Link it and instead of linking it to a url, upload the new .js file you just created. Add it to the word you just typed, copy the path which is displayed /s... something. And then go to the page settings and go to advanced. Type: <script src="PATH"></script> (customize the PATH with the path that you've just copied from the link file). Save and go back to your Shopify buy button css. Replace the url which you've used in the beginning to obtain the text for the JS document with the new path you've still got copied - the /s/PATH.js thing. Then save and voila, you're popup images should finally look like the way people intended photos to look in the 21st century. Again, I'm no expert on this, just followed everything they said in the link shared above. But it did help me out of this misery. Perhaps it will help you as well. Link to comment
IndigoBolt11 Posted December 21, 2021 Share Posted December 21, 2021 On 11/28/2020 at 9:11 PM, creedon said: I don't have any specific answers for you. However I was just reading some Shopify info today and one thing I came across is that if your button doesn't look the way you want you have to start all over again with a new button to fix it. I don't know if that is really true but it sounded painful and that there wasn't a lot of hope fixing from the embedded code side. If I read that wrong someone please let us know. @creedon could you look into my recent shopify button css question? thanks! Link to comment
IndigoBolt11 Posted December 21, 2021 Share Posted December 21, 2021 On 11/28/2020 at 3:47 PM, joaop2020 said: Hello, I am using Squarespace to design this website, but all products are on Shopify. As a code feature from Shopify I am using the "buy button" code and adding the products to my page. I have two questions when comes to customizing the layout that is insert in the code generated from Shopify. On this single product code from Shopify (applied already on Squarespace), I want to change the color of the background selector field. I want it to be transparent or the same color of the background (not the white box). Is it possible to change that? 2 - Now when I create a collection code "buy button" with all products, and click on ADD TO CART a pop-up with appear, unfortunately the product view on this pop up is very poor, images very pixelated. Is there any way I can have this pop up with a better quality on the images and wider? Or instead of showing the pop-up go to the an individual page only for that item? ex of the pop-up: Your help would save my day!!! Thank you so much! hi! do you have the css code you used to get your button under the title? Link to comment
tuanphan Posted December 25, 2021 Share Posted December 25, 2021 On 12/21/2021 at 9:45 PM, IndigoBolt11 said: hi! do you have the css code you used to get your button under the title? Can you share link to product where you added Shopify button? We can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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