Jump to content

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

Recommended Posts

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? 

343297245_Capturadeecra2020-11-28as20_36_06.thumb.png.9de300e4d2e5ecde5f93be7fd10f096f.png

 

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: 

2098230202_Capturadeecra2020-11-28as20_37_47.thumb.png.4ee2e8fcc3eeecbbbe362382e1785eb8.png

 

 

Your help would save my day!!!

Thank you so much! 

Link to comment

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 best , and see my profile. Thanks for your support!

Link to comment
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 by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 5 months later...

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
  • 7 months later...
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
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? 

343297245_Capturadeecra2020-11-28as20_36_06.thumb.png.9de300e4d2e5ecde5f93be7fd10f096f.png

 

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: 

2098230202_Capturadeecra2020-11-28as20_37_47.thumb.png.4ee2e8fcc3eeecbbbe362382e1785eb8.png

 

 

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
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.