FROM CACHE - en_header
Promotion image

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

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

Sohan2198
Pathfinder
123 8 18
‎04-25-2024 02:22 AM

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_
Labels:
462 Views
0 Likes
Report
Replies 4 (4)

saim007
Shopify Partner
602 74 102
‎04-25-2024 02:29 AM

@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 🙂
451 Views
0 Likes
Report
In response to saim007

Sohan2198
Pathfinder
123 8 18
‎04-25-2024 02:36 AM

@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_
423 Views
0 Likes
Report
In response to Sohan2198

saim007
Shopify Partner
602 74 102
‎04-25-2024 02:59 AM

@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 🙂
414 Views
0 Likes
Report
In response to saim007

Sohan2198
Pathfinder
123 8 18
‎04-25-2024 03:17 AM

@saim007 ,
This code is also not work.

Please help to figure out the  problem

Best,

Sohan

Shopify_
406 Views
0 Likes
Report

Community Blog Articles

page_thumb_platform Cropped.png
Get ready for peak holiday selling season 2024

By investing 30 minutes of your time, you can unlock the potential for increased sales,...

By Jacqui Sep 11, 2024
03 leaderboard.webp
Highlights | Top Contributors August '24

We appreciate the diverse ways you participate in and engage with the Shopify Communi...

By JasonH Sep 9, 2024
Jacqui_0-1725391911908.jpeg
Recap | An AMA with 2H Media: Marketing Your Shopify Store!

Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...

By Jacqui Sep 6, 2024
Terms of Service Privacy Policy