Shopify themes, liquid, logos, and UX
Hi everyone,
I am looking to add a custom border beneath my header on my Shopify page. The URL is campagnacoffee.com. I have a PNG image file that I would like to use as this border, and I've included a screenshot of it below. I would like this border to run across the top of my page below the header.
Hopefully someone can help me with this; it's much appreciated.
Sincerely,
Michael
Solved! Go to the solution
This is an accepted solution.
Hey @mmontella,
That would be more feasible.
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
The value "5px" is the size, reduce it or increase it according to what works for you.
<style>
sticky-header.header-wrapper.color-background-1.gradient {
border-bottom: 5px solid rgb(69, 125, 199);
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Hey @mmontella,
Something like this?
Hi @ThePrimeWeb ,
That's the right idea, though obviously I'd like to make the border much thinner than what you have pictured. Do you know what I mean? Is this possible and fairly easy to do?
All the best,
Michael
Hey @mmontella,
I would say it's a "hack" way of doing it, rather than the proper way. That's what makes it easier. The image is in it's original size. I have not amended it. Maybe you'd want to use a smaller image?
Hm, I get it. If we can't get the image to look quite right, what about just a simple, thick line under the header? How would I add that?
This is an accepted solution.
Hey @mmontella,
That would be more feasible.
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
The value "5px" is the size, reduce it or increase it according to what works for you.
<style>
sticky-header.header-wrapper.color-background-1.gradient {
border-bottom: 5px solid rgb(69, 125, 199);
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Okay, that worked; it's a pretty good fix for the time being, as I wanted something to separate my menu from the rest of the webpage.
More generally: how possible is it to add "decorative flourishes" to Shopify pages? We have a whole design book of flourishes for our brand which I'd like to include in the website's design, though I'm not sure how possible this is.
I'm including a few more of the images here:
Hey @mmontella,
You would have to get custom development for multiple designs. Shopify in it's default is blank page where you add sections. There's no quick and easy way to alter the page design in that manner without altering code.
I wouldn't mind talking more in detail about the idea you have for your page. We can discuss futher in a PM, if you are keen of course.
Okay, that is good to know. Thank you for the information. Let me touch base with my team and see how high-priority such custom development is. I'll circle back as appropriate. Appreciate the help.
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024