Styling the cart page

Site URL: https://disc-snail-sk6j.squarespace.com

Hi,

I'd like to make some basic adjustments to the shopping cart page of my site but there doesn't seem to be an obvious way to change these elements in the 'Site Styles' menu. I have managed to change everything else so not sure why there is no control over this element. Especially as the default sizes are so small.

Excuse my naivety but is there some generic CSS I can add to the 'Custom CSS' section with values for 'text size' and 'text colour'?

Thanks,

Tom.

Your site is private please set up a site-wide password,.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Hi Creedon,

Thanks for your swift response, password is: 'Fevroniapass'.

Many thanks,

Tom.

Quote

but there doesn't seem to be an obvious way to change these elements in the 'Site Styles' menu

You are correct. SS handling of cart fonts and colors is a bit of a mess. The font family comes from the setting in the SS interface. For the size of the fonts there are no SS interface controls. The colors I believe come from the default color theme for the site. But which color theme that is depends on several factors on how your site is set up. In my experience it is usually Lightest 1 that is my default but others folks have found otherwise.

Quote

is there some generic CSS I can add to the 'Custom CSS' section with values for 'text size' and 'text colour'?

To avoid all the weirdness I think it is best to just use custom CSS to control the cart. It can be tricky though.

Here is some CSS to get you started. Add the following to Design > Custom CSS.

#cart {

  color : black;
  
  }

#cart ._3zzV1fDFF, /* item column label */
#cart ._1MDgZZPKX a, /* item title */
#cart ._1MjICGhm_, /* item variant info */
#cart .LwuRxog4z, /* item quantity */
#cart ._26eXSmpLx, /* item price */
#cart ._2JFeDgZcv /* subtotal */

  {
  
    font-size : 150%;
    
    }

This is for v7.1.

Let us know how it goes.

The CSS worked perfectly. Thanks so much for taking the time to help me out!