How can I add an image to the Upscale Theme header?

Solved

How can I add an image to the Upscale Theme header?

benidesign
Shopify Partner
9 0 1

Hi! I'm trying to add an image to the header and the theme code looks much scarier than I thought and don't want to mess with myself. 

 

Maui made is the second image I want to place on the right side of the header. 

 

Thanks for any pointers.

 

MGMM Website Header.png

Accepted Solutions (2)

oscprofessional
Shopify Partner
15938 2383 3092

This is an accepted solution.

Hello @benidesign 

If you prefer not to modify your Liquid code, there is an alternative method available. Follow the steps outlined below.

 

1. Add the below code in theme.css at the bottom of the file

 

.header-icons:before {
    content: "";
    background-image: url(https://www.maui-girl.com/cdn/shop/files/maui-girl-logo-inline_2x_e2976d42-aade-4756-bee8-8aae364f23f3_250x.png?v=1683919658) !important;
    width: 200px;
    text-align: right;
    background-position: center;
    background-size: cover;
    margin-right: 20px;
}

 

 

2. Replace the image URL with the one you want to use for adding the image

 

oscprofessional_0-1709193524922.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

wo
Shopify Partner
112 26 22

This is an accepted solution.

This method is very good. It’s just that height is missing in your code.

View solution in original post

Replies 5 (5)

wo
Shopify Partner
112 26 22

It is impossible to achieve without changing the code.

benidesign
Shopify Partner
9 0 1

I know it‘ll require code, I just don‘t want to mess with it before consulting this forum. Do you have any pointers?

oscprofessional
Shopify Partner
15938 2383 3092

This is an accepted solution.

Hello @benidesign 

If you prefer not to modify your Liquid code, there is an alternative method available. Follow the steps outlined below.

 

1. Add the below code in theme.css at the bottom of the file

 

.header-icons:before {
    content: "";
    background-image: url(https://www.maui-girl.com/cdn/shop/files/maui-girl-logo-inline_2x_e2976d42-aade-4756-bee8-8aae364f23f3_250x.png?v=1683919658) !important;
    width: 200px;
    text-align: right;
    background-position: center;
    background-size: cover;
    margin-right: 20px;
}

 

 

2. Replace the image URL with the one you want to use for adding the image

 

oscprofessional_0-1709193524922.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
wo
Shopify Partner
112 26 22

This is an accepted solution.

This method is very good. It’s just that height is missing in your code.

MelbinSebastian
Visitor
1 0 0

If i wanted add to another image to its left side,and right side with logo being in the centre,can u help me for that.Screenshot 2024-06-26 164335.png

 

Screenshot 2024-06-26 164335.png

 

 

Screenshot 2024-06-26 164335.png