Artikkelit   |   Google Ads |   Seo |   Shopify |   Yleiset
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>

                    
                          


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.
Create new Shopify page
Shopify page 'brands' looks like this after saving.

Brands page is published
Click 'View page' to see your newly created brand-page.


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. ' /> Create Shopify brand page 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.


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>

                    
                          


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.
Create new Shopify page
Shopify page 'brands' looks like this after saving.

Brands page is published
Click 'View page' to see your newly created brand-page.


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.
https://www.semly.fi/imagestorage/755acfcreate-shopify-brand-page.png
Published 7/4/2022 3:10:53 PM    Article 16

Create Shopify brand page

How to Make a Brands Page in Shopify

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.


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>

                    
                          


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.
Create new Shopify page
Shopify page 'brands' looks like this after saving.

Brands page is published
Click 'View page' to see your newly created brand-page.


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.


Tags:  Shopify
Page: create-shopify-brand-page

Reviews
Picture: Youtube Mainonta

Category related
Semly.fi USA
Copyright Semly.fi    Privacy policy    Terms of use    List all articles    Sitemap