Jmontison

I FIXED IT! 

.header .header-actions-action--cart svg {opacity:0!important} .header-actions-action--cart .icon-cart-quantity {display:none} .header .header-actions-action--cart {background-image: url(https://static1.squarespace.com/static/63d1e9b20cb2274e46b41daa/t/65d1b8ea98788b4d155e7e8c/1708243179034/basket.png) !important; background-size: contain}

The important part I changed was:  {opacity:0!important}

I sent you the image and the way it's supposed to look through direct message.

It is hard to see because I'm trying to make the cart transparent through CSS, but it is still white -just on top of the image I uploaded. If you zoom in, you will see it!

Hello Tuanphan!

I've got the same problem. Can you help?

Here's the code I got: 

.header .header-actions-action--cart svg {stroke:transparent!important} .header-actions-action--cart .icon-cart-quantity {display:none} .header .header-actions-action--cart {background-image: url(https://static1.squarespace.com/static/63d1e9b20cb2274e46b41daa/t/65d1b8ea98788b4d155e7e8c/1708243179034/basket.png) !important; background-size: contain}

Even after I add !important (or use the same CSS code mentioned), it doesn't work.

WEBSITE: www.thebraveleap.com
PASSWORD: g

Please help 🙂

Creedon,

This is splendid! 👏

Indeed, I missed the section inside your code where you indicate the entry for a custom title. Brilliant! Very thoughtful.

Would you be able to direct me toward a code-dialog-javacript-html (honestly, I'm learning how to differentiate all of those, not sure which one is correct, sorry newbie over here!)

To help me customize the 'customer drawer' window that opens in the "account" section for members? That would be fantastic.

Thank you! 

Thank you Paul for all that info, that's great to know! 🙏

Creedon, if you have any code to install my own CSS to modify the 'customer drawer' I would be very grateful for that, too...

I understand I am asking for many things at once, so no pressure.
I'm just grateful for everybody's help on this journey of designing my own website. ☺️

Ah, Creedon...

This is magical! Thank you SO MUCH!!!!!

I am already figuring out how to make my own modifications, which is so satisfying! For the most part, it works.

I have other questions:

How do I modify content? For example, if I wish to change the title and button contents, where do I find this inside DevTools? I can't seem to find where that is...

What am I missing here?

Also... I understand this is iFrame -I don't understand yet what that means, but I know it's different from 'regular CSS'. 

Why are the custom fonts I uploaded in Squarespace not working in your code?

If I wanted to, would I be able to put 'display: none' for the button or the inputs, so that they are not visible? I have not succeeded.

 

AMAZING!

It worked! 😃 Thank you so much for taking the time to explain it to me. I didn't think it would be this simple to add CSS in your code, I was wrong! This is great!

I would love your help with further modifications if that's ok.

Would you be able to provide CSS (you can write any colour or font-family, and I can change them after) for:

-Custom content for Title

-Custom fonts for Title, Inputs, Button, "forgot password" and "create account" texts.

( I would like 'BRANDON GROTESQUE', but for some reason I cannot seem to make it work with this font, even though it is a part of Squarespace's fonts... for example, I have no problem with 'FUTURA'.)

-Custom color for Button background (and font)

-Custom color for all fonts

I think with this, I should be able to make all the modifications I need. 

Normally I would type the CSS myself, but since this is a little unknown to me, your help would be highly appreciated to make sure I got it right.

THANK YOU CREEDON!🙏


 

Thank you Creedon!

I have been struggling understanding the values I'm supposed to modify, and how to go about it... I have a fair understanding of CSS but JavaScript is still beyond me at this point (but I for sure would like to learn).

Hi there!

I would LOVE to customize the same things!

Background color, custom font, inputs, custom text, etc.

Any help is highly appreciated! 😃

www.thebraveleap.com
Password: g

This COMPLETELY fixed my issue.

Now, my shop will be all set up because of you!

Impeccable!👏

Thank you Tuanphan, you are spectacular!

🙏😇

Hello Tuanphan, 
You are a master at your craft!

I am deeply impressed by your skills and feel incredibly grateful for your help. Thank you! There are some modifications I need in order to complete the shop page if you can still offer me your generous help. 🙏

I will no longer be using ANY of the ADD TO CART BUTTONS. The Squarespace payment system doesn't work for what I need, unfortunately, so I have found a workaround that should work, thanks to your fantastic skills!

A) I need to remove ALL ADD TO CART BUTTONS both on the SHOP page and product description page, for every single product (without removing the buttons you've already created).

B) I need buttons just like the ones you created for products #1, #2, & #3 for every product. They are fantastic and exactly what I've been needing!

C) I would like to create more space over and under every buttons on the SHOP page. (See the red arrows in the picture).

THANK YOU! 😇

I solved it, yes!

I am still struggling with the problem of centring the number inside the background circle (shopping cart quantity), but I will reach out if I can't fix it myself.

I am very grateful for your help and checking in with me again. 😄

I have also updated my website to : https://www.thebraveleap.com/  password : g 

You mean add buttons (different url) + remove add to cart on Shop Page https://thefolkpath.com/shop? (for 3 products #1, #2, #3)

---------- YES (the new buttons can also be displayed on the description pages)

& don't add any buttons, and still keep add to cart on detail page (3 products, #1, #2, #3): https://thefolkpath.com/shop/p/free-session? 

-------------- NO, remove all "ADD TO CART" buttons on SHOP and PRODUCT DESCRIPTION page for products #1, #2, #3 

I have removed the other code (and tag "no-cart" for product #1, #2, #3 👍👍👍

 

Thank you Tuanphan! 

The code didn't do exactly as I hoped, but I figured out another way to get the effect I was looking for.

But I have another problem now.

Can you help me change the coloured section that's right above the header on mobile from black to WHITE on ALL PAGES?
 

SEE PICTURE, SECTION ABOVE RED LINE:

Yes! Exactly!

I want the colour to be black instead of white (like it is right now).

The problem is this:

The 3 first products must go through different booking/payment links (different links for each of them), so I need different buttons for them, replacing the ADD TO CART button. I would like the buttons replacing the ADD TO CART buttons to be displayed on the SHOP page (and not just on the description pages, like it is right now).

To be clear,

I DON'T want the 3 first products to go through the ADD TO CART payment, so they must be replaced by the new buttons with different URLs ONLY for the 3 first products.

Here's what I want:

On the SHOP page, I want products #1, #2 and #3 to display each different buttons with different URLs.

On the SHOP page, I want products #4 and #5 to display the regular ADD TO CART button.

Please let me know if you need more clarification 🙏
Thank you for your help Tuanphan!

 

Thank you!!! Just what I needed!

Can you please help me with problem #1 and problem #2 as well? I haven't figured out how to fix them.

(The opacity color of the page when overlay menu is open, and the position of the cart quantity number inside its circle background).

Thank you 🙏

Of course. 

I removed this code :

.tag-no-cart .sqs-add-to-cart-button, .tag-no-cart .product-quantity-input {
  display: none !important;
}

So that the 3 first products' "ADD TO CART" buttons would reappear and, as intended, be replaced by the button blocks in the description pages by using your code.

This is what it looks like (see picture 1 for the shopping page and picture 2 for the product descriptions).

Here is the link for product #1:

https://thefolkpath.com/shop/p/free-session

This didn't work unfortunately. 

As a matter of fact, would you also be able to modify the code you gave me to make it apply ONLY to the DESKTOP overlay menu?

😃

Thank you Tuanphan!

I was able to make adjustments that work both for desktop and mobile to extend the closing area of the overlay menu. 😃 Yay! And yes, indeed, I still need help with #1 and #2 if you are able to help. 

🙏

Update : I have added a desktop overlay menu, and I hope to have the same black opacity on the page too! At the same time, I would like to extend the closing clickable area on the desktop menu (if you try, you will see it is only on the far right end side that it works, it would be great to have the whole page outside the menu). Thank you ❤️

Exactly!!!!! Yes!!!!