Jump to content

Using Shopify Lite Buy Button Cart on all pages of Squarespace Website

Recommended Posts

  • 5 months later...

When you use Shopify Buy Buttons with your Squarespace store, the Shopify code should add a Shopify cart icon to the right side of your page. The Squarespace cart icon will not respond to changes in the Shopify cart and should be hidden to avoid confusion.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Hi Paul,

 

Thanks! Yes I noticed how it pops up on the right side when you put an item in the shopping cart. I've hidden the squarespace cart since it doesn't interact. But it would be so nice to have the Shopify cart up in the header (perhaps opposite to the navigation) at all times. Is that possible with css? I've already customized about everything and quite pleased with the result. This would just be a very nice extra. 

Link to comment
9 minutes ago, Ingrid89 said:

it would be so nice to have the Shopify cart up in the header at all times. Is that possible with css?

You haven't provided a link to your site so I wasn't able to test this, but it should be possible to position the Shopify cart in the top right by adding something like this to Design > Custom CSS:

.shopify-buy-frame--toggle.is-sticky {
  top: 33px !important;
}

Where 33px defines the position from the top of the page.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
36 minutes ago, Ingrid89 said:

It does indeed work, but only when you're at the shop page.

That will depend on the Shopify code that you've embedded and how you've done this 🙂.

If the code is called for every page, the cart will appear on every page too.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Alright, solved it. I added a blank section on my homepage, entered a code block with my Shopify code. Then I went to custom css and added the code below. And now the section is hidden but when I go to my shop page and add something to my shopping cart, the cart still shows on the home page. So thank you!!

/* Hide this on Mobile */
@media screen and (max-width:767px) {
	[data-section-id="enter-id-here"] {
		display: none;
	}
}
/* Hide this on Tablet - Desktop */
@media screen and (min-width:768px) {
	[data-section-id="enter-id2-here"] {
		display: none;
	}
}
Link to comment
  • 1 month later...

Site URL: https://www.wingandwool.com/egg-alchemy-skincare/p/magnesium-balm

I had to start using Shopify Lite's Buy Buttons to solve the Sales Tax calculation shortcomings of my Squarespace site.  With the buy buttons, a cart will show up on the right hand side of all product pages when anything is added to the cart, as you can see in the attached photo.

However, this disappears when you're on any page other than a product page.  I'd like to have the cart icon visible on all pages of the site. 

Someone offered this solution for solving the issue on a Wordpress site: "I embedded a "global" simple buy button in the template head and hid that button using CSS via the unique div ID for that component."

I don't know much about code, so I was hoping someone could tell me how to possibly do this on Squarespace?

Thank you so much!

Screen Shot 2021-07-03 at 6.38.12 PM.png

Link to comment
On 7/4/2021 at 5:44 AM, lcphoto said:

Site URL: https://www.wingandwool.com/egg-alchemy-skincare/p/magnesium-balm

I had to start using Shopify Lite's Buy Buttons to solve the Sales Tax calculation shortcomings of my Squarespace site.  With the buy buttons, a cart will show up on the right hand side of all product pages when anything is added to the cart, as you can see in the attached photo.

However, this disappears when you're on any page other than a product page.  I'd like to have the cart icon visible on all pages of the site. 

Someone offered this solution for solving the issue on a Wordpress site: "I embedded a "global" simple buy button in the template head and hid that button using CSS via the unique div ID for that component."

I don't know much about code, so I was hoping someone could tell me how to possibly do this on Squarespace?

Thank you so much!

Screen Shot 2021-07-03 at 6.38.12 PM.png

Here steps may help:

1. Pick any Product on Shopify, use Layout: Basic, to display on add to cart button

2. Copy the snippet, in the first line of it, you will notice a div with this format:

image.thumb.png.528a73f0630b9d5da1cc5cca14640f9a.png

Add hidden style to hide it from the document,

image.png.24904aa1c2a3cea9e913867fd53dd949.png

