Pages Brands - SHOPIFY

page-brands.liquid

<div class="brands-page">

  {% if section.settings.display_brands %}
  <div class="brands-container container mb__40">

    <div class="brands-row row">
    
      {% for block in section.blocks %}
      
        {% if block.settings.brand_link != blank %}
          {% assign link = block.settings.brand_link %}
        {% else %}
          {% assign link = block.settings.brand_name | append: '/collections/vendors?q=' | replace: ' ', '%20' %}
        {% endif %}

      <div class="brand-col col-6 col-sm-4 col-md-3">
      
        <div class="brand-item tc border mb__30">

          <a title="{{ block.settings.brand_name }}" href="{{ link }}" class="d-block">
            {% if block.settings.brand_image != blank %}
            {%- assign img_url = block.settings.brand_image | img_url: '400x' -%} 
            <img src="{{ img_url }}" alt="{{ block.settings.brand_image.alt }}" class="img-brand-logo" />
            <h5 class="text-dark">{{ block.settings.brand_name }}</h5>
            {% else %}
            {{ block.settings.brand_name }}
            {% endif %}
          </a>

        </div>

      </div>  
      {% endfor %}
    
    </div>
  
  </div>
  {% endif %}

  {% if section.settings.display_brands_list %}
  <div class="brands-list">
    {% assign curr = "" %}
    {% for vendor in shop.vendors %}
    {% assign first = vendor | strip_html | upcase | truncate: 1, '' %}
    {{ link_to_vendor }}
    <div class="brand {% unless first == curr %} brand-{{ first }} {% endunless %}" {% if first == curr %} style="display:none" {% endif %}>
      {% unless first == curr %}
    
      <div class="azbrands-title">
        {% if first == '1' or first == '2' or first == '3' or first == '4' or first == '5' or first == '6' or first == '7' or first == '8' or first == '9' or first == '0' %}
        <h3>#</h3>
        {% else %}
        <h3>{{ first }}</h3>
        {% endif %}
      </div>
      {% endunless %}
      {% assign curr = first %}
      <ul class='brandgrid row'>
        <li class='col-12 col-md-4 col-lg-4 col-xl-3'>{{ vendor | link_to_vendor }}</li>
      </ul>
    </div>
    {% endfor %}
    
  </div>
  {% endif %}

</div>

{% if section.settings.display_image_effect == true %}
<style>
.brands-container .brand-item img.img-brand-logo {
    transition: all 300ms;
    filter: grayscale(30%);
}
.brands-container .brand-item img.img-brand-logo:hover {
    filter: grayscale(0);
}
</style>
{% endif %}

{% schema %}
  {
    "name": "Brands Page",
    "settings": [
        {
            "type": "header",
            "content": "Brands Page",
            "info": "Create a Brands page"
        },
        {
            "type": "checkbox",
            "id": "display_brands",
            "label": "Display Brands Logos?",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "display_brands_list",
            "label": "Display Brands List?",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "display_image_effect",
            "label": "Add hover effect",
            "default": true
        }

    ],
    "blocks": [
      {
        "type": "image",
        "name": "Image",
        "settings": [
          {
            "type": "image_picker",
            "id": "brand_image",
            "label": "Brand image"
          },
          {
            "type": "text",
            "id": "brand_name",
            "label": "Brand Name"
          },
          {
            "type": "url",
            "id": "brand_link",
            "label": "Url",
            "info": "Just select a link if the Url is different to vendor link default"
          }      
        ]
      }
	  ]
  }
{% endschema %}

page.brands.liquid

{%- section 'pages_heading' -%}
<div class="container mt__60 mb__60">

  <div class="page-content-beands">
    {{ page.content }}
  </div>

  {%section 'page-brands'%}
  
</div>