Jump to content

Customise font on buttons and cart page

Recommended Posts

Site URL: https://www.stuffbystink.com

Hi there!

I'm in V 7.1

I'd like to change the font on the button on my homepage where it says 'shop the breakfast collection' to my heading 4.

I would also like to change the font in my shopping cart to ALSO be heading 4.

My heading font incase it matters is Brandon Grotesque.

I'd like to increase the size of the circled text in my shopping cart as well.

1968119084_ScreenShot2022-03-17at10_52_42am.thumb.png.cefaf7cd264840130720c30f67bb9c8b.pngThankyou so much!

676477378_ScreenShot2022-03-17at10_52_28am.thumb.png.c31c6f0705a2c559b72d4ac77657f053.png

Link to comment
  • Replies 4
  • Views 525
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

6 hours ago, isobeleastwood said:

Site URL: https://www.stuffbystink.com

Hi there!

I'm in V 7.1

I'd like to change the font on the button on my homepage where it says 'shop the breakfast collection' to my heading 4.

I would also like to change the font in my shopping cart to ALSO be heading 4.

My heading font incase it matters is Brandon Grotesque.

I'd like to increase the size of the circled text in my shopping cart as well.

1968119084_ScreenShot2022-03-17at10_52_42am.thumb.png.cefaf7cd264840130720c30f67bb9c8b.pngThankyou so much!

676477378_ScreenShot2022-03-17at10_52_28am.thumb.png.c31c6f0705a2c559b72d4ac77657f053.png

Hi, add these codes to custom css (Design > Custom CSS) and let me know how it goes 🙂

Buttons:

.sqs-button-element--secondary, input.button.sqs-system-button.sqs-editable-button.sqs-button-element--primary {
  font-family: 'brandon-grotesque';
}

For the cart page text:

/** ITEM, QTY, PRICE **/
._K32yoEnv {
  font-size:13px !important;
}

/** PRODUCT NAME **/
.PZP5x7AEV a {
  font-size: 25px;
}

/** QUANTITY **/
input._YyCpcTMs {
  font-size:20px;
}

/** PRICE **/
.item-price {
  font-size: 20px;
}

/** SUBTOTAL **/
.N6WOGS95z {
  font-size:20px;
}

/** SUBTOTAL PRICE **/
.qA3jzADaQ {
  font-size:25px;
}

Please give this a 👍 if it helps. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

Link to comment

hey, i don't think it's actually changing the size of the text.. could be my computer being slow though.

how do i change the font on both the checkout page and the get in touch (form fill out) page to brandon grotesque as well? - the other one that is currently there is just super hard to read because its so thin.

490690628_ScreenShot2022-03-18at1_13_19pm.thumb.png.e1d5fac86e411722fe5a0d7aa49d005b.png286311538_ScreenShot2022-03-18at1_17_50pm.thumb.png.b4f4e00610bac9c82979a0b7c9fec8e7.png

Link to comment

Hey!

The coding worked to change the 'item, quantity, price', but the other ones won't show up on my site (won't change anything that is).

The px size is way larger, as you can see, but still showing as smaller than the 25px text above it (the item, quantity, and price that I was able to change).

1113919839_ScreenShot2022-03-18at1_24_10pm.thumb.png.ff1d26b2252a5db28aeaf538d1bdc8e2.png

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.