How to add image Gallery Section with Schema in Shopify?

1. First, we need to log in to your Shopify Admin and go to Online How to add image Gallery Section with Schema in Shopify? Store > Themes.

How to add image Gallery Section with Schema in Shopify?expoundsofttechsolution How to add image Gallery Section with Schema in Shopify?

2. Click on the Action button and choose Edit Code from the dropdown.

3. You will see the Sections option and click on the Add a new section button.

4. Add a new section Gallery.liquid.

5. After creating the section, paste the below code.


{% if section.settings.gallery_layout_box %}
	<div class="page-width {% if section.settings.hide_in_mbl %} small--hide {% endif %}">
{% endif %}
     
    <div class="wow fadeIn grid grid--no-gutters image-bar image-bar--{{ section.settings.section_height }} {% if section.settings.hide_in_mbl %} small--hide {% endif %} ">
      {% case section.blocks.size %}
        {% when 1 %}
          {%- assign column_size = '' -%}
          {%- assign image_size = '192x' -%}
        {% when 2 %}
          {%- assign column_size = 'medium-up--one-half' -%}
          {%- assign image_size = '96x' -%}
        {% when 3 %}
          {%- assign column_size = 'medium-up--one-third' -%}
          {%- assign image_size = '640x' -%}
        {% when 4 %}
          {%- assign column_size = 'medium-up--one-quarter' -%}
          {%- assign image_size = '480x' -%}
        {% else %}
          {%- assign column_size = 'medium-up--one-fifth' -%}
          {%- assign image_size = '385x' -%}
      {% endcase %}

      {% for block in section.blocks %}
        <div class="grid__item {{ column_size }}" {{ block.shopify_attributes }}>
         
              {% if block.settings.link != blank %}
                 <a href="{{ block.settings.link }}" class="image-bar__item image-bar__link" target="_blank">
              {% elsif block.settings.image != blank %}
                 <div class="image-bar__item image-bar__item--{{ block.id }}">
              {% else %}
                  <div class="image-bar__item">
              {% endif %}
              
              {% if block.settings.image != blank %}
              	 <img class="image-bar" src="{{block.settings.image | img_url: image_size }}" alt="" style="width:100%" />
                    
              {% else %}
              	  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
              {% endif %}
                    
<!--                   <div class="absolute content_text flex center">
                <a href="https://www.instagram.com/" class="delay03 inline-block" target="_blank"><i class="fa fa-intargram"></i></a>
                <h4 class="title text-center"><a href="https://www.instagram.com/" target="_blank">SHOP IT</a></h4>
              </div>  -->
              <div class="image-bar__content {{ block.settings.text_align}}">
                {% if block.settings.cta_label != blank %}
                  <div class="image-bar__text">
                    <h3 class="image-bar__caption" style="color:{{ section.settings.caption_text_color}}">
                        {{ block.settings.cta_label }}                  	
                    </h3>
                    {% if block.settings.link != blank and block.settings.button_txt != blank %}
                        <span style="color:{{ section.settings.caption_text_color}}">{{ block.settings.button_txt }} <i class="ad ad-caret-right" aria-hidden="true"></i></span>
                    {% endif %}
                  </div>
                {% endif %}
              </div>
                    
          {% if block.settings.link != blank %}
            </a>
          {% else %}
            </div>
          {% endif %}
                   
        </div>
      {% endfor %}
    </div>

    {% if section.blocks.size == 0 %}
      {% include 'no-blocks' %}
    {% endif %}
      
{% if section.settings.gallery_layout_box %}
	</div>
{% endif %}
      
     
{% schema %}
  {
    "name": "img-Gallery",
    "class": "index-section index-section--flush",
    "max_blocks": 20,
    "settings": [
  	  {
      	"type":"paragraph",
      	"content":"Recommanded Image Size: 5 Columns 385px, 4 Columns 480px, 3 Columns 640px, 2 Columns 960px, 1 Column 1920px"
      },
	  {
        "type": "checkbox",
        "id": "gallery_layout_box",
        "label": "Use container?",
        "default":false
      },
      {
        "type": "checkbox",
        "id": "hide_in_mbl",
        "label": "Hide in mobile?",
        "default":false
      },
      {
        "type": "color",
        "id": "caption_text_color",
        "label": "Caption Color",
        "default":"#000"
      }     
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Image",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link",
            "info": "Optional"
          },
      	  {
            "type": "select",
            "id": "text_align",
            "label": "Text Alignment",
            "default": "lefttop",
            "options": [
              {
                "label": "Left Top",
                "value": "lefttop"
              },
     		  {
                "label": "Left Middle",
                "value": "leftmiddle"
              },
              {
                "label": "Right Top",
                "value": "righttop"
              },
      		  {
                "label": "Right Middle",
                "value": "rightmodel"
              },
             {
                "label": "Center",
                "value": "center"
              }
            ]
          },
          {
            "type": "textarea",
            "id": "cta_label",
            "label": "Caption",
     		"info":"use span tag for smaller font. ie. <span>new</span>collection."
          },          
          {
            "type": "text",
            "id": "button_txt",
            "label": "Button Text",
      		"info": "Button show if link set at above."
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "img-Gallery",
        "category": "Image",
        "blocks": [
          {
            "type": "image"
          },
          {
            "type": "image"
          }          
        ]
      }
    ]
  }
{% endschema %}