Can you add a background to the Popup section

Can you add a background to the Popup section

kiburi-lifestyl
Excursionist
25 1 9

Wandering we would like to add our own artwork as the background in Popup section. Anyone have any ideas if this is possible.

 

Our store is www.kiburi.com.au 

Replies 11 (11)

round
Shopify Partner
113 18 10

@kiburi-lifestyl you want like this
 

round_0-1719647806467.png

 

let me know, and If you'd like to discuss this more, don't hesitate to send me a PM
Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.

GTLOfficial
Shopify Partner
263 50 51

Hello @kiburi-lifestyl 

Go to online store ---------> themes --------------> actions ------> edit code-------> theme.CSS
and add this code at the very end of your file.
(you can change the background color according to your need)

@media screen and (min-width: 641px) {
.cookie-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 30px 20px 25px;
background: wheat;
}
}

and the result will be
5.png

If this was helpful, hit the like button and mark the job as completed.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
kiburi-lifestyl
Excursionist
25 1 9

Appologies for late reply. thanks heaps for the help 🙂 . How would we change the text to white on the left in banner.  Not the Button in black and white. Just the text on the left. As if we change to Crimson, the text and the Privacy click through wont stand out.

GTLOfficial
Shopify Partner
263 50 51

Hi,
1) to change the back ground color to crimson.
Go to online store ---------> themes --------------> actions ------> edit code-------> theme.CSS
and add this code at the very end of your file.

@media screen and (min-width: 641px) {
  .cookie-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px 20px 25px;
    background: crimson !important;
  }
}

 

2) To change the text to white on the left in banner.
Go to online store ---------> themes --------------> actions ------> edit code-------> theme.CSS
and add this code at the very end of your file.

.cookie-bar__inner {
  color: #fff !important;
}

 

3) we change to Crimson, the text and the Privacy click through wont stand out. ---> your background color and privacy policy color are likely same so they don't stand out,  here i have made the privacy policy button black and on hover it will change to white. and will be quite visible on your background.

Go to online store ---------> themes --------------> actions ------> edit code-------> theme.CSS -----> line no 10338
Search this code

.rte a:not(.button) {
color: var(--link-color);
transition: color 0.2s ease-in-out;
-webkit-text-decoration: var(--text-link-decoration);
text-decoration: var(--text-link-decoration);
text-underline-position: under;
}

and replace with this code

.rte a:not(.button) {
color: #000 !important;
transition: color 0.2s ease-in-out;
text-decoration: var(--text-link-decoration);
text-underline-position: under;
}

 

and the result will be
2.png

If this was helpful, hit the like button and mark the job as completed.
Thanks

 

 

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
kiburi-lifestyl
Excursionist
25 1 9

Hi mate, Ive changed the codes to all above and the bar and text has all gone white. Have no idea whats wrong but the code looks all good.Screenshot 2024-07-01 at 2.54.17 PM.png

GTLOfficial
Shopify Partner
263 50 51

Your font color and background color are same.
You have not changed the background color.
check again.
1) to change the back ground color to crimson.
Go to online store ---------> themes --------------> actions ------> edit code-------> theme.CSS
and add this code at the very end of your file.

@media screen and (min-width: 641px) {
  .cookie-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px 20px 25px;
    background: crimson !important;
  }
}

and check the result.

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
kiburi-lifestyl
Excursionist
25 1 9

I now have this code all up in the bottom of theme.css. - Still background is white.

 

@media screen and (min-width: 641px) {
.cookie-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 30px 20px 25px;
background: crimson !important;
}
}
.cookie-bar__inner {
color: #fff !important;
}

GTLOfficial
Shopify Partner
263 50 51

Please check your inbox

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
kiburi-lifestyl
Excursionist
25 1 9

Id say your step 2 to me looks incorrect. Am i correct in saying that mate.

 

BSS-TekLabs
Shopify Partner
539 154 181

@kiburi-lifestyl 

- Here is the solution for you
- Please follow these steps:

step.png

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

.cookie-bar__inner {
     background-image: url(https://cdn.shopify.com/s/files/1/0539/6735/6095/files/kiburifooter.jpg?v=1718362488) !important;
    background-repeat: no-repeat;
    background-size: cover;
}

- Where "url(" ")" is the path to your art image

- Here is the result you will achieve:

BSSTekLabs_0-1719653300273.png

 

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

Made4uo-Ribe
Shopify Partner
6869 1637 2020

Hi @kiburi-lifestyl 

Do you mean the cookie pop? If it is check this one. 

  1. From you Admin page, go to Online Store > Themes
  1. Select the theme you want to edit
  2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  3. Then place the code below at the very bottom of the file.

 

.cookie-bar__inner {
    background-image: url(https://cdn.shopify.com/s/files/1/0539/6735/6095/files/kiburifooter.jpg?v=1718362488) !important;
}
.cookie-bar__text.rte p {
    color: white;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1719673901898.png

     

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.