Customize "Shopify's buy button" product page on Squarespace

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! 

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.

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. 
 

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. 

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!

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?

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