Making Image on Homepage Clickable (Attaching a Link to it)

Technical Q&A

Topic summary

Goal: Make the homepage hero/image blocks clickable in Shopify (mainly Debut), linking to a collection or URL.

Working approach (Debut):

  • Add a URL setting to the section schema (JSON) after the existing “button_label” entry: {“type”:“url”,“id”:“image_link”,“label”:“Image link”}.
  • Wrap the hero content (or the image) with … in hero.liquid. For Image with Text (feature-row.liquid), use section.settings.image_link; for Text columns with images (feature-columns.liquid), use block.settings.image_link.

Common issues and fixes:

  • Invalid JSON: place the new field inside the {% schema %} … {% endschema %} block, with correct commas and quotes, typically right after “button_label”.
  • Link saved but not working or redirects to homepage: use the correct scope (section vs block) matching the file/section.
  • Image becomes oversized/zoomed after wrapping: wrap the parent wrapper/div (above the ) instead of the itself to preserve sizing.

Theme notes:

  • Debut: multiple confirmations and file-specific examples (hero.liquid, feature-row.liquid, feature-columns.liquid). A slideshow tutorial was referenced.
  • Minimal/Boundless/Supply: users asked; no confirmed final fix reported.

Status: Partially resolved for Debut with code examples; outstanding issues remain for other themes and some layouts. Screenshots were used to illustrate code placement.

Summarized with AI on January 13. AI used: gpt-5.
8

Hi,

I’ve successfully added to the schema and can now see the option to add an Image Link (woo!).

However, I select a collection for the link and save but no changes have taken place on the live site. The link is saved and showing but is not appearing as an option when I hover over the image.

Any help is much appreciated.

Chris

1 Like