Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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
This is an accepted solution.
This method is very good. It’s just that height is missing in your code.
It is impossible to achieve without changing the code.
I know it‘ll require code, I just don‘t want to mess with it before consulting this forum. Do you have any pointers?
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
This is an accepted solution.
This method is very good. It’s just that height is missing in your code.
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025