Move icons to header row + make product brand clickable

[tim_tairli]

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