Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


joaop2020

Question

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 post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 ther

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 ove

Posted Images

3 answers to this question

Recommended Posts

  • 0

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 post
  • 0
12 hours ago, 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. 
 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

Link to post
  • 0

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 post

Create an account or sign in to comment

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


×
×
  • Create New...