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

Store Design
,
1

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!

2

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;

}

PageFlyVictor_0-1671074848639.png
PageFlyVictor_0-1671074848639.png1366×768 162 KB

Hope my solution works perfectly for you!

Regards,

Victor | PageFly

3

thanks for solution

4

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

5

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;

}

PageFlyVictor_0-1671160325293.png
PageFlyVictor_0-1671160325293.png817×652 146 KB

Hope it helps!
Victor

6

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

7

Hi @megan_c ,

You are welcome. I’m glad when I can help you :heart_eyes: