Vendor/Designer Directory Page

Highlighted
Shopify Partner
4 0 2

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 1.png

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

 Step 3.png

Step 4: Create New Template

 Step 4.png

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

 Step 5.png

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 8.png

 

Step 9: Add new page

Step 9.png

Step 10: give the page a title.

Step 11: Select the brand.page template.

Step 10 11.png

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.

 

 

I'm here to help.
Highlighted
Shopify Partner
4 0 2

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>

 

I'm here to help.
Highlighted
Shopify Partner
1866 181 748

Hi!

 

Just wanted to say thanks for sharing 🎉

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
Highlighted
New Member
1 0 0

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? 

Marche – BellaNaturale - Google Chrome.jpg

0 Likes
Highlighted
New Member
4 0 0

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?

0 Likes