Is there a way to make specific image sections clickable on shopify?

[ChrisDLPZ]

Been trying to make this section’s images clickable but can’t. Tried different youtube tutorials too. Can you point me to the right direction please?

[tim_1]

You need to share a link to your page in question and preview password if one set.

There are so many possibilities that it’s impossible to guess proper solution without seeing your store. (And you already know this as none of tutorials worked for you ).

[ChrisDLPZ]

Tylers Coffees | Acid Free Coffee

here it is

[tim_1]

Now it can be done.

Go to Customize then on homepage template add a “Custom liquid” section.
Paste this code:

<style>
  .related-modalities .row {
    position: relative;
  }
  .related-modalities a:after {
    content: "";
    position:absolute;
    inset:0;
  }
</style>

Unfortunately, “Custom CSS” settings do not accept content properties, so we have to do it like this.
Or you can add code between <style> and </style> to any stylesheet asset you have, but…

This will make entire blocks clickable. (not just image, text too. Making only image clickable can be done on desktop, but would not work on mobile with CSS only)

[ChrisDLPZ]

Thanks a ton, Tim! I’ll try to figure out the mobile viersion of it

[ChrisDLPZ]

It’s saying correct the errors to save the changes

[amilyroie]

Thanks for providing me this type of solution and make this easier for us .

[Moid.space]

Add a URL setting in the section schema, then wrap the image tag with an <a> using block.settings.link. Did this on a client build, just replace the image output with: <a href="{{ block.settings.link }}">{{ block.settings.image | image_url | image_tag }}</a>.

[ChrisDLPZ]

Does that allow your client to make the images clickable and redirects to another page?

Thank for this btw!

[tim_1]

As is, the code should work on mobile too.
Make sure you’re using the “Custom liquid” section, not “Custom CSS” setting.
Share a screenshot.

Basically, it adds a transparent pseudo-element child to your button element which covers entire row block.

This is more of a fun exercise

If you want only image and button clickable, you can do it on desktop because you can always tell exact image position – it’s half of the block.
You can use code like this:

  .related-modalities .row {
    position: relative;
  }
  .related-modalities a:after {
    content: "";
    position:absolute;
    inset:0; /* cover entire row on mobile */
  }
@media (min-width:768px) {
  .related-modalities  a:after {
    inset: 0 0 0 50%; /* only right half on desktop */
  }
  .related-modalities .flex-md-row-reverse a:after {
      inset: 0 50% 0 0; /* only left half on desktop for odd rows */
  }
}

To position this “button extension” over image only (on screenshot i’ve added some visibility to this extension for illustration)

However on mobile it’s not always half since text can vary in height.

There are tricks to make them equal height on mobile too, but this may look not as good…

[ChrisDLPZ]

I did but it’s not taking effect

[tim_1]

For “Custom liquid” you need to wrap CSS code with <style> and </style>, like in my first code snippet.