Can you add a background to the Popup section

[kiburi-lifestyl]

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

[GTLOfficial]

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

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

[BSS-TekLabs]

@kiburi-lifestyl

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

• 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:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[Made4uo-Ribe]

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
2. Select the theme you want to edit
3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
4. 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:
• 

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

[kiburi-lifestyl]

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]

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

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

[kiburi-lifestyl]

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.

[GTLOfficial]

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.

[kiburi-lifestyl]

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;
}

[kiburi-lifestyl]

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

[GTLOfficial]

Please check your inbox