Can I link a product photo directly to an external website on Ira theme?

Store Design

Topic summary

Link product images in the collection/overview to external URLs (Ira theme) using product metafields and small theme edits. Metafields are custom fields on products you can reference in templates.

What worked on the collection grid:

  • Create a product metafield (e.g., custom.dynamic_link) to store the external URL (include http/https or mailto).
  • In main-collection-product-grid.liquid, pass the metafield to the product card (external_link: product.metafields.custom.dynamic_link.value).
  • In snippets/card-product.liquid, replace all instances of {{ card_product.url }} with a conditional: if external_link then use it, else fallback to card_product.url.
  • A variable mismatch was corrected (passing product instead of card_product) to make it work.

Open in new tab:

  • Add target=“_blank” to the link tag.

Applying to other areas (ongoing):

  • For Product Recommendations and Search, similar edits are needed where image/title links are rendered. Use the same metafield.
  • In predictive.search-liquid, the anchor currently uses {{ product.url }}; it likely needs the same conditional swap to the metafield and target=“_blank”.

No built-in theme supports this natively; solution requires custom code. The search/recommendations updates are not yet confirmed resolved. Code snippets and screenshots were central to the implementation.

Summarized with AI on December 17. AI used: gpt-5.
3

Thanks for your reply. My theme section will look very similar to the Ira theme demo version product site: https://themes.shopify.com/themes/ira/styles/active/preview?surface_detail=minimalist&surface_inter_position=1&surface_intra_position=11&surface_type=collection

What do I need to do to link to external websites when clicking on a product photo?

Further question: Are there other themes that offer this functionality without extra coding?