How to create a schema for the logo bar in Shopify?

First, you need to create a section for schema and include the section file in the template file where you want to show the logo bar. how-to-create-a-schema-for-the-logo-bar-in-shopify

how-to-create-a-schema-for-the-logo-bar-in-shopify


how-to-create-a-schema-for-the-logo-bar-in-shopify

Here is the code for a section.

how-to-create-a-schema-for-the-logo-bar-in-shopify

<div class="logo-bar-section container">
  <div class="sixteen columns">
    <div class="section clearfix">
      {% if section.settings.title != blank %}
      <h2 class="title center">{{ section.settings.title | escape }}</h2>
      {% endif %}

      {% if section.blocks.size > 0 %}
      <div class="logo-bar">
        {% for block in section.blocks %}
        <div class="logo-bar__item" {{ block.shopify_attributes }}>
          {% if block.settings.link != blank %}
          <a href="{{ block.settings.link }}" class="logo-bar__link">
            {% endif %}
            {% if block.settings.image != blank %}
            {% include 'image-element', image: block.settings.image, alt: block.settings.image.alt %}
            {% else %}
            {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
            {% if block.settings.link != blank %}
          </a>
          {% endif %}
          <p>{{ block.settings.logo_text }}</p>
        </div>
        {% endfor %}
      </div>
      {% endif %}

    </div>
  </div>
</div>

{% schema %}
   {
      "name": "Logo list",
      "class": "logo-list-section",
      "max_blocks": 20,
      "settings": [
         {
         "type": "text",
         "id": "title",
         "label": "Heading",
         "default": "Logo list"
         }
      ],

      "blocks": [
         {
         "type": "logo_image",
         "name": "Logo",
            "settings": [
               {
                  "type": "image_picker",
                  "id": "image",
                  "label": "Image",
                  "info": "400 x 300px recommended"
               },
               {
               "type": "url",
               "id": "link",
               "label": "Link"
               },
               {
               "type": "text",
               "id": "logo_text",
               "label": "Text"
               }
            ]
         }
      ],
      "presets": [
       {
          "name": "Logo list",
          "category": "Image",
          "blocks": [
             {
                "type": "logo_image"
             },
             {
                "type": "logo_image"
             },
             {
                "type": "logo_image"
             },
             {
                "type": "logo_image"
             }
          ]
       }
      ]
    }
{% endschema %}

After creating a section, you need to create a new snippet file and include it in the section which you have created.

Here is the code for the snippet:expoundsofttechsolutionhow-to-create-a-schema-for-the-logo-bar-in-shopify

{% comment %}Check if image is progressive (does not support transparent pngs){% endcomment %}
{% if progressive %}
  {%- capture srcset -%}
    {{ image | img_url: '5000x', format: 'pjpg' }} 5000w,
    {{ image | img_url: '4500x', format: 'pjpg' }} 4500w,
    {{ image | img_url: '4000x', format: 'pjpg' }} 4000w,
    {{ image | img_url: '3500x', format: 'pjpg' }} 3500w,
    {{ image | img_url: '3000x', format: 'pjpg' }} 3000w,
    {{ image | img_url: '2500x', format: 'pjpg' }} 2500w,
    {{ image | img_url: '2000x', format: 'pjpg' }} 2000w,
    {{ image | img_url: '1800x', format: 'pjpg' }} 1800w,
    {{ image | img_url: '1600x', format: 'pjpg' }} 1600w,
    {{ image | img_url: '1400x', format: 'pjpg' }} 1400w,
    {{ image | img_url: '1200x', format: 'pjpg' }} 1200w,
    {{ image | img_url: '1000x', format: 'pjpg' }} 1000w,
    {{ image | img_url: '800x', format: 'pjpg' }} 800w,
    {{ image | img_url: '600x', format: 'pjpg' }} 600w,
    {{ image | img_url: '400x', format: 'pjpg' }} 400w,
    {{ image | img_url: '200x', format: 'pjpg' }} 200w
  {%- endcapture -%}
{% else %}
  {%- capture srcset -%}
    {{ image | img_url: '5000x' }} 5000w,
    {{ image | img_url: '4500x' }} 4500w,
    {{ image | img_url: '4000x' }} 4000w,
    {{ image | img_url: '3500x' }} 3500w,
    {{ image | img_url: '3000x' }} 3000w,
    {{ image | img_url: '2500x' }} 2500w,
    {{ image | img_url: '2000x' }} 2000w,
    {{ image | img_url: '1800x' }} 1800w,
    {{ image | img_url: '1600x' }} 1600w,
    {{ image | img_url: '1400x' }} 1400w,
    {{ image | img_url: '1200x' }} 1200w,
    {{ image | img_url: '1000x' }} 1000w,
    {{ image | img_url: '800x' }} 800w,
    {{ image | img_url: '600x' }} 600w,
    {{ image | img_url: '400x' }} 400w,
    {{ image | img_url: '200x' }} 200w
  {%- endcapture -%}
{% endif %}

{% comment %}Loading style{% endcomment %}
{% if settings.image_loading_style == 'blur-up' %}
  {% comment %}Low quality image loads first{% endcomment %}
  {% assign low_quality_image = image | img_url: '50x' %}
{% elsif settings.image_loading_style == 'color' %}
  {% comment %}Dominant image color loads first{% endcomment %}
  {% assign dominant_color_image = image | img_url: '1x' %}
  {% if object_fit == true %}
    {% capture crop_to_aspect_ratio %}
        max-height: {{ max_height }}px; width: calc({{ image.width }} /  {{ image.height }} * {{ max_height }}px);
    {% endcapture %}
  {% endif %}

  {% capture background_color %}
    background: url({{ dominant_color_image }});
  {% endcapture %}
{% endif %}


{% if back_to_basics %}
  <div class="image-element__wrap" style="{{ background_color }}{{ crop_to_aspect_ratio }};">
      <img  alt="{{ alt | escape }}" src="{{ image | img_url: '2000x' }}"
            {% if inline_style %}
              style="{{ inline_style }}"
            {% endif %}
            {% if additional_classes %}
              class="{{ additional_classes }}"
            {% endif %}
      />
  </div>
{% else %}

{% comment %}Build image element{% endcomment %}

<div class="image-element__wrap" style="{{ background_color }}{{ crop_to_aspect_ratio }} {% unless stretch_width == true or object_fit %}max-width: {{ image.width }}px;{% endunless %}">
  <img  alt="{{ alt | escape }}"
        {% if low_quality_image %}
          src="{{ low_quality_image }}"
        {% endif %}
        data-src="{{ image | img_url: '1600x' }}"
        data-sizes="auto"
        data-aspectratio="{{ image.width }}/{{ image.height }}"
        data-srcset="{{ srcset }}"
        height="{{ image.height }}"
        width="{{ image.width }}"
        style="{{ inline_style }};"
        class="lazyload transition--{{ settings.image_loading_style }} {{ additional_classes }}"
  />
</div>
{% endif %}

{% comment %}Fallback for no javascript{% endcomment %}

<noscript>
  <img src="{{ image | img_url: '2000x' }}" alt="{{ alt | escape }}" class="{{ additional_classes }}">
</noscript>

After creating the section and snippet you can refresh the theme customization section in the backend, then you will see the option for adding logo bar.how-to-create-a-schema-for-the-logo-bar-in-shopify