Styling Floating Cart

Site URL: https://purposecon.squarespace.com/?password=pearler

I'm trying to style and reposition the floating cart. Any ideas? My codes don't seem to work:

.floating-cart {
  top: 20px !important;
  right: 20px !important;
}

It also doesn't seem to appear on non-shop related pages?

1 hour ago, pearler1570048501 said:

Site URL: https://purposecon.squarespace.com/?password=pearler

I'm trying to style and reposition the floating cart. Any ideas? My codes don't seem to work:

.floating-cart {
  top: 20px !important;
  right: 20px !important;
}

It also doesn't seem to appear on non-shop related pages?

Can you share the direct link to this page? I can not find it on your above link

3 hours ago, pearler1570048501 said:

Site URL: https://purposecon.squarespace.com/?password=pearler

I'm trying to style and reposition the floating cart. Any ideas? My codes don't seem to work:

.floating-cart {
  top: 20px !important;
  right: 20px !important;
}

It also doesn't seem to appear on non-shop related pages?

It has already right: 20px, so you need to use this code only

.floating-cart {
    top: 20px !important;
}

(I added !important)

Thanks very much. Do you know why it's not appearing on other pages? 

@tuanphan / @bangank36

The page is https://purposecon.squarespace.com/shop Pass: pearler

For positioning, this fixed it:

.floating-cart {
	top: 20px !important;
	bottom: auto !important;
}

@tuanphan Awesome, thank you 

Hi!

I'm having an issue where the CSS doesn't always seem to be active. When I view the site in edit mode, the css seems to apply. In an incognito tab, the css is not present. 

https://bluebird-orange-h4kp.squarespace.com/config/

Password: path

This is the CSS I'm using:

.floating-cart {
 background-color: #918771!important;
  color: white;
  border-radius: 100%;
bottom: 80px!important;
  right: 35px;
z-index: 99999999!important;
}

.floating-cart.hidden {
    display: block !important;
}

I'd also like to hide the cart on the shopping cart page, as it isn't necessary there.

On 11/1/2023 at 11:22 PM, jasbrandstudio said:

Hi!

I'm having an issue where the CSS doesn't always seem to be active. When I view the site in edit mode, the css seems to apply. In an incognito tab, the css is not present. 

https://bluebird-orange-h4kp.squarespace.com/config/

Password: path

 

This is the CSS I'm using:

.floating-cart {
 background-color: #918771!important;
  color: white;
  border-radius: 100%;
bottom: 80px!important;
  right: 35px;
z-index: 99999999!important;
}

.floating-cart.hidden {
    display: block !important;
}

I'd also like to hide the cart on the shopping cart page, as it isn't necessary there.

Move your code to bottom of CSS box, or add this code to Code Injection > Header

<style>
  .floating-cart {
 background-color: #918771!important;
  color: white;
  border-radius: 100%;
bottom: 80px!important;
  right: 35px;
z-index: 99999999!important;
}

.floating-cart.hidden {
    display: block !important;
}
</style>

Great, thank you. Is it possible to hide this on the shopping cart page?

On 11/3/2023 at 8:18 PM, jasbrandstudio said:

Great, thank you. Is it possible to hide this on the shopping cart page?

Use this code to Custom CSS

body#cart .floating-cart {
	display: none !important;
}

or this code to Code Injection

<style>
  body#cart .floating-cart {
	display: none !important;
}
</style>

Thank you! Sorry to be annoying, is there a way to make the cart appear only after something has been added to it?

1 hour ago, jasbrandstudio said:

is there a way to make the cart appear only after something has been added to it?

See my earlier post here:

Did this help? Please give feedback by clicking an icon below  ⬇️

This is great thank you so much!

I applied the styling to .floating-cart and now, when sqs-custom-cart is hidden, the background color applied to floating cart is displayed. I've tried applying this styling to sqs-custom-cart instead, but it doesn't really work as the cart quantity sits outside of that. Do you have any idea how I can overcome that?