3. You may want to compress the snippet so it looks cleaner, then paste code to Settings->Advanced->Injection->Footer

HTML Minifier - Minify HTML and any CSS or JS included in your markup (willpeavy.com)

4. Save the code Injection Panel

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 month later...
  • zzlogan changed the title to Shopify and Squarespace: how to add a shopping cart icon in the Main Header that will link to Shopify Checkout

@tuanphan, the right side is where I'm trying to have the Shopify shopping cart located.  Right before and next to the Instagram logo in the Header Navigation.

 

Right now, we can only use Shopify checkout page and not the Squarespace checkout, because currently we only manage our inventory and orders via Shopify.  

 

Does this answer your question? And do you need anything else from me?

Link to comment
  • 2 months later...
On 7/4/2021 at 12:44 AM, lcphoto said:

Site URL: https://www.wingandwool.com/egg-alchemy-skincare/p/magnesium-balm

I had to start using Shopify Lite's Buy Buttons to solve the Sales Tax calculation shortcomings of my Squarespace site.  With the buy buttons, a cart will show up on the right hand side of all product pages when anything is added to the cart, as you can see in the attached photo.

However, this disappears when you're on any page other than a product page.  I'd like to have the cart icon visible on all pages of the site. 

Someone offered this solution for solving the issue on a Wordpress site: "I embedded a "global" simple buy button in the template head and hid that button using CSS via the unique div ID for that component."

I don't know much about code, so I was hoping someone could tell me how to possibly do this on Squarespace?

Thank you so much!

Screen Shot 2021-07-03 at 6.38.12 PM.png

Hello, I have just visited your site and seen that you have solved this problem, it looks great! Did you follow the instructions here to achieve this? I would like to solve this problem on my website too. Thankyou.

Link to comment
On 5/24/2021 at 8:07 PM, paul2009 said:

That will depend on the Shopify code that you've embedded and how you've done this 🙂.

If the code is called for every page, the cart will appear on every page too.

Hello Paul, I would like to have my shopify cart show up on every page and not just the pages that have the buy it now button, do you mind explaining which shopify code to use and where to put it please? Thankyou so much.

Link to comment
On 11/1/2021 at 3:51 PM, BelleRebelle said:

I would like to have my shopify cart show up on every page

If you want to do this properly you'll need code that is specific to your Shopify store. I do not recommend using the method suggested earlier in this thread (to add a buy button code to every page and hide it) because you'll be slowing down your site unnecessarily and could cause other issues.

Edited by paul2009
edited for clarity

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
43 minutes ago, paul2009 said:

I'd love to share a code that anyone could use, but this is specific to each Shopify store. If you can provide a link to one of your buy buttons, one of us can edit it and extract the section that you need.

As an aside, I did see one person suggest adding the buy button code to every page, but I don't recommend this approach as you'll be slowing down your site unnecessarily and could cause other issues.

Hello, Oh thank you so much for the response, maybe you are right it is not a good idea if it will slow down the site etc.

Link to comment
  • 2 months later...
On 7/5/2021 at 5:35 AM, bangank36 said:

Here steps may help:

1. Pick any Product on Shopify, use Layout: Basic, to display on add to cart button

2. Copy the snippet, in the first line of it, you will notice a div with this format:

image.thumb.png.528a73f0630b9d5da1cc5cca14640f9a.png

Add hidden style to hide it from the document,

image.png.24904aa1c2a3cea9e913867fd53dd949.png

3. You may want to compress the snippet so it looks cleaner, then paste code to Settings->Advanced->Injection->Footer

HTML Minifier - Minify HTML and any CSS or JS included in your markup (willpeavy.com)

4. Save the code Injection Panel

 

Hi! Unfortunately this didn't work out, any other instructions?

 

Link to comment
  • 1 year later...
  • 2 months later...
  • 2 months later...
On 9/12/2023 at 8:42 PM, cristobalfredes said:

I did what @Beyondspace suggested and it worked 🙂

Glad to hear!

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.