Why is the modal box pop up image not appearing on the front end?

Sohan2198
Tourist
33 0 0

Hello,
I create section for the modal box popup. But dynamic text are showing and image is not render & not show in frontend.
https://hairdramacompanycom-my.sharepoint.com/:v:/g/personal/sohan_lal_hairdramacompany_com/EQHJ4WQd...

{%- capture collectionList -%}
<div class="content-indent {{ section.settings.top-offeset}}{% if section.settings.section_cov %} section-cover{% endif%}" {% if section.settings.section_cov %}style="background-color:{{section.settings.sec_bg_clr}};"{% endif %}>
  <div class="collection-box cl{{ section.id }} {{section.settings.style}} {% unless section.settings.section_width %}page-width {% else %}fullwidth-{{section.id}} fullwidth{% endunless %}{% if section.settings.hide_mobile %} small--hide{% endif %}" id="sliderbox-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="carousel">   	
    
     {% render 'sec-title' %}

    {% case section.settings.grid %}
    {% when 2 %}{%- assign grid_ds = 'large-up--one-half' -%}
    {% when 3 %}{%- assign grid_ds = 'large-up--one-third' -%}
    {% when 4 %}{%- assign grid_ds = 'large-up--one-quarter' -%}
    {% when 5 %}{%- assign grid_ds = 'large--one-quarter widescreen--one-fifth' -%}
    {% when 6 %}{%- assign grid_ds = 'large--one-fifth widescreen--one-sixth' -%}
    {% when 7 %}{%- assign grid_ds = 'large--one-fifth widescreen--one-seventh' -%}
    {% endcase %}
    
    {% case section.settings.tablet-grid %}
    {% when 2 %}{%- assign grid_tb = 'medium--one-half' -%}
    {% when 3 %}{%- assign grid_tb = 'medium--one-third' -%}
    {% when 4 %}{%- assign grid_tb = 'medium--one-quarter' -%}
    {% when 5 %}{%- assign grid_tb = 'medium--one-fifth' -%}
    {% endcase %}
    
    {% case section.settings.mobile-grid %}
    {% when 1 %}{%- assign grid_mb = 'small--one-whole' -%}
    {% when 2 %}{%- assign grid_mb = 'small--one-half' -%}
    {% when 3 %}{%- assign grid_mb = 'small--one-third' -%}
    {% endcase %}

    <!-- Grid of Images with Click Event Listener -->
    <div class="grid grid-mr-{{ section.settings.grid-spacing}} box-{{section.id}} collection-grid{% if section.settings.enable_carousel %} carousel{% else %} grid--uniform listing{% endif %}{% if section.settings.disable_zoom %} no-zoom{% endif %}">
      {% for block in section.blocks limit: section.blocks.size %}
        {% assign product_box = forloop.index | minus:1 %}
        {% assign delay_time = 50 | times : product_box %}
        <div class="grid__item {{grid_mb}} {{grid_tb}} {{grid_ds}} pd-{{ section.settings.grid-spacing}} wow fadeIn" {{ block.shopify_attributes }} data-wow-delay="{{delay_time}}ms">
          <!-- Wrap each image with a container and add a click event listener -->
          <div class="image-container" data-modal-img="{{ block.settings.modal-img.src }}" data-modal-text="{{ block.settings.modal-text }}">
            {% include 'collection-grid-item', collection_image_size: image_size, text_align:{{section.settings.txt-align}} %}
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

<!-- Modal Popup -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <img id="modal-img" src="{{ block.settings.modal-img }}" alt="Modal Image">
    <div id="modal-text">
      {{ block.settings.modal-text }}
    </div>
  </div>
</div>

