Shopify Product Pages: How to Add Clickable Brand Names for Better Navigation

Hey fellow store owners!

I recently dove into a really helpful discussion on the Shopify community forums that I think many of you will find valuable. It was all about a common request: how to add a clickable vendor (or brand) name right above the product title on your Shopify product pages, linking directly to all products from that specific brand. It sounds like a small detail, but it makes a huge difference for customer navigation and discovery, especially if you carry multiple brands.

Our friend @hamdykp kicked off the thread, noting that his Horizon 3.5.1 theme didn't seem to have this built-in. He shared his product page, where the brand name was present but not clickable. This is a super common scenario – many themes don't offer this out-of-the-box, but thankfully, the community quickly jumped in with some excellent solutions.

Understanding the Core Problem: Dynamic Brand Linking

The main challenge here is two-fold: first, how to display the vendor name; and second, how to make that name a dynamic link that automatically points to a collection of all products by that vendor. You don't want to manually update links for every single product or brand, right? That's where Shopify's Liquid templating language comes in handy.

Several community members offered different paths. Let's break down the most effective ones.

The Custom Liquid Block Solution: Your Best Bet

The most robust and dynamic solution, championed by @mastroke and echoed by @Moeed (who confirmed Horizon doesn't support it by default), involves using a "Custom Liquid" block. This method lets you inject a small piece of Liquid code directly into your theme without diving deep into the theme's code files.

Here’s how you can implement this to get a clickable brand name that links to all products by that vendor:

Step-by-Step: Adding a Clickable Brand Name via Custom Liquid

1. Access Your Theme Editor: From your Shopify admin, go to Online Store → Themes.

2. Customize Your Theme: Find your current theme (like Horizon 3.5.1 for @hamdykp) and click the "Customize" button.

3. Navigate to Product Pages: In the theme editor, look for the top dropdown (usually center/top-right) that says "Home page". Click it, then select "Products → Default product". This takes you to the template for all your product pages.

   

4. Find the Product Information Section: On the left sidebar, you'll see sections like "Product information". Click on it to expand its blocks.

   

5. Add a New Block: Scroll down within the "Product information" section and click "Add block".

6. Select "Custom Liquid": From the options, choose "Custom Liquid".

7. Insert the Code: In the newly added "Custom Liquid" block, paste the following code:

    
   
   {{ product.vendor }}
   
   
   
   

   This code does a couple of things: it creates an anchor tag (``) for a link. The `href` attribute dynamically generates a URL to a collection page filtered by the current product's vendor. `{{ product.vendor | url_encode }}` ensures that any special characters in your vendor name are correctly formatted for a URL.

   

   The original post also showed how to display the vendor name without a link, using a simple text block:

   

8. Position the Block: Drag this new "Custom Liquid" block so it sits above the "Title" block within the "Product information" section. This will ensure the brand name appears where you want it.

9. Save Your Changes: Don't forget to click "Save" in the top right corner!

An Even Simpler Liquid Alternative

@tim_1 pointed to another solution in a related thread, which uses an even more concise Liquid filter: link_to_vendor. If your theme supports it or if you're comfortable with slightly different Liquid, you could also try this code in your Custom Liquid block:

{{ product.vendor | link_to_vendor }}

This filter automatically wraps the vendor name in a link to its respective collection, often resulting in cleaner code and the same desired outcome.

What About Other Approaches?

@Mustafa_Ali suggested using a "Button block" and selecting the vendor name. While this can display the vendor name, it typically creates a button element, which might not be the subtle text link @hamdykp was looking for. Here's what that process looks like:

More importantly, linking this button dynamically to the vendor's collection would still require adding custom Liquid or URL logic to the button's link field, making the "Custom Liquid" block a more direct path for this specific request.

The key takeaway from this discussion is that while Shopify themes are powerful, they don't always cover every specific UX enhancement out-of-the-box. But with a little Liquid magic and the flexibility of the theme editor's custom blocks, you can achieve a lot! This clickable vendor name not only enhances navigation but also helps customers explore more of what your store offers by brand, potentially increasing average order value and customer satisfaction.

Remember to always test any changes on a duplicate theme first, just to be safe. Happy customizing!