Streamlining Your Shopify Store: Header Layout & Clickable Brands Demystified

Hey there, fellow store owners! It's your friendly Shopify migration expert here, diving into another fantastic discussion from the community forums. We recently had Roman_S, a store owner using the Horizon 3.1.0 theme, bring up a couple of common customization questions that I think many of you can relate to: tidying up the header layout and making product brands clickable on product pages.

These kinds of tweaks can really elevate your store's user experience, so let's break down the conversation and see what insights we can gather from the collective wisdom of our community.

Tackling the Header Layout Challenge: Icons in the Top Row

Roman_S's first goal was pretty clear: move the profile and cart icons to the same row as the search icon, ideally resulting in a clean search → profile → cart order. This is a super common request – getting those header elements exactly where you want them can make a big difference in how professional and intuitive your site feels.

The community jumped in with a couple of approaches. Let's look at what was suggested and why it might be a bit trickier than it seems.

The "Move & Shift" Approach

One suggestion came from tim_1, outlining a two-step process:

1. First, change the "Search icon location" in your Header section properties to "Top row." This is a theme setting that can indeed move your search icon up with your logo.

   

2. Second, add some custom CSS to the "Custom CSS" area of the Header section. Here's the code tim_1 shared:

   @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;
     }
   }
   

   

Now, here's the kicker: while the first step moves the search icon, the CSS provided by tim_1 actually uses top: 50px; which shifts the search-button and header-actions (where your profile and cart icons live) down. This would effectively push them into a second row, not consolidate them into the single top row with the logo as Roman_S originally envisioned. So, while it's a valid CSS snippet for *some* layout changes, it doesn't quite hit the mark for the specific "all in one row" request.

The "Negative Margin" Attempt

Another community member, Moeed, offered a more direct CSS hack using negative margins to pull the icons up. Here's what Moeed suggested adding to your theme.liquid file, just before the tag:

Moeed himself prefaced this by saying, "I don’t recommend using this solution as it’s not the professional way," and Roman_S later confirmed it "does not work, as the theme starts functioning incorrectly." This is a great example of why sometimes quick CSS fixes can cause more problems than they solve, especially with complex header structures that rely on specific HTML scaffolding. Moving elements with negative margins can often lead to overlapping issues or broken responsiveness.

The Real Takeaway for Header Customization

What this part of the discussion really highlights is that some theme customizations, particularly those involving significant structural changes like moving header elements into a different visual row and maintaining a specific order, often go beyond simple CSS adjustments. They might require diving into the theme's Liquid files to modify the actual HTML structure. As devcoders suggested, sometimes it's a job for someone with collaborator access who can directly edit the theme's core files. If you find yourself in a similar boat, it's a good sign that you might need to consult your theme's documentation for advanced layout options or consider hiring a Shopify developer to implement these deeper structural changes safely.

Making Product Brands Clickable: A Solid Solution!

Now for some good news! Roman_S's second request was to make the product brand name on the product page clickable, redirecting users to a collection page featuring that specific brand. This is a fantastic idea for improving navigation and helping customers discover more products from brands they love.

Thankfully, tim_1 provided a really elegant and robust solution using a custom Liquid block. Here's how you can implement it:

Step-by-Step: Making Your Product Brands Clickable

1. Go to your Shopify Admin: Navigate to Online Store > Themes.

2. Customize your theme: Click on Customize for your live theme (or a duplicate if you're testing!).

3. Go to a product page: From the theme customizer, navigate to any product page (you can usually select "Products" from the top dropdown menu and then pick a product).

4. Find the "Product information" section: In the left sidebar of the customizer, find the section related to "Product information" (or similar, depending on your theme).

5. Remove the default "Vendor" block: Look for a block named "Vendor" within the "Product information" section and remove it. This is important because we're replacing its functionality.

6. Add a "Custom Liquid" block: Still within the "Product information" section, click "Add block" and select "Custom Liquid."

7. Paste the Liquid code: In the new Custom Liquid block, paste the following code exactly as it appears:

   {% 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
   %}
   
     {{ product.vendor | link_to: url }}
   
   

8. Save your changes: Don't forget to hit "Save" in the top right corner!

How the Liquid Code Works

This snippet is pretty clever! Here's a quick breakdown:

• assign co = collections | where: "title", product.vendor | first: This line tries to find a collection whose title exactly matches the product's vendor name. The | first ensures it grabs just one if there are multiple matches (though ideally, titles should be unique).

• if co.products_count > 0: It then checks if this found collection actually has any products assigned to it. This is a crucial check to ensure you're linking to a meaningful collection page.

• assign url = co.url: If a matching collection with products exists, the URL for that collection is assigned.

• else assign url = product.vendor | url_for_vendor: If no such collection is found (or it's empty), it falls back to using Shopify's default url_for_vendor filter, which creates a link to a generic vendor page (e.g., /collections/vendors?q=VendorName).

• {{ product.vendor | link_to: url }}

  : Finally, it renders the product's vendor name as a clickable link, using the url we just determined, wrapped in an

  tag with a class of h5 for styling.

Important Note: For this to work perfectly and link to a dedicated brand collection, your product vendor value in Shopify's product settings needs to exactly match the title of your brand collection. Consistency is key here!

So there you have it! While the header layout proved to be a bit of a sticky wicket, requiring more than simple CSS, the clickable brand feature is totally achievable with a few steps and a smart Liquid snippet. It's a great reminder that some customizations are straightforward, while others require a deeper dive into your theme's structure or the help of a developer. Always remember to back up your theme before making any code changes!

I hope this breakdown of Roman_S's thread helps you navigate your own Shopify customization journey. Happy selling!