Vendor/Designer Directory Page

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.
1 Like
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.
1 Like
Shopify Partner
1838 173 601

Hi!

 

Just wanted to say thanks for sharing 🎉

I turn coffee in to code - since 1998
1 Like
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