Solved

How to add text to header Boundless theme

Tanyo
Tourist
5 1 0

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

Accepted Solution (1)
PaulNewton
Shopify Partner
6274 573 1319

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


View solution in original post

Replies 5 (5)

PaulNewton
Shopify Partner
6274 573 1319

@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...

PaulNewton_1-1632690002179.png

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


Tanyo
Tourist
5 1 0

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?

Screenshot 2021-09-26 at 23.08.07.png

PaulNewton
Shopify Partner
6274 573 1319

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
Tourist
5 1 0

Hello again!

How can I center this header link vertically?

PaulNewton
Shopify Partner
6274 573 1319

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