Vendor: Link to collection page instead of vendor page

This code change allows you to change the default Vendor link on product pages to link to a standard Collection page for that vendor/brand.

When using the Vendor link option on your product pages, the link will take the shopper to a dynamically created list of products that have that vendor name attached. This is also known as a query page:

Example, the page URL will show:

myshopify.com/collections/vendors?q=Burton

That will show me a grid listing of products by the vendor called Burton.

This grid listing looks very similar to a collection page. However, it's not a true collection page as it's only a query of products. A true collection page can have a featured image banner, a collection description, default sort options and rules that are applied to that collection.

If you'd like to change Product page vendor link to connect to an actual Collection page for that brand, you can use this code change:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate of your theme:

After you've duplicated your theme, you can continue with the following code change:

1: Add code to the snippets product.liquid file

Edit Snippets/product.liquid.

(1) In left folder view, use the search bar

(2) Find the file in the Snippets folder.

If you're working with your published theme, use this link:

Here's a quick link you can use if you're working with your live published theme:
https://myshopify.com/admin/themes/current?key=snippets/product.liquid&line=79

Note - The quick links in our tutorials will always open the Code Editor for your live published theme. If you're working on an unpublished theme, always manually launch the Code Editor by using that theme's Actions link.

Find the following line (around line 79 in Pipeline 3):

Tip: In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for "vendor" without quotes.

Replace the vendor code section - These three highlighted lines:

Replace the three lines with all this code:

{% if section.settings.product_show_vendor and product.vendor %}
{% assign its_a_match = false %}

{% capture my_collection_handle %} {{ product.vendor | handleize | strip | escape  }} {% endcapture %}
{% assign my_collection_handle_stripped = my_collection_handle | strip | escape %}

{% for collection in collections %}
{% if my_collection_handle_stripped == collection.handle %}
{% assign its_a_match = true %}
{% endif %}
{% endfor %}

{% if its_a_match %} 
<p><a href="/collections/{{ product.vendor | handleize }}" class="border-bottom-link uppercase">{{ product.vendor }}</a></p>
{% else %}
<p><a href="{{ product.vendor | url_for_vendor }}" class="border-bottom-link uppercase">{{ product.vendor }}</a></p>
{% endif %}
{% endif %}

Example:

Be sure not to affect the <h1 section after or the closing </h5> before.

Save the file.

How it works

Create collections for your vendors/brands. Be sure the collection title is exactly the same as the vendor tag name.

Product Vendor name:

https://myshopify.com/admin/products

Is the same as Collection title:

https://myshopify.com/admin/collections

The best way to verify the handle is by viewing the Collection:

In your browser preview, verify that the collection page url is:

myshopify.com/collections/cloud-ride

When a space it used in the title, Shopify will add a hyphen or dash to connect the title words. This is fine. The above is a good match from product vendor name to collection title.

Two possible results

1: If you've created a collection and the title of the collection matches correctly with the vendor product name, then the link on your product page will link to the collection page.

2: If there is no match between a collection and the vendor name, then the standard vendor query page will be linked.

Undo

If you need to quickly undo the code change you can use the Older versions link or publish your duplicate/backup theme.

Need help with code changes?

We're not able to make any code customizations but we can recommend shophelper.io and heycarson -- they both specialize in small code changes and have really competitive flat-rate pricing.