How can I add a background image to my Debutify theme header?

Store Design
1

Hi!

I want to add my header a cow pattern background image, because i was already abel to do in my checkout page and i love it. Im using Debutify theme!

Képkivágás2.JPG
Képkivágás2.JPG634×778 56.1 KB

Like this:

Képkivágás.JPG
Képkivágás.JPG681×840 35.6 KB

2

HI @Laccers

Send me your store url.

1 Like
3

https://milki-bottle.myshopify.com/products/milki-bottle-1

4
  1. Go to Online Store->Theme->Edit code
  2. Asset->theme.scss Or theme.css->paste bellow code in bottom of file
.site-header{
    background-image: url(https://ae01.alicdn.com/kf/Uc0fb3a8…D.jpg);
    background-position: center;
     background-size: cover;
}

Note: change url as you want.

you can upload image in setting->file and copy url.

1 Like
5

Looking good but now how do i change the icons color?

Képkivágás3.JPG
Képkivágás3.JPG609×800 42.7 KB

6

Which icon color you mean? logo?

if so you can upload your logo transparent.

you can make transparent logo here

1 Like
7

Not my logo, The search, cart, ect ..icon

8

Add this css:

.site-nav__link, .site-header__logo-link {    color: white !important;}

You can change color as you want

Note:

If not work then you have to remove below code from theme.scss file

.site-nav__link, .site-header__logo-link {
    color: #202020 !important; }

Find and remove above code if my given code not work.

1 Like
9

Thank you for your help!

Have a great day!

10

How to do i move my sidebar from the right to the left side using the debut theme? Also, how do i change the cart icon for my store?

11

For side bar do you mean menu icon on mobile?

For cart icon you can find cart icon in Section->header.liquid file,

12

hi! I am using the dawn theme and have inputed this code but it won’t add my image. Just needed some help on this

13

Hi @tytay

for dawn theme you can try this code

.header {   background-image: url(https://cdn.shopify.com/s/files/1/0046/2156/6019/files/logo_small_071a9333-5026-42e0-b570-0914768cf642.png?v=1650033637&width=500);
    background-position: center;
    background-size: cover;}

Note: change with your image

14

Hi! @Jasoliya

Would this code also work for the header of just the shop page? and keep my current header on all other pages

15

Yes it will work, if not then send me url