How do I add a background color to my minicart banner?

[megan_c]

Hi All,

I am looking to add a banner with a background colour to our mini cart .

I have been able to add the text in there... but would love to also add a background colour to this section of text so it looks like a banner.

Any help would be greatly appreciated!

[PageFly-Victor]

Hi @megan_c ,

This is Victor from PageFly - Landing Page Builder App.

You can try this code by following these steps: 

• Go to Online Store->Theme->Edit code
• Asset->component-mini-cart.css 
• Paste the below code at the bottom of the file

mini-cart{

padding:0 !important

}

mini-cart h2{

background:rgba(var(--color-accent-1-rgb),.5);
margin-top: 0 !important;

padding: 20px 8px !important;



}

mini- cart cart-items{

padding-left:8px !important;

padding-right:8px !important;



}

Hope my solution works perfectly for you!

Regards,

Victor | PageFly

[john_stones]

thanks for solution

[megan_c]

Hi Victor,

Thanks so much for your help on this - much appreciated!

I have just pushed live the text which we would like to highlight (it sits just under the My. Bag text).

Do you think it's possible to give this line of text a background colour and leave the My.Bag with a white background?

Thanks again for your help!

Megan

[PageFly-Victor · Accepted solution]

Hi @megan_c  , you're of utmost welcome!

You can replace old code with new code

mini-cart{

padding:0 !important

}

mini-cart h6{

background:rgba(var(--color-accent-1-rgb),.5);

margin-top: 0 !important;

padding: 20px 8px !important;

}

mini- cart cart-items,mini-cart h2{

padding-left:8px !important;

padding-right:8px !important;

}

Hope it helps!
Victor

[megan_c]

Thanks so much Victor. All fixed - really appreciate our help!

[PageFly-Victor]

Hi @megan_c ,

You are welcome. I'm glad when I can help you 😍