Remove clickable link on image - SS Image Grid

Store Design

Topic summary

A user is working with the SS Image Grid section in Shopify and wants to remove clickable links from images. The images are set to display only (no URLs specified), but they remain clickable and refresh the page when clicked.

Solution Provided:
Remove the anchor tag (<a href="{{ block.settings.url }}">) that wraps around the image element. This tag appears twice in the code and should be deleted along with its closing tag (</a>).

Alternative Option:
If the user wants only the image titles to be clickable (not the images themselves), they can:

  • Remove the anchor tag from around the image
  • Add the anchor tag only around the title div element

A community member provided modified code showing how to restructure the template so titles remain clickable while images become non-interactive. The discussion remains open as the original poster asked a follow-up question about moving all titles to the bottom of images.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hey all,

I am using the SS Image Grid to display a group of images on my site, but by default the images are clickable to allow me to link them to a URL, I have left the URL blank as I just want to use the grid to display the images only but they still remain clickable and when clicked they just refresh the page, is there anyway to disable this? Ive checked the code but can’t see where I need to adjust it?

Thanks

.section__tiles { padding: 0 5px 5px; } @media only screen and (min-width: 992px) { .section__tiles { padding: 5px; } } .section__tile-row { display: flex; flex-wrap: wrap; align-items: flex-start; } @media only screen and (min-width: 992px) { .section__tile-row { align-items: normal; } } .section__tile { position: relative; width: 50%; padding: 5px; font-weight:{{section.settings.font_thickness}}; } @media only screen and (min-width: 992px) { .section__tile { width: 25%; } .section__tile:hover img { filter: brightness(1); } } .section__tile--large { width: 100%; } @media only screen and (min-width: 992px) { .section__tile--large { width: 50%; } } .section__tile a { position: relative; display: block; width: 100%; height: 100%; transition: filter 0.35s; } .section__tile img { display: block; width: 100%; height: 100%; transition: filter 0.35s; object-fit: cover; } .section__tile-title { text-transform: uppercase; letter-spacing: 0.175em; font-size: 12px; position: absolute; bottom: 6px; left: 10px; color: #fff; z-index: 1; } @media only screen and (min-width: 992px) { .section__tile-title { font-size: 15px; margin: 0; bottom: 10px; left: 12px; } } .section__tile a:after { content: ''; background: linear-gradient( 0deg, #000 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 66% ); bottom: 0; left: 0; width: 100%; height: 100%; position: absolute; opacity: 0.25; }

{% if section.settings.max_height != blank %}
{% style %}
#shopify-section-{{ section.id }} .section__tile {
max-height: {{ section.settings.max_height }}px;
}
{% endstyle %}
{% endif %}

{% for block in section.blocks %} {% if forloop.index < 4 %} {% endif %} {% endfor %}
{% for block in section.blocks %} {% if forloop.index >= 4 %} {% endif %} {% endfor %}

{% schema %}
{
“name”: “SS - Image Grid”,
“settings”: [
{
“type”: “text”,
“id”: “max_height”,
“label”: “Max height”,
“default”: “370”,
“info”: “Max height of the image in pixels”
},
{
“type”: “select”,
“id”: “font_thickness”,
“options”: [
{
“value”: “300”,
“label”: “normal”
},
{
“value”: “600”,
“label”: “bold”
}
],
“default”: “300”,
“label”: “Font thickness”
}
],
“presets”: [
{
“name”: “SS - Image Grid”,
“blocks”: [
{
“type”: “block”
},
{
“type”: “block”
},
{
“type”: “block”
},
{
“type”: “block”
},
{
“type”: “block”
},
{
“type”: “block”
}
]
}
],
“max_blocks”: 6,
“blocks”: [
{
“type”: “block”,
“name”: “Block”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“type”: “text”,
“id”: “url”,
“label”: “URL”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Title”,
“default”: “name”
}
]
}
]
}
{% endschema %}

2

Hey @podiummatt1

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hello @podiummatt1 , From your code remove the anchor tag above the image which is “” . Please remove this line of code which is having a link in the anchor tag and also remove the closing tag of the anchor tag "" below the image tag. Remove this anchor tag which occurs 2 time in your code please check.

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

4

If you want a title clickable which is below the image then add anchor tag only there within that div of the title.

make it like below then the image is not clickable only title should clickable.


{% if section.settings.max_height != blank %}
{% style %}
#shopify-section-{{ section.id }} .section__tile {
max-height: {{ section.settings.max_height }}px;
}
{% endstyle %}
{% endif %}

{% for block in section.blocks %}
{% if forloop.index < 4 %}

{{ block.settings.title }}

{% endif %}
{% endfor %}

{% for block in section.blocks %}
{% if forloop.index >= 4 %}

{{ block.settings.title }}

{% endif %}
{% endfor %}

{% schema %}
{
"name": "SS - Image Grid",
"settings": [
{
"type": "text",
"id": "max_height",
"label": "Max height",
"default": "370",
"info": "Max height of the image in pixels"
},
{
"type": "select",
"id": "font_thickness",
"options": [
{
"value": "300",
"label": "normal"
},
{
"value": "600",
"label": "bold"
}
],
"default": "300",
"label": "Font thickness"
}
],
"presets": [
{
"name": "SS - Image Grid",
"blocks": [
{
"type": "block"
},
{
"type": "block"
},
{
"type": "block"
},
{
"type": "block"
},
{
"type": "block"
},
{
"type": "block"
}
]
}
],
"max_blocks": 6,
"blocks": [
{
"type": "block",
"name": "Block",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "url",
"label": "URL"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "name"
}
]
}
]
}
{% endschema %}
5

can I make each images title linkable? the code above seems to make all the titles move to the bottom?

6

Not to make all the titles move to the bottom, add anchor tag only around to the title if you want to title clickable and remove the anchor tag around the image tag.