<style>
  .grid-mr-{{ section.settings.grid-spacing}} { margin:0 -{{ section.settings.grid-spacing | divided_by: 2.0  }}px; }
  .pd-{{ section.settings.grid-spacing}} .collection-grid-item { margin:0 {{ section.settings.grid-spacing | divided_by: 2.0  }}px {{ section.settings.grid-spacing}}px;}
  .collection-box .box-{{section.id}} .collection-grid-item .collection-grid-item__title,
  .collection-box .box-{{section.id}} .collection-grid-item .counts { color:{{ section.settings.collection_ttl_hm}}; }  
  .collection-box .box-{{section.id}} .collection-grid-item .details {  background:{{section.settings.collection_ttl_bg_hm | color_modify: 'alpha', section.settings.collection_ttl_opt_hm}}; }
  
  {% if section.settings.collection_ttl_rad != '0' %}
  .collection-box.style3 .box-{{section.id}} .collection-grid-item__link { border-radius:{{section.settings.collection_ttl_rad}}px; display:block; overflow:hidden;}
  .collection-box.style4 .box-{{section.id}} .details,
  .collection-box.style5 .box-{{section.id}} .details,
  .collection-box.style6 .box-{{section.id}} .details {  border-radius:{{section.settings.collection_ttl_rad}}px;}
   {% endif %}
  
  {% if section.settings.show_buttons %}
  .collection-box .box-{{section.id}} .collection-grid-item .details { padding:20px; }
  {% endif %}
  
  @media only screen and (max-width: 767px) {
      .collection-box .box-{{section.id}} .collection-grid-item .details { background:{{section.settings.collection_ttl_bg_hm_responsive}}; }
  }
  {% if section.settings.section_width %}
  @media only screen and (min-width: 1025px) {
    .fullwidth-{{section.id}} { padding-left:{{ section.settings.pad-desk}}px; padding-right:{{ section.settings.pad-desk}}px; }
  } 
  @media only screen and (max-width: 1024px) {
    .fullwidth-{{section.id}} { padding-left:{{ section.settings.pad-ipad}}px; padding-right:{{ section.settings.pad-ipad}}px; }
  } 
  {% endif %}
  @media only screen and (max-width: 767px) {
    {% if section.settings.section_width %}
    .fullwidth-{{section.id}} { padding-left:{{ section.settings.pad-mbl}}px; padding-right:{{ section.settings.pad-mbl}}px; }
    {% endif %}
    .grid-mr-{{ section.settings.grid-spacing}} { margin:0 -{{ section.settings.grid-spacing-mbl | divided_by: 2.0  }}px; }
  	.pd-{{ section.settings.grid-spacing}} .collection-grid-item { margin:0 {{ section.settings.grid-spacing-mbl | divided_by: 2.0  }}px {{ section.settings.grid-spacing-mbl}}px;}
  }


</style>
{%- endcapture -%}
{{collectionList | strip_newlines | remove: "  " | remove: "	" }}
   
<script>
  // Function to open the modal with the clicked image and text content
  function openModal(imageSrc, description) {
    var modal = document.getElementById("myModal");
    var modalImg = modal.querySelector("#modal-img");
    var modalText = modal.querySelector("#modal-text");
    modalImg.src=imageSrc;
    modalText.innerHTML = description;
    modal.style.display = "block";
  }
  
  // Get all the image containers
  var imageContainers = document.querySelectorAll(".image-container");
  
  // Loop through each image container and add a click event listener
  imageContainers.forEach(function(container) {
    container.addEventListener("click", function(event) {
      event.preventDefault(); // Prevent default anchor tag behavior
      var imagesrc=container.getAttribute("data-modal-img");
      var description = container.getAttribute("data-modal-text");
      openModal(imageSrc, description);
    });
  });
  
  // Get the <span> element that closes the modal
  var closeBtn = document.querySelector(".modal .close");
  
  // Close the modal when clicking on the close button
  closeBtn.addEventListener("click", function() {
    var modal = document.getElementById("myModal");
    modal.style.display = "none";
  });
  
  // Close the modal when clicking anywhere outside of it
  window.addEventListener("click", function(event) {
    var modal = document.getElementById("myModal");
    if (event.target == modal) {
      modal.style.display = "none";
    }
  });
</script>


