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

Site URL: http://www.mjlifestyle.com

Hello, 

I'd like to have a shopping cart icon that is connected to my shopify store in the header navigation—is this possible?  Any CSS advise?

TIA

Did you manage to find a solution? I would like to know this as well!

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.

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. 

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.

Thanks! It does indeed work, but only when you're at the shop page. It disappears once I return to the home page of my website (https://www.guimauve.nl password = ingrid)

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.

I see! Thank you!

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

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!

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!

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:

Add hidden style to hide it from the document,

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

Site URL: https://pomegranate-badger-p3wd.squarespace.com/

Hi, I'm trying to add a Shopify link / cart icon to my site header.  So that when someone clicks on the logo, it will open up the checkout page on the side.  Please see attached. 

Any ideas on this? 

Hi. Right side is Shopify Checkout Page or Squarespace 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?

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!

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.

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.

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.

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.

Hi! I was wondering also with what code I can have the Shopify button chart staying on all my Squarespace pages. Anyone has an idea? Thank you so much!

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:

Add hidden style to hide it from the document,

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?

Hi! I was wondering if someone found out how to keep your Shopify buy button chart on other pages of your Squarespace website. It seems it only works on the product pages that are injected with the button code. I would like to keep it on the right side also when browsing other pages like blogs etc.

Thank you so much!

Has anybody got an answer to this yet?

On 7/10/2023 at 7:29 AM, danielweeks said:

Has anybody got an answer to this yet?

I did what @Beyondspace suggested and it worked 🙂

On 9/12/2023 at 8:42 PM, cristobalfredes said:

I did what @Beyondspace suggested and it worked 🙂

Glad to hear!