Make 'Text columns with images' clickable (Debutify theme)

Hi all,

I’ve just changed my hero section and replaced one big img with two small ones to make the store responsive on mobile. However, as you can see the hero is not clickable.

This is my store: https://insunlight.cz/

Does anyone know how to fix it? I’m sure it’s super simple.

Thanks a lot all,

Tereza

1 Like

@terezatexlova

oh sorry for that issue can you please share that section code so i will check and update

Hi Ketan, ahh thanks a lot for doing that!


  

    

      {%- unless section.settings.title == blank and section.settings.subtitle == blank -%}
        

          

            

              {%- unless section.settings.title == blank -%}
                ## {{ section.settings.title | escape }}
              {%- endunless -%}
              {%- unless section.settings.subtitle == blank -%}
                

{{ section.settings.subtitle | escape }}

              {%- endunless -%}
            

           

        

      {%- endunless -%}

      {%- if section.blocks.size > 0 -%}
        

          {%- capture column_width -%}
            {%- render 'block-width' -%}
          {%- endcapture -%}

          
          {%- for block in section.blocks -%}
            

              {%- if block.settings.image != blank -%}
                

                  
                  
                  
                

              {%- elsif block.settings.icon != blank -%}
                {{block.settings.icon}}
              {%- else -%}
                {{ 'image' | placeholder_svg_tag: 'placeholder-svg spacer-bottom' }}
              {%- endif -%}

              ### {{ block.settings.title }}
              {{ block.settings.text }}

              {%- unless block.settings.button_label == blank -%}
                

                  {{ block.settings.button_label | escape }}
                

              {%- endunless -%}
            

          {%- endfor -%}
        

      {%- else -%}
        {%- render 'no-blocks' -%}
      {%- endif -%}

    

  

{% schema %}
  {
    "name": "Text columns with images",
    "class": "featured-columns-section",
    "max_blocks": 4,
    "settings": [
	    {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Featured columns"
      },
	    {
        "type": "text",
        "id": "subtitle",
        "label": "Subheading"
      },
      {
        "type": "select",
        "id": "section_style",
        "label": "Section style",
        "default": "section-blank",
        "options": [
          {
            "value": "section-blank",
            "label": "Blank background"
          },
		      {
            "value": "section-default",
            "label": "Accent background"
          },
          {
            "value": "section-border",
            "label": "Border top"
          }
        ]
      },
	    {
        "type": "select",
        "id": "text_align",
        "label": "Text align",
        "default": "text-center",
        "options": [
          {
            "value": "",
            "label": "Left"
          },
          {
            "value": "text-center",
            "label": "Center"
          },
          {
            "value": "text-right",
            "label": "Right"
          }
        ]
      }
	  ],
	  "blocks" : [
	    {
        "type": "text_block",
        "name": "Column",
        "settings": [
		      {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "text",
            "id": "icon",
            "label": "Icon",
            "info": "[View all available icons](https:\/\/material.io\/resources\/icons)"
          },
          {
            "type": "text",
            "id": "title",
            "label":"Heading",
            "default": "Add a title or tagline"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default":"

Use this text to describe what makes your store stand out from others and why customers should buy from you.

"
          },
		      {
            "type": "select",
            "id": "button_style",
            "label": "Button style",
            "default": "btn--primary",
            "options": [
              {
                "value": "",
                "label": "Default"
              },
              {
                "value": "btn--primary",
                "label": "Full"
              },
              {
                "value": "btn-outline-primary",
                "label": "Outline"
              }
            ]
          },
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
          },
 {
          "type": "url",
          "id": "image_link",
          "label": "Image link"
        }
        ]
      }
    ],
	  "presets": [
      {
        "name":  "Text columns with images",
        "category": "Image and text",
		    "blocks": [
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          }
        ]
      }
    ]
  }
{% endschema %}
1 Like

@terezatexlova

thanks can you please upload this code and add link on theme customization after let me know i will give you one more code


  

    

      {%- unless section.settings.title == blank and section.settings.subtitle == blank -%}
        

          

            

              {%- unless section.settings.title == blank -%}
                ## {{ section.settings.title | escape }}
              {%- endunless -%}
              {%- unless section.settings.subtitle == blank -%}
                

{{ section.settings.subtitle | escape }}

              {%- endunless -%}
            

           

        

      {%- endunless -%}

      {%- if section.blocks.size > 0 -%}
        

          {%- capture column_width -%}
            {%- render 'block-width' -%}
          {%- endcapture -%}

          
          {%- for block in section.blocks -%}
            

              {%- if block.settings.image != blank -%}
                

 {%- unless block.settings.image_link == blank -%}
                  
              {%- endunless -%}
                  
                  
                  
                

              {%- elsif block.settings.icon != blank -%}
                {{block.settings.icon}}
              {%- else -%}
                {{ 'image' | placeholder_svg_tag: 'placeholder-svg spacer-bottom' }}
              {%- endif -%}

              ### {{ block.settings.title }}
              {{ block.settings.text }}

              {%- unless block.settings.button_label == blank -%}
                

                  {{ block.settings.button_label | escape }}
                

              {%- endunless -%}
            

          {%- endfor -%}
        

      {%- else -%}
        {%- render 'no-blocks' -%}
      {%- endif -%}

    

  

{% schema %}
  {
    "name": "Text columns with images",
    "class": "featured-columns-section",
    "max_blocks": 4,
    "settings": [
	    {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Featured columns"
      },
	    {
        "type": "text",
        "id": "subtitle",
        "label": "Subheading"
      },
      {
        "type": "select",
        "id": "section_style",
        "label": "Section style",
        "default": "section-blank",
        "options": [
          {
            "value": "section-blank",
            "label": "Blank background"
          },
		      {
            "value": "section-default",
            "label": "Accent background"
          },
          {
            "value": "section-border",
            "label": "Border top"
          }
        ]
      },
	    {
        "type": "select",
        "id": "text_align",
        "label": "Text align",
        "default": "text-center",
        "options": [
          {
            "value": "",
            "label": "Left"
          },
          {
            "value": "text-center",
            "label": "Center"
          },
          {
            "value": "text-right",
            "label": "Right"
          }
        ]
      }
	  ],
	  "blocks" : [
	    {
        "type": "text_block",
        "name": "Column",
        "settings": [
		      {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
        {
            "type": "url",
            "id": "image_link",
            "label": "Image Link"
          }
          {
            "type": "text",
            "id": "icon",
            "label": "Icon",
            "info": "[View all available icons](https:\/\/material.io\/resources\/icons)"
          },
          {
            "type": "text",
            "id": "title",
            "label":"Heading",
            "default": "Add a title or tagline"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default":"

Use this text to describe what makes your store stand out from others and why customers should buy from you.

"
          },
		      {
            "type": "select",
            "id": "button_style",
            "label": "Button style",
            "default": "btn--primary",
            "options": [
              {
                "value": "",
                "label": "Default"
              },
              {
                "value": "btn--primary",
                "label": "Full"
              },
              {
                "value": "btn-outline-primary",
                "label": "Outline"
              }
            ]
          },
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
          },
 {
          "type": "url",
          "id": "image_link",
          "label": "Image link"
        }
        ]
      }
    ],
	  "presets": [
      {
        "name":  "Text columns with images",
        "category": "Image and text",
		    "blocks": [
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          }
        ]
      }
    ]
  }
{% endschema %}

I replaced my code with yours and it says this so I can’t save it:

This file contains the following errors: Error: Invalid JSON in tag ‘schema’

Any idea how to go around it? Maybe replacing my hero which currently is “Text columns with ims” with gallery and adjust the galaxy img size? Not sure. If you know the solution, please let me know.

1 Like

@terezatexlova

oh srry please send your theme zip file so i will update code