{% schema %}
  {
    "name": "Teams",
    "class": "index-section",
    "max_blocks": 20,
    "settings": [	 	 
      {
        "type": "textarea",
        "id": "title",
        "label": "Heading",
        "default": "Team Member",
		"info":"Use <strong>text here</strong> to make headings bold"
      },
      {
        "type": "textarea",
        "id": "subtitle",
        "label": "Sub Heading",
        "default": "Describe your products, collection, content etc..."
      },	  	 
	  {
        "type": "header",
        "content": "Appearance"
      },
      {
		 "type": "paragraph",
		 "content":"[checkout different possible style for this section](https://www.adornthemes.com/different-style-for-collection-list/)"
      }, 	
	  {
		 "type": "paragraph",
		 "content":"Section==="
      },	  
	  {
            "type": "select",
            "id": "top-offeset",
            "label": "Top OffSet",
            "default": "default",
            "options": [
              {
                "value": "default",
                "label": "Default"
              },
              {
                "value": "small",
                "label": "Small"
              },
			  {
                "value": "none",
                "label": "None"
              }
			]
        }, 
	  {
		"type":"checkbox",
		"id":"section_width",
		"label":"Fullwidth?",
		"default": true
	   },
	  {
        "type": "paragraph",
        "content": "Left/Right Padding : Fullwidth Section Only==="
      }, 	
      {
        "type": "range",
        "id": "pad-desk",
        "label": "Desktop",
        "default": 55,
        "min": 0,
        "max": 100,
        "step": 1
      },
      {
        "type": "range",
        "id": "pad-ipad",
        "label": "Tablet",
        "default": 15,
        "min": 0,
        "max": 30,
        "step": 1
      },
      {
        "type": "range",
        "id": "pad-mbl",
        "label": "Mobile",
        "default": 10,
        "min": 0,
        "max": 20,
        "step": 1
      },
	   {
        "type": "checkbox",
        "id": "section_cov",
        "label": "Use Background?",
        "default": false
      },	
	  {
        "type": "color",
        "id": "sec_bg_clr",
        "label": "Background",
		"default":"#fafafa"	
	  },		  
	  {
           "type": "checkbox",
           "id": "hide_mobile",
           "label": "Hide Section in Mobile?",
           "default": false
        },
	  {
        "type": "paragraph",
        "content": "Grid==="
      },
 	 {
		"type":"checkbox",
		"id":"enable_carousel",
		"label":"Enable Carousel",
		"default": true
	  },
	  {
        "type": "range",
        "id": "grid-spacing",
        "label": "Spacing : Desktop",
        "default": 15,
        "min": 0,
        "max": 30,
        "step": 1,
		"unit":"px",
		"info":"space between two grid/box."
      },
     {
        "type": "range",
        "id": "grid-spacing-mbl",
        "label": "Spacing : Mobile",
        "default": 5,
        "min": 0,
        "max": 30,
        "step": 1,
		"unit":"px"		
      },
      {
        "type": "select",
        "id": "style",
        "label": "Style",
        "default": "style1",
        "options": [
			{ "value": "style1", "label": "Style 1" },
			{ "value": "style2", "label": "Style 2" },
			{ "value": "style3", "label": "Style 3" },
			{ "value": "style4", "label": "Style 4" },
			{ "value": "style5", "label": "Style 5" },
			{ "value": "style6", "label": "Style 6" }
        ]
      }, 	
		{
        "type": "select",
        "id": "textalign",
        "label": "Text Aligment",
        "default": "text-center",
        "options": [
			{ "value": "text-left", "label": "Left" },	
			{ "value": "text-center", "label": "Center" }
        ]
      }, 
	  {
		"type":"checkbox",
		"id":"leftpadzero",
		"label":"Text Left Padding Zero",
		"default": false,
		"info":"Enable this if you want to display text on left and transparent background as displayed in Jewellery demo"
	  }, 
 	  {
		"type":"checkbox",
		"id":"product_count",
		"label":"Show Products Count?",
		"default": false
	  }, 
		{
		"type":"checkbox",
		"id":"show_buttons",
		"label":"Show Buttons?",
		"default": false
	  },
	{
            "type": "select",
            "id": "btn-style",
            "label": "Select Button",
            "default": "btn",
            "options": [
              {
              "label": "Solid Button 1",
              "value": "btn"
              },
              {
              "label": "Solid Button 2",
              "value": "btn--secondary"
              },
              {
              "label": "Solid Button 3",
              "value": "btn3"
              },
              {
              "label": "Border Button 1",
              "value": "bdr-btn1"
              },
              {
              "label": "Border Button 2",
              "value": "bdr-btn2"
              } 
            ]
        },
		{
          "type": "select",
          "id": "btn-size-desk",
          "label": "Button Size: Desktop",
          "default": "btn-sm",
          "options": [
          {
          "label": "Small",
          "value": "btn-sm"
          },
          {
          "label": "Medium",
          "value": "btn-md"
          },
          {
          "label": "Large",
          "value": "btn-lg"
          }	
          ]
          }, 
          {
          "type": "select",
          "id": "btn-size-mob",
          "label": "Button Size : Mobile",
          "default": "mob-btn-sm",
          "options": [
          {
          "label": "Small",
          "value": "mob-btn-sm"
          },
          {
          "label": "Medium",
          "value": "mob-btn-md"
          },
          {
          "label": "Large",
          "value": "mob-btn-lg"
          }	
          ]
          },      
	  {
        "type": "paragraph",
        "content": "Items per row ==="
      }, 	
      {
        "type": "range",
        "id": "grid",
        "label": "Desktop",
        "default": 4,
        "min": 2,
        "max": 7,
        "step": 1
      },
      {
        "type": "range",
        "id": "tablet-grid",
        "label": "Tablet",
        "default": 3,
        "min": 1,
        "max": 5,
        "step": 1
      },
      {
        "type": "range",
        "id": "mobile-grid",
        "label": "Mobile",
        "default": 2,
        "min": 1,
        "max": 3,
        "step": 1
      },
	 {
        "type": "color",
        "id": "collection_ttl_hm",
        "label": "Title",
        "default": "#fff"
      },
      {
        "type": "color",
        "id": "collection_ttl_bg_hm",
        "label": "Title Background",
        "default": "#000"
      },
 		{
        "type": "color",
        "id": "collection_ttl_bg_hm_responsive",
        "label": "Title Background Responsive View",
        "default": "#000",
		"info":"When you transparent background for title but you need set background color for mobile view"
      },
      {
        "type": "range",
        "id": "collection_ttl_opt_hm",
        "min": 0,
        "max": 1,
        "step": 0.1,
        "label": "Background Opacity",
        "unit": "%",
        "default": 0.9
      },
	 {
        "type": "range",
        "id": "collection_ttl_rad",
        "min": 0,
        "max": 20,
        "step": 1,
        "label": "Background Border Radious",
        "unit": "px",
        "default": 0
      },
		{
		"type":"checkbox",
		"id":"disable_zoom",
		"label":"Disable Image Hover Zoom Effect?",
		"default": false
	  },
	   {
        "type": "paragraph",      
        "content": "Set font size from --> Theme Settings --> Fonts, Colors and Styles --> Collection List"
      }
    ],
    "blocks": [
      {
        "type": "featured_collection",
        "name": "Collection",
        "settings": [
		  {
          "type": "url",
          "id": "url",
          "label": "Link (optional)",
          "info": "Keep it empty to use 'collection url'."
          },
		  {
			"type":"image_picker",
			"id":"collection_image",
			"label":"Upload Image"			
		  },
		  {
 			"type":"textarea",
			"id":"collection_name",
			"label":"Custom Name",
			"info":"use <strong>your text here</strong> to make your text bold"
		  },
          {
			"type":"image_picker",
			"id":"modal-img",
			"label":"Modal Image"			
		  },
          {
            "type": "textarea",
            "id": "modal-text",
            "label": "Modal Text"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Teams",
        "category": "2. Collection",
        "settings": {
          "grid": 4
        },
        "blocks": [
          {
            "type": "featured_collection"
          },
          {
            "type": "featured_collection"
          },
          {
            "type": "featured_collection"
          },
		  {
            "type": "featured_collection"
          }
        ]
      }
    ]
  }
{% endschema %}


Please check & resolve.

Best,
Sohan

Shopify_
Replies 4 (4)

saim007
Shopify Partner
496 64 83

@Sohan2198 Replace your code with below code 

{%- capture collectionList -%}
<div class="content-indent {{ section.settings.top-offeset}}{% if section.settings.section_cov %} section-cover{% endif%}" {% if section.settings.section_cov %}style="background-color:{{section.settings.sec_bg_clr}};"{% endif %}>
  <div class="collection-box cl{{ section.id }} {{section.settings.style}} {% unless section.settings.section_width %}page-width {% else %}fullwidth-{{section.id}} fullwidth{% endunless %}{% if section.settings.hide_mobile %} small--hide{% endif %}" id="sliderbox-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="carousel">   	
    
     {% render 'sec-title' %}

    {% case section.settings.grid %}
    {% when 2 %}{%- assign grid_ds = 'large-up--one-half' -%}
    {% when 3 %}{%- assign grid_ds = 'large-up--one-third' -%}
    {% when 4 %}{%- assign grid_ds = 'large-up--one-quarter' -%}
    {% when 5 %}{%- assign grid_ds = 'large--one-quarter widescreen--one-fifth' -%}
    {% when 6 %}{%- assign grid_ds = 'large--one-fifth widescreen--one-sixth' -%}
    {% when 7 %}{%- assign grid_ds = 'large--one-fifth widescreen--one-seventh' -%}
    {% endcase %}
    
    {% case section.settings.tablet-grid %}
    {% when 2 %}{%- assign grid_tb = 'medium--one-half' -%}
    {% when 3 %}{%- assign grid_tb = 'medium--one-third' -%}
    {% when 4 %}{%- assign grid_tb = 'medium--one-quarter' -%}
    {% when 5 %}{%- assign grid_tb = 'medium--one-fifth' -%}
    {% endcase %}
    
    {% case section.settings.mobile-grid %}
    {% when 1 %}{%- assign grid_mb = 'small--one-whole' -%}
    {% when 2 %}{%- assign grid_mb = 'small--one-half' -%}
    {% when 3 %}{%- assign grid_mb = 'small--one-third' -%}
    {% endcase %}

    <!-- Grid of Images with Click Event Listener -->
    <div class="grid grid-mr-{{ section.settings.grid-spacing}} box-{{section.id}} collection-grid{% if section.settings.enable_carousel %} carousel{% else %} grid--uniform listing{% endif %}{% if section.settings.disable_zoom %} no-zoom{% endif %}">
      {% for block in section.blocks limit: section.blocks.size %}
        {% assign product_box = forloop.index | minus:1 %}
        {% assign delay_time = 50 | times : product_box %}
        <div class="grid__item {{grid_mb}} {{grid_tb}} {{grid_ds}} pd-{{ section.settings.grid-spacing}} wow fadeIn" {{ block.shopify_attributes }} data-wow-delay="{{delay_time}}ms">
          <!-- Wrap each image with a container and add a click event listener -->
          <div class="image-container" data-modal-img="{{ block.settings.modal-img.src }}" data-modal-text="{{ block.settings.modal-text }}">
            {% include 'collection-grid-item', collection_image_size: image_size, text_align:{{section.settings.txt-align}} %}
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

<!-- Modal Popup -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <img id="modal-img" src="{{ block.settings.modal-img | img_url: "medium" }}" alt="Modal Image">
    <div id="modal-text">
      {{ block.settings.modal-text }}
    </div>
  </div>
</div>

<style>
  .grid-mr-{{ section.settings.grid-spacing}} { margin:0 -{{ section.settings.grid-spacing | divided_by: 2.0  }}px; }
  .pd-{{ section.settings.grid-spacing}} .collection-grid-item { margin:0 {{ section.settings.grid-spacing | divided_by: 2.0  }}px {{ section.settings.grid-spacing}}px;}
  .collection-box .box-{{section.id}} .collection-grid-item .collection-grid-item__title,
  .collection-box .box-{{section.id}} .collection-grid-item .counts { color:{{ section.settings.collection_ttl_hm}}; }  
  .collection-box .box-{{section.id}} .collection-grid-item .details {  background:{{section.settings.collection_ttl_bg_hm | color_modify: 'alpha', section.settings.collection_ttl_opt_hm}}; }
  
  {% if section.settings.collection_ttl_rad != '0' %}
  .collection-box.style3 .box-{{section.id}} .collection-grid-item__link { border-radius:{{section.settings.collection_ttl_rad}}px; display:block; overflow:hidden;}
  .collection-box.style4 .box-{{section.id}} .details,
  .collection-box.style5 .box-{{section.id}} .details,
  .collection-box.style6 .box-{{section.id}} .details {  border-radius:{{section.settings.collection_ttl_rad}}px;}
   {% endif %}
  
  {% if section.settings.show_buttons %}
  .collection-box .box-{{section.id}} .collection-grid-item .details { padding:20px; }
  {% endif %}
  
  @media only screen and (max-width: 767px) {
      .collection-box .box-{{section.id}} .collection-grid-item .details { background:{{section.settings.collection_ttl_bg_hm_responsive}}; }
  }
  {% if section.settings.section_width %}
  @media only screen and (min-width: 1025px) {
    .fullwidth-{{section.id}} { padding-left:{{ section.settings.pad-desk}}px; padding-right:{{ section.settings.pad-desk}}px; }
  } 
  @media only screen and (max-width: 1024px) {
    .fullwidth-{{section.id}} { padding-left:{{ section.settings.pad-ipad}}px; padding-right:{{ section.settings.pad-ipad}}px; }
  } 
  {% endif %}
  @media only screen and (max-width: 767px) {
    {% if section.settings.section_width %}
    .fullwidth-{{section.id}} { padding-left:{{ section.settings.pad-mbl}}px; padding-right:{{ section.settings.pad-mbl}}px; }
    {% endif %}
    .grid-mr-{{ section.settings.grid-spacing}} { margin:0 -{{ section.settings.grid-spacing-mbl | divided_by: 2.0  }}px; }
  	.pd-{{ section.settings.grid-spacing}} .collection-grid-item { margin:0 {{ section.settings.grid-spacing-mbl | divided_by: 2.0  }}px {{ section.settings.grid-spacing-mbl}}px;}
  }


</style>
{%- endcapture -%}
{{collectionList | strip_newlines | remove: "  " | remove: "	" }}
   
<script>
  // Function to open the modal with the clicked image and text content
  function openModal(imageSrc, description) {
    var modal = document.getElementById("myModal");
    var modalImg = modal.querySelector("#modal-img");
    var modalText = modal.querySelector("#modal-text");
    modalImg.src=imageSrc;
    modalText.innerHTML = description;
    modal.style.display = "block";
  }
  
  // Get all the image containers
  var imageContainers = document.querySelectorAll(".image-container");
  
  // Loop through each image container and add a click event listener
  imageContainers.forEach(function(container) {
    container.addEventListener("click", function(event) {
      event.preventDefault(); // Prevent default anchor tag behavior
      var imagesrc=container.getAttribute("data-modal-img");
      var description = container.getAttribute("data-modal-text");
      openModal(imageSrc, description);
    });
  });
  
  // Get the <span> element that closes the modal
  var closeBtn = document.querySelector(".modal .close");
  
  // Close the modal when clicking on the close button
  closeBtn.addEventListener("click", function() {
    var modal = document.getElementById("myModal");
    modal.style.display = "none";
  });
  
  // Close the modal when clicking anywhere outside of it
  window.addEventListener("click", function(event) {
    var modal = document.getElementById("myModal");
    if (event.target == modal) {
      modal.style.display = "none";
    }
  });
</script>


{% schema %}
  {
    "name": "Teams",
    "class": "index-section",
    "max_blocks": 20,
    "settings": [	 	 
      {
        "type": "textarea",
        "id": "title",
        "label": "Heading",
        "default": "Team Member",
		"info":"Use <strong>text here</strong> to make headings bold"
      },
      {
        "type": "textarea",
        "id": "subtitle",
        "label": "Sub Heading",
        "default": "Describe your products, collection, content etc..."
      },	  	 
	  {
        "type": "header",
        "content": "Appearance"
      },
      {
		 "type": "paragraph",
		 "content":"[checkout different possible style for this section](https://www.adornthemes.com/different-style-for-collection-list/)"
      }, 	
	  {
		 "type": "paragraph",
		 "content":"Section==="
      },	  
	  {
            "type": "select",
            "id": "top-offeset",
            "label": "Top OffSet",
            "default": "default",
            "options": [
              {
                "value": "default",
                "label": "Default"
              },
              {
                "value": "small",
                "label": "Small"
              },
			  {
                "value": "none",
                "label": "None"
              }
			]
        }, 
	  {
		"type":"checkbox",
		"id":"section_width",
		"label":"Fullwidth?",
		"default": true
	   },
	  {
        "type": "paragraph",
        "content": "Left/Right Padding : Fullwidth Section Only==="
      }, 	
      {
        "type": "range",
        "id": "pad-desk",
        "label": "Desktop",
        "default": 55,
        "min": 0,
        "max": 100,
        "step": 1
      },
      {
        "type": "range",
        "id": "pad-ipad",
        "label": "Tablet",
        "default": 15,
        "min": 0,
        "max": 30,
        "step": 1
      },
      {
        "type": "range",
        "id": "pad-mbl",
        "label": "Mobile",
        "default": 10,
        "min": 0,
        "max": 20,
        "step": 1
      },
	   {
        "type": "checkbox",
        "id": "section_cov",
        "label": "Use Background?",
        "default": false
      },	
	  {
        "type": "color",
        "id": "sec_bg_clr",
        "label": "Background",
		"default":"#fafafa"	
	  },		  
	  {
           "type": "checkbox",
           "id": "hide_mobile",
           "label": "Hide Section in Mobile?",
           "default": false
        },
	  {
        "type": "paragraph",
        "content": "Grid==="
      },
 	 {
		"type":"checkbox",
		"id":"enable_carousel",
		"label":"Enable Carousel",
		"default": true
	  },
	  {
        "type": "range",
        "id": "grid-spacing",
        "label": "Spacing : Desktop",
        "default": 15,
        "min": 0,
        "max": 30,
        "step": 1,
		"unit":"px",
		"info":"space between two grid/box."
      },
     {
        "type": "range",
        "id": "grid-spacing-mbl",
        "label": "Spacing : Mobile",
        "default": 5,
        "min": 0,
        "max": 30,
        "step": 1,
		"unit":"px"		
      },
      {
        "type": "select",
        "id": "style",
        "label": "Style",
        "default": "style1",
        "options": [
			{ "value": "style1", "label": "Style 1" },
			{ "value": "style2", "label": "Style 2" },
			{ "value": "style3", "label": "Style 3" },
			{ "value": "style4", "label": "Style 4" },
			{ "value": "style5", "label": "Style 5" },
			{ "value": "style6", "label": "Style 6" }
        ]
      }, 	
		{
        "type": "select",
        "id": "textalign",
        "label": "Text Aligment",
        "default": "text-center",
        "options": [
			{ "value": "text-left", "label": "Left" },	
			{ "value": "text-center", "label": "Center" }
        ]
      }, 
	  {
		"type":"checkbox",
		"id":"leftpadzero",
		"label":"Text Left Padding Zero",
		"default": false,
		"info":"Enable this if you want to display text on left and transparent background as displayed in Jewellery demo"
	  }, 
 	  {
		"type":"checkbox",
		"id":"product_count",
		"label":"Show Products Count?",
		"default": false
	  }, 
		{
		"type":"checkbox",
		"id":"show_buttons",
		"label":"Show Buttons?",
		"default": false
	  },
	{
            "type": "select",
            "id": "btn-style",
            "label": "Select Button",
            "default": "btn",
            "options": [
              {
              "label": "Solid Button 1",
              "value": "btn"
              },
              {
              "label": "Solid Button 2",
              "value": "btn--secondary"
              },
              {
              "label": "Solid Button 3",
              "value": "btn3"
              },
              {
              "label": "Border Button 1",
              "value": "bdr-btn1"
              },
              {
              "label": "Border Button 2",
              "value": "bdr-btn2"
              } 
            ]
        },
		{
          "type": "select",
          "id": "btn-size-desk",
          "label": "Button Size: Desktop",
          "default": "btn-sm",
          "options": [
          {
          "label": "Small",
          "value": "btn-sm"
          },
          {
          "label": "Medium",
          "value": "btn-md"
          },
          {
          "label": "Large",
          "value": "btn-lg"
          }	
          ]
          }, 
          {
          "type": "select",
          "id": "btn-size-mob",
          "label": "Button Size : Mobile",
          "default": "mob-btn-sm",
          "options": [
          {
          "label": "Small",
          "value": "mob-btn-sm"
          },
          {
          "label": "Medium",
          "value": "mob-btn-md"
          },
          {
          "label": "Large",
          "value": "mob-btn-lg"
          }	
          ]
          },      
	  {
        "type": "paragraph",
        "content": "Items per row ==="
      }, 	
      {
        "type": "range",
        "id": "grid",
        "label": "Desktop",
        "default": 4,
        "min": 2,
        "max": 7,
        "step": 1
      },
      {
        "type": "range",
        "id": "tablet-grid",
        "label": "Tablet",
        "default": 3,
        "min": 1,
        "max": 5,
        "step": 1
      },
      {
        "type": "range",
        "id": "mobile-grid",
        "label": "Mobile",
        "default": 2,
        "min": 1,
        "max": 3,
        "step": 1
      },
	 {
        "type": "color",
        "id": "collection_ttl_hm",
        "label": "Title",
        "default": "#fff"
      },
      {
        "type": "color",
        "id": "collection_ttl_bg_hm",
        "label": "Title Background",
        "default": "#000"
      },
 		{
        "type": "color",
        "id": "collection_ttl_bg_hm_responsive",
        "label": "Title Background Responsive View",
        "default": "#000",
		"info":"When you transparent background for title but you need set background color for mobile view"
      },
      {
        "type": "range",
        "id": "collection_ttl_opt_hm",
        "min": 0,
        "max": 1,
        "step": 0.1,
        "label": "Background Opacity",
        "unit": "%",
        "default": 0.9
      },
	 {
        "type": "range",
        "id": "collection_ttl_rad",
        "min": 0,
        "max": 20,
        "step": 1,
        "label": "Background Border Radious",
        "unit": "px",
        "default": 0
      },
		{
		"type":"checkbox",
		"id":"disable_zoom",
		"label":"Disable Image Hover Zoom Effect?",
		"default": false
	  },
	   {
        "type": "paragraph",      
        "content": "Set font size from --> Theme Settings --> Fonts, Colors and Styles --> Collection List"
      }
    ],
    "blocks": [
      {
        "type": "featured_collection",
        "name": "Collection",
        "settings": [
		  {
          "type": "url",
          "id": "url",
          "label": "Link (optional)",
          "info": "Keep it empty to use 'collection url'."
          },
		  {
			"type":"image_picker",
			"id":"collection_image",
			"label":"Upload Image"			
		  },
		  {
 			"type":"textarea",
			"id":"collection_name",
			"label":"Custom Name",
			"info":"use <strong>your text here</strong> to make your text bold"
		  },
          {
			"type":"image_picker",
			"id":"modal-img",
			"label":"Modal Image"			
		  },
          {
            "type": "textarea",
            "id": "modal-text",
            "label": "Modal Text"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Teams",
        "category": "2. Collection",
        "settings": {
          "grid": 4
        },
        "blocks": [
          {
            "type": "featured_collection"
          },
          {
            "type": "featured_collection"
          },
          {
            "type": "featured_collection"
          },
		  {
            "type": "featured_collection"
          }
        ]
      }
    ]
  }
{% endschema %}
Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
Sohan2198
Tourist
33 0 0

@saim007 ,
Now modal box popup is not showing.
I need popup but in popup image and text both visible
https://hairdramacompanycom-my.sharepoint.com/:v:/g/personal/sohan_lal_hairdramacompany_com/EXTtOQBB...

Shopify_
saim007
Shopify Partner
496 64 83

@Sohan2198 Just search for this code 

 <img id="modal-img" src="{{ block.settings.modal-img | img_url: "medium" }}" alt="Modal Image">

and replace with the below code 

 <img id="modal-img" src="{{ block.settings.modal-img | img_url }}" alt="Modal Image">
Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
Sohan2198
Tourist
33 0 0

@saim007 ,
This code is also not work.

Please help to figure out the  problem

Best,

Sohan

Shopify_