Edit free shipping label

abcxytz1234
Explorer
77 1 24

Hi 

 

can someone help me to change the background free shipping label color and also font style to Monserrat Bold? 

it shows up as green background button on iPad and red background on mobile and desktop. See screenshots 

41B9161D-DA12-4760-A4B8-3B301F24AFB0.png

 

F7987365-7A93-4DBD-B50C-07E9AE7A1D53.png

I would like it to be in all capital letters in Monserrat bold (same white color text) and with black background. 

website link: https://doodlemedo.com

 

if you need developer access, feel free to email me at hello@doodlemedo.com

 

Thanks!!

0 Likes
abcxytz1234
Explorer
77 1 24
Click to expand...
 

Also can help to make the text in the center of the button box? And make the box thicker, like other buttons on the site? Maybe padding issue? 

0 Likes
g33kgirl
Shopify Partner
277 76 91

@abcxytz1234, you can add this add at the end of your CSS file in Assets:

.free-shipping {
    background: #000;
}

.free-shipping__text {
    font-family: var(--button-family);
    font-size: var(--button-size);
    line-height: var(--button-line-height);
    font-style: var(--button-style);
    letter-spacing: var(--button-letter-spacing);
    font-weight: var(--button-weight);
    text-transform: var(--button-transform);
    text-align: center;
    padding: 5px;
}
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
abcxytz1234
Explorer
77 1 24

Hi!

 

Thanks so much for this! I have added it to my min.css asset but not able to change the background color of the button (not able to override the theme button background color). See attached screenshot. Can you help? Thanks!!

 

abcxytz1234_0-1623569637586.png

 

0 Likes
abcxytz1234
Explorer
77 1 24

It has green button background color on mobile and desktop but black on ipad.  

0 Likes
g33kgirl
Shopify Partner
277 76 91

@abcxytz1234 it's not showing green on my laptop. It could be cached on your browser. Try opening your website in incognito mode and see if it displays black colour background.

In the meantime however, you can use this code to force it to display black colour at all times:

 

.free-shipping {
    background: #000 !important; 
}

 

 

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
abcxytz1234
Explorer
77 1 24

@g33kgirl Thanks!! Do you know how I can edit the code to change the font color and icon color?

0 Likes
g33kgirl
Shopify Partner
277 76 91

@abcxytz1234 you can use the CSS selector color to change font and icon colour. So for eg, if you want to change free-shipping text colour the code would look like this:

.free-shipping__text {
    color: #FFF; 
}
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
abcxytz1234
Explorer
77 1 24

@g33kgirl I don’t code unfortunately so I’m a noob…

 

do I just add this? Below the background color? 


{ color: #fffff !important; }

 

0 Likes
g33kgirl
Shopify Partner
277 76 91

@abcxytz1234 yes

.free-shipping {
    background: #000 !important; 
    color: white;
}
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes