Vendor/Designer Directory Page

[mrkevintroy]

Hi everyone,

I saw a lot of people asking questions on how to make a custom vendor page with columns Similar to Best Buy's Brand Page. 

I don't promise the look and feel will look good on your site, the custom style should be unique to you. this is just a bare bones tutorial on how to create the page template.

For those who are new to developing follow the steps below.

So enough of the introductions.  let get to it. 

Step 1: Hop into your shopify admin Page.

Step 2: Click Online Store

 

Step 3: in the "Actions" Drop down choose edit code

 

Step 4: Create New Template

 

Step 5: Name it Brands, Vendors, etc.  (page.Brands) 

 

Step 6:  Delete all the preset info and past the source code below into the page then click save. 

( pulled from other samples and fixed minor issues to make the template universal)

Full Source Code: 

{% include 'breadcrumb' %}

<div class="grid">

  <div class="grid-item large--two-thirds push--large--one-sixth">

    <h1>{{ page.title }}</h1>

    <div class="rte">
          {% assign page_content = page.content %}
          {{ page_content | replace: '[shop_email]', shop.email | replace: '[shop_domain]', shop.domain | replace: '[shop_address]', shop.address.summary | replace: '[shop_name]', shop.name }}
    </div>

  </div>

</div>
{% assign counter = 0 %}
{% for vendor in shop.vendors %}
{% assign counter = counter | plus: 1 %}
{% endfor %}

{% assign counter_divided_by_3 = counter | divided_by: 3 | floor %}
<div class="page-width" style="column-count:4;">
  <div class="content-block">
    <div class="rte rte--indented-images">
      {{ page.content }}
      <div class="grid grid--no-gutters grid-uniform">
		<div class="gird__item small--one-half medium-up--one-fifth">
          

{% for product_vendor in shop.vendors %}
{% 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 %}
<li class="vendor-list-item block-grid"><a href="/collections/{{ product_vendor | handleize }}">{{ product_vendor }}</a></li>
{% else %}
<li class="vendor-list-item block-grid">{{ product_vendor | link_to_vendor }}</li>
{% endif %}
{% endfor %}
</ul>

Notes*   to change how many columns you want find this line and change the 4 to what ever looks best. 

<div class="page-width" style="column-count:4;">

Step 7: Click Save

Step 8: Hop over to pages

Step 9: Add new page

Step 10: give the page a title.

Step 11: Select the brand.page template.

Step 12: Click save.

Step 13. View Page.

For live view go to https://unclebobsgiftshop.com/pages/brands

To add different content above the vendor list on the page. 

Use the page editor to write your text, add images, etc.

[mrkevintroy]

Better Code

{% include 'breadcrumb' %}

<div class="grid">

  <div class="grid-item large--two-thirds push--large--one-sixth">

    <h1>{{ page.title }}</h1>

    <div class="rte">
          {% assign page_content = page.content %}
          {{ page_content | replace: '[shop_email]', shop.email | replace: '[shop_domain]', shop.domain | replace: '[shop_address]', shop.address.summary | replace: '[shop_name]', shop.name }}
    </div>

  </div>

</div>
{% assign counter = 0 %}
{% for vendor in shop.vendors %}
{% assign counter = counter | plus: 1 %}
{% endfor %}

{% assign counter_divided_by_3 = counter | divided_by: 3 | floor %}
<div class="page-width" style="column-count:4;">
  
  
  {%comment%}
  <div class="content-block">
    <div class="rte rte--indented-images">
      {{ page.content }}
      <div class="grid grid--no-gutters grid-uniform">
          		<div class="grid__item small--one-half medium-up--one-fifth">

  {%endcomment%}

{% for product_vendor in shop.vendors %}
{% 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 %}
<li class="vendor-list-item block-grid"><a async href="/collections/{{ product_vendor | handleize }}">{{ product_vendor }}</a></li>
{% else %}
<li class="vendor-list-item block-grid">{{ product_vendor | link_to_vendor }}</li>
{% endif %}
{% endfor %}
</ul>

[KarlOffenberger]

Hi!

Just wanted to say thanks for sharing 🎉

[Azzu86]

Hello

I copy the code but something is no working well.

It gave error 

Liquid error: Could not find asset snippets/breadcrumb.liquid

Can you help me? 

[lincybow]

Same issue here. Have you found any solutions? Thank you!

[katied]

Hello!  This worked well so thank you for sharing this!  If I wanted to add an image in addition to the brand name how would I do that?

[cacao123]

Hello, 

I have used this code as well and would like to add a image for the different vendors as well as the names. Is there anyway to do this? 

Thanks in advance for your help