Published 03.04.2022
How to Make a Brands Page in Shopify

Create Shopify Brand Page

Quick guide how to add Brand / Vendors page in your Shopify store.

Shopify brand page helps your customers to find their favorite products and it also helps your site to gain organic search visibility.

Näin lisäät Brändi-sivun Shopify verkkokauppaasi. Tämä ohje on englanniksi, koska koko Shopify hallinta on englanniksi.

Here is example of Shopify Brand-page: https://easybuy.fi/pages/brands

Tutorial create Shopify brand page
Guide step 1.

Create new Template


1. Login to shopify admin -> click 'Online store' -> Themes -> Actions -> Edit code -> Templates: Add new template
2. Choose "Create new template for:" -> Page
3. Choose "Template type:" -> liquid
4. Name your template as: -> page.brandlist
5. Copy-paste following liquid code to your template and save.
                    
 <article class="site-page" data-template-page>
  <header class="page-masthead">
    <h1 class="page-title">
      {{ page.title }}
    </h1>
  </header>
  
  
<!--css for brand list -->  
<style>
      
.page-content-max {
    margin-top: 50px;
    margin-bottom: 50px;
        margin-left:100px;
  
}

.page-content-max a {
       color: #1e8570;
    text-decoration: none;
    transition: color 100ms cubic-bezier(0.4, 0, 0.2, 1);
}      

      
.vendor-list {
  -webkit-columns: 3;  /* Chrome, Safari, Opera */
  -moz-columns: 3;  /* Firefox */
  columns: 3;
}
@media (max-width: 640px) {
  .vendor-list {
    -webkit-columns: 1;    /* Chrome, Safari, Opera */
    -moz-columns: 1;    /* Firefox */
    columns: 1;
  }
}
      
</style>  
  
<!--pagecontent for brand list page -->    
{% if page.content != blank %}
<div class="page-content-max">
          
<center><p> {{ page.content }}   </p> </center>


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

{% assign counter_divided_by_3 = counter | divided_by: 3 | floor %}
  

      
<ul class="vendor-list block-grid three-up mobile one-up">
{% 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"><a href="/collections/{{ product_vendor | handleize }}">{{ product_vendor }}</a></li>
{% else %}
<li class="vendor-list-item">{{ product_vendor | link_to_vendor }}</li>
{% endif %}
{% endfor %}
</ul>
      
      
</div>
{% endif %} 
</article>

                    
                          


1. Shopify template 'page.brandlist.liquid' should look like this.


Create new Shopify template

Guide step 2.

Create new Page


1. Login to shopify admin -> click 'Online store' -> Pages -> Add page
2. Add title like "Brands" or 'Our Store Brands' and optional content text.
3. Choose "Theme template:" -> brandlist.
4. Save.
5. Now your Brand page is created and published.


Shopify page 'brands' should look like this after saving.


Create new Shopify page

Click 'View page' to see your newly created brand-page.
If you want to change how it looks you can modify the CSS in liquid-template(step 1.).


Brands page is published

Guide step 3.

Use your new Brand page for SEO (optional)


1. Add your Brand page link to navigation or footer so visiting search engine bots can easily index your brand/vendor collections.
2. You can speed up indexing by: login to your Google search Console -> search for your brand page -> request indexing.


Request indexing of your new brand page. (https://search.google.com/)


Request indexing of your bnew brand page

SEM Finland Oy SEM Finland http://www.semly.fi/images/logo.png Vuorentaustankatu 2 B, Tampere, Finland Finland