Move icons to header row + make product brand clickable

[Roman_S]

Hi everyone,

I have a couple of questions and would really appreciate your help.

I’m currently using the Horizon 3.1.0 theme and would like to customize a few things:

1. Header layout (Screen 1)
   I would like to move the profile and cart icons into the same row as the search icon, so the order looks like this:
   search → profile → cart
   Is this possible in the Horizon theme, and how can I achieve it?

2. Clickable brand on product page (Screen 2)
   I would like to make the product brand clickable, so that when a user clicks on the brand name, they are redirected to the corresponding brand collection page.
   What would be the best way to implement this?

Thanks in advance for your help!

[devcoders]

Hi @Roman_S

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

[Roman_S]

Hi, hier is my store URL: https://www.luxury-and-you24.de/ . Thanks a lot

[Moeed]

Hey @Roman_S

I don’t recommend using this solution as it’s not the professional way but without the access of your backend, that’s what I can recommend you only.

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
@media screen and (min-width: 768px) {
header-actions {
    margin-bottom: -113px;
    z-index: 2 !important;
    margin-right: 30px !important;
}
}
</style>

RESULT:

---

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

[Roman_S]

Hi @Moeed ,

thank you very much for your response. Unfortunately, this solution does not work, as the theme starts functioning incorrectly and the order should be as follows: search → profile → cart.

[devcoders]

Hi @Roman_S

For the search → profile → cart, the HTML structure will need to be changed. Alternatively, you can send me the collaborator, and I will make both changes in your theme.

Best regards,
Devcoder

[tim_1]

For header layout.

To avoid theme code edit do this:

1. In properties of the Header section change Search icon location to Top row instead of current bottom. This will put all your three icons together in the same row as your logo.
   

   

2. Add CSS code to shift these icons to the second row. This can go into “Custom CSS” of the Header section:
   

   

@media (min-width:750px) {
  .header__row--bottom .header__column--left {
    max-width: calc(100vw - 3 * var(--button-size) - 2* var(--page-margin)); 
  }

  search-button, header-actions {
    position: relative; 
    top: 50px; /* should match the height of the logo */
    z-index:5;
  }
}

---

For product page, remove the “Vendor” block from the “product info” section and add a custom liquid block instead.

Paste this code. Note that product vendor value must exactly match the collection title. Otherwise, code will use the vendor link

{% liquid
  assign co = collections | where: "title", product.vendor | first
  if co.products_count > 0
    assign url = co.url
  else
    assign url = product.vendor | url_for_vendor
  endif
%}
<h3 class=h5>
  {{ product.vendor | link_to: url }}
</h3>

---

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it

[Roman_S]

Hi @tim_1 ,

thank you so much for your response. Regarding the icons in a single row in the header layout - I used your code and it worked. Thank you very much.

Regarding the clickable brand on the product page - due to the way the product title is structured, I decided not to remove the “Vendor” block from the “product info” section and simply added your code. Now the clickable brand is displayed above the product title, and this works perfectly for me.

Thanks again for your help.