How to make images clickable on "text columns with images" for Spark theme please?

[34ll]

Hello everyone,

I've "text columns with images" section on my website with Spark theme and I'm wondering how can I do to make images clickable on this section?

Thank you all.

Here is Sections/text-columns-with-images.liquid code:

<div
  data-section-id="{{ section.id }}"
  data-section-type="text-columns-with-images"
  class="
    text-columns-with-images
    text-columns-with-images--columns-{{ section.settings.columns }}
    text-columns-with-images--text-{{ section.settings.text_alignment }}
    {% if section.settings.image_shape == 'round' -%}
      text-columns-with-images--image-rounded
    {%- endif %}
    section
    section--small
    {{ section.settings.section_padding }}

    {% if section.settings.section_contrast -%}
      section--contrast
    {%- endif %}

    {% if settings.contrast_spacer -%}
      section--contrast-spacer
    {%- endif %}
    {% if settings.enable_reveal_animations and section.settings.enable_animation %}
      animation
    {% endif %}
  "
  style="
    --text-max-width: 42rem;
    --padding-amount: {{ section.settings.padding_amount }};
    
  "
>
  
  <div class="section__inner">
    <div class="text-columns-with-images__grid">
      
      {%- for block in section.blocks -%}
        
        {%-
          
          render 'text-columns-with-images-item' with
          columns: section.settings.columns,
          image: block.settings.image,
          heading: block.settings.heading,
          subheading: block.settings.subheading,
          text_max_width: block.settings.text_max_width,
          link: block.settings.link,
          link_text: block.settings.link_text
          button_size: button_size,
           -%}
      {%- endfor -%}
      </div>
  </div>
  
</div>

{% schema %}
{
  "name": "t:sections.text_columns_with_images.name",
  "tag": "section",
  "class": "shopify-section--stackable shopify-section--small shopify-section--text-first",
  "disabled_on": {
    "groups": ["header", "custom.overlay"]
  },
  "settings": [
    {
      "type": "range",
      "id": "columns",
      "label": "t:sections.text_columns_with_images.settings.columns.label",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 4
    },
    {
      "id": "image_shape",
      "type": "radio",
      "label": "t:sections.text_columns_with_images.settings.image_shape.label",
      "default": "round",
      "options": [
        { "value": "round", "label": "t:sections.text_columns_with_images.settings.image_shape.options__1" },
        { "value": "square", "label": "t:sections.text_columns_with_images.settings.image_shape.options__2" }
      ]
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "t:sections.text_columns_with_images.settings.text_alignment.label",
      "default": "center",
      "options": [
        {
          "value": "left",
          "label": "t:sections.text_columns_with_images.settings.text_alignment.options__1"
        },
        {
          "value": "center",
          "label": "t:sections.text_columns_with_images.settings.text_alignment.options__2"
        }
      ]
    },
    {
      "type": "header",
      "content": "t:shared.settings.section_style.header_style.content"
    },
    {
      "id": "enable_animation",
      "type": "checkbox",
      "label": "t:shared.settings.section_style.enable_animation.label",
      "info": "t:shared.settings.section_style.enable_animation.info",
      "default": true
    },
    {
      "id": "section_contrast",
      "type": "checkbox",
      "label": "t:sections.text_columns_with_images.settings.section_contrast.label",
      "default": true
    },
    {
      "type": "select",
      "id": "section_padding",
      "label": "t:shared.settings.section_style.section_padding.label",
      "default": "section--vertical-padding-top-bottom",
      "options": [
        {
          "label": "t:shared.settings.section_style.section_padding.option_both",
          "value": "section--vertical-padding-top-bottom"
        },
        {
          "label": "t:shared.settings.section_style.section_padding.option_top",
          "value": "section--vertical-padding-top-only"
        },
        {
          "label": "t:shared.settings.section_style.section_padding.option_bottom",
          "value": "section--vertical-padding-bottom-only"
        },
        {
          "label": "t:shared.settings.section_style.section_padding.option_none",
          "value": "section--vertical-padding-none"
        }
      ]
    },
    {
      "type": "select",
      "id": "padding_amount",
      "label": "t:shared.settings.section_style.padding_amount.label",
      "default": "1.0",
      "options": [
        {
          "label": "t:shared.settings.section_style.padding_amount.option_full",
          "value": "1.0"
        },
        {
          "label": "t:shared.settings.section_style.padding_amount.option_half",
          "value": "0.5"
        },
        {
          "label": "t:shared.settings.section_style.padding_amount.option_minimum",
          "value": "0.075"
        }
      ]
    }
  ],
  "max_blocks": 8,
  "blocks": [
    {
      "type": "column",
      "name": "t:sections.text_columns_with_images.blocks.column.name",
      "settings": [
        {
          "id": "image",
          "type": "image_picker",
          "label": "t:sections.text_columns_with_images.blocks.column.settings.image.label",
          "info": "t:sections.text_columns_with_images.blocks.column.settings.image.info"
        },
        {
          "id": "heading",
          "type": "text",
          "label": "t:sections.text_columns_with_images.blocks.column.settings.heading.label",
          "default": "Feature heading"
        },
        {
          "id": "subheading",
          "type": "richtext",
          "label": "t:sections.text_columns_with_images.blocks.column.settings.subheading.label",
          "default": "<p>Tell a story, explain a detail about your product, or describe a new promotion.</p>"
        },
        {
          "type": "range",
          "id": "text_max_width",
          "label": "t:sections.text_columns_with_images.blocks.column.settings.text_max_width.label",
          "min": 24,
          "max": 48,
          "step": 1,
          "default": 42
        },
        {
          "id": "link",
          "type": "url",
          "label": "t:sections.text_columns_with_images.blocks.column.settings.link.label"
        },
        {
          "id": "link_text",
          "type": "text",
          "label": "t:sections.text_columns_with_images.blocks.column.settings.link_text.label",
          "default": "Read more"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.text_columns_with_images.presets.name",
      "blocks": [
        {
          "type": "column"
        },
        {
          "type": "column"
        },
        {
          "type": "column"
        },
        {
          "type": "column"
        }
      ]
    }
  ]
}
{% endschema %}

[webwondersco]

@34ll Could you please share your store URL? also, share screenshot where you want to update

[34ll]

Thank you @webwondersco for your reply,

Here is screenshot section and URL: https://bisous-skateboards.myshopify.com/

[webwondersco]

@34ll The website is password protected. could you please share password to check frontend

[34ll]

Sorry I can't,

I can provide you frontend infos if you need though 😉

[webwondersco]

@34ll I am asking about front front-end password to load your website.

This one:

[34ll]

@webwondersco Got it😉 but I can't give you password sorry.

What infos from front-end do you need?

[webwondersco]

@34ll Without checking the front end how can assist you?

[34ll]

@webwondersco no more password 😊
Here is the URL https://bisous-skateboards.myshopify.com/

[webwondersco · Accepted solution]

@34ll Remove the CSS you have added of padding-top.

And add below line of CSS at the end of your theme.css file.

.text-columns-with-images__item-inner{
	position:relative;
}
h4.text-columns-with-images__item-heading a::before {
    content: '';
    height:180px;
    width:180px;
    display:inline-flex;
    position:absolute;
    inset:0;
    margin: 0 auto;
}

[34ll]

Thank you a lot @webwondersco for your help it's all good 🙏✨