After feedback from customers, I’ve been asked if we can change the colors of the delivery/pick-up toggles because people are having a hard time telling which they have selected. I don’t know how the colors all tie together in the themes and such, so wasn’t sure how to change it just for those two things to make it obvious which is selected. Any suggestions?

  • Certainly - the easiest way to do this is probably to add custom CSS.

    Assuming you’re on the orange theme (you should be on a child theme, though it’s not strictly necessary to do this), go to Design => Themes, select ‘Customize’ (the paintbrush icon) on your active theme, and then select the ‘Advanced’ tab. There you should see a box called ‘Add Custom CSS’.

    Entering this

    .local-control .btn-light.active{
 background-color: #000; //change this to the color you want
}

    into that box and hitting save should change the background color for the selected button. You can change the color of the unselected button using the .local-control .btn-light selector, and you should be able to change any other CSS values there as well (like font color, text size, etc).

    Generally speaking, you can change individual style values using this method if you’re worried about how changing the global theme colors will affect other parts of your site, but you need to be able to find the right selector class, which can sometimes be a bit non-trivial. I’ve found the easiest way is usually to use your browsers Inspector (on firefox, right click and element and hit ‘Inspect’, other browsers have other ways), looking for what element the CSS is actually being set on, and then backtracking from there.

    Hope it helps!

Certainly - the easiest way to do this is probably to add custom CSS.

Assuming you’re on the orange theme (you should be on a child theme, though it’s not strictly necessary to do this), go to Design => Themes, select ‘Customize’ (the paintbrush icon) on your active theme, and then select the ‘Advanced’ tab. There you should see a box called ‘Add Custom CSS’.

Entering this

.local-control .btn-light.active{
 background-color: #000; //change this to the color you want
}

into that box and hitting save should change the background color for the selected button. You can change the color of the unselected button using the .local-control .btn-light selector, and you should be able to change any other CSS values there as well (like font color, text size, etc).

Generally speaking, you can change individual style values using this method if you’re worried about how changing the global theme colors will affect other parts of your site, but you need to be able to find the right selector class, which can sometimes be a bit non-trivial. I’ve found the easiest way is usually to use your browsers Inspector (on firefox, right click and element and hit ‘Inspect’, other browsers have other ways), looking for what element the CSS is actually being set on, and then backtracking from there.

Hope it helps!

Thanks for being so helpful! I’ll try that and see if I can get something more noticeable.