Shopify themes, liquid, logos, and UX
Hi
I have 2 queries:
1) Can I add a text/button to the header and use it as a quick link to my online store /like a "Shop Now" button on my header/.
2) Can I make this header sticky?
I am using Boundless theme. Could anyone help?
Thanks
Tanyo
Solved! Go to the solution
This is an accepted solution.
Okay I see thank you for clarifying.
Of course both customizations are possible.
For the header link you'd have to customize header.liquid basically emulating the code of the other link-icons(cart and search) to add a new element
You should be able to see the code around line 51 if you have the latest version of boundless
https://shopify.com/admin/themes/current?key=sections/header.liquid&line=51
Always backup your theme before making changes
Possibly with code like the following:
<a href="https://google.com" class="site-header__link js-drawer-open-top">
<span class="icon" aria-hidden="true"></span>
<span class="icon__fallback-text">Description of your link or icon or action</span>
</a>
To make an icon or add an image is more advanced since the theme uses font icons , which you can find in theme.scss.liquid by searching for things like .icon-search
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
@Tanyo wrote:1) Can I add a text/button to the header and use it as a quick link to my online store /like a "Shop Now" button on my header/.
Do you mean the announcement bar?
Just add a url to the announcement bar theme setting https://help.shopify.com/en/manual/online-store/themes/os/themes-by-shopify/boundless/sections#annou...
screenshot announcement bar url setting in brooklyn theme for announcement bar
@Tanyo wrote:2) Can I make this header sticky?
If you do mean the announcement bar to make that sticky is an advanced customization to buy that customization contact me at paull.newton+shopifyforums@gmail.com
If you mean the ENTIRE header that is not recommended as making the boundless themes header sticky would never let anyone see the rest of the pages as it's a masthead.
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Thanks for the quick reply.
I don't mean the announcement bar. I would like to add it here: see screenshot below. Is it possible?
This is an accepted solution.
Okay I see thank you for clarifying.
Of course both customizations are possible.
For the header link you'd have to customize header.liquid basically emulating the code of the other link-icons(cart and search) to add a new element
You should be able to see the code around line 51 if you have the latest version of boundless
https://shopify.com/admin/themes/current?key=sections/header.liquid&line=51
Always backup your theme before making changes
Possibly with code like the following:
<a href="https://google.com" class="site-header__link js-drawer-open-top">
<span class="icon" aria-hidden="true"></span>
<span class="icon__fallback-text">Description of your link or icon or action</span>
</a>
To make an icon or add an image is more advanced since the theme uses font icons , which you can find in theme.scss.liquid by searching for things like .icon-search
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Hello again!
How can I center this header link vertically?
That's a bit touchier without being able to see what you did you'll have to figure the CSS out
https://css-tricks.com/centering-css-complete-guide/
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024