Image on Homepage Clickable (Attaching a Link to an image with text)

[CarmenCuadrado]

Hi everyone!!

I need to link an image on the homepage to a product. I've seen this post that helped me a lot (https://community.shopify.com/c/Technical-Q-A/Making-Image-on-Homepage-Clickable-Attaching-a-Link-to..., but I am using "image with text" instead of "image with text overlay".

Can someone help me please?

I am using Debut theme.

[Hardik29418]

Hello, @CarmenCuadrado 

Welcome to the shopify Community.

Please Go to Online Store -> Themes -> Edit code -> Sections -> feature-row.liquid and remove code till {% schema %} and paste this code.

<div class="page-width feature-row">
  {% capture image_layout %}
    <div class="feature-row__item">
      {% if section.settings.image != blank %}
        {% capture img_id %}FeatureRowImage-{{ section.id }}{% endcapture %}
        {% capture wrapper_id %}FeatureRowImageWrapper-{{ section.id }}{% endcapture %}
        {%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
        {% include 'image-style', image: section.settings.image, height: 545, wrapper_id: wrapper_id, img_id: img_id %}
        <a href="{{ section.settings.button_link }}">
          <div id="{{ wrapper_id }}" class="feature-row__image-wrapper js">
            <div style="padding-top:{{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100}}%;" data-image-loading-animation>
              <img id="{{ img_id }}"
                   class="feature-row__image lazyload"
                   data-src="{{ img_url }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ section.settings.image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ section.settings.image.alt | escape }}">
            </div>
          </div>
        </a>

        <noscript>
          {{ section.settings.image | img_url: '600x600', scale: 2 | img_tag: section.settings.image.alt, 'feature-row__image' }}
        </noscript>
      {% else %}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {% endif %}
    </div>
  {% endcapture %}

  <div class="feature-row">
    {% if section.settings.layout == 'left' %}
      {{ image_layout }}
    {% endif %}

    <div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }}">
      {% if section.settings.title != blank %}
        <h2 class="h3">{{ section.settings.title | escape }}</h2>
      {% endif %}
      {% if section.settings.text != blank %}
        <div class="rte rte-setting featured-row__subtext">{{ section.settings.text }}</div>
      {% endif %}
      {% if section.settings.button_label != blank and section.settings.button_link != blank %}
        {%- capture ariaLabel -%}
          {{- section.settings.button_label -}}
          {%- if section.settings.button_link.type == 'frontpage_link' -%}
            : {{ 'homepage.general.title' | t -}}
          {%- elsif section.settings.button_link.type == 'catalog_link' -%}
            : {{ 'collections.catalog.title' | t -}}
          {%- elsif section.settings.button_link.object.title -%}
            : {{ section.settings.button_link.object.title -}}
          {%- endif -%}
        {%- endcapture -%}

        <a href="{{ section.settings.button_link }}"
          class="btn"
          aria-label="{{ ariaLabel }}">
          {{- section.settings.button_label | escape -}}
        </a>
      {% endif %}
    </div>

    {% if section.settings.layout == 'right' %}
      {{ image_layout }}
    {% endif %}
  </div>
</div>

[CarmenCuadrado]

Hello, @Hardik29418 

Thank you for answering my question. It worked perfectly!!

Do you have the code for doing the same on a "text column with image"?

I've seen it's possible to add a clickable button, but I prefer clicking directly on the image.

Thanks,

Carmen

[Hardik29418 · Accepted solution]

Please Go to Online Store -> Themes -> Edit code -> Sections -> feature-coumns.liquid and remove code till {% schema %} and paste this code.

<div class="page-width">
  {% if section.settings.title != blank %}
    <div class="section-header text-center">
      <h2>{{ section.settings.title | escape }}</h2>
    </div>
  {% endif %}

  <div class="grid {% unless section.blocks.size == 5 %}grid--uniform{% endunless %} grid--flush-bottom">
    {%- assign grid_item_width = 'medium-up--one-third' -%}
    {%- assign max_height = 345 -%}
    {% case section.blocks.size %}
      {% when 1 %}
        {%- assign grid_item_width = 'medium-up--one-half' -%}
        {%- assign max_height = 530 -%}
      {% when 2 %}
        {%- assign grid_item_width = 'medium-up--one-half' -%}
        {%- assign max_height = 530 -%}
      {% when 4 %}
        {%- assign grid_item_width = 'medium-up--one-half' -%}
        {%- assign max_height = 530 -%}
    {% endcase %}
    {% for block in section.blocks %}
      {% if section.blocks.size == 5 and forloop.index < 3 %}
        {%- assign column_width = 'medium-up--one-half' -%}
        {%- assign max_height = 530 -%}
      {% else %}
        {%- assign column_width = grid_item_width -%}
      {% endif %}
      <div class="grid__item {{ column_width }} text-{{ section.settings.align_text }}" {{ block.shopify_attributes }}>
        {% if block.settings.enable_image %}
          {% if block.settings.image != blank %}
            {% capture img_id %}TextColumnImage-{{ block.id }}{% endcapture %}
            {% capture wrapper_id %}TextColumnImageWrapper-{{ block.id }}{% endcapture %}
            {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            {% include 'image-style', image: block.settings.image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
            <a href="{{ block.settings.button_link }}">
              <div id="{{ wrapper_id }}" class="feature-row__image-wrapper js">
                <div style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100}}%;" data-image-loading-animation>
                  <img id="{{ img_id }}"
                       class="feature-row__image lazyload"
                       data-src="{{ img_url }}"
                       data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                       data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                       data-sizes="auto"
                       alt="{{ block.settings.image.alt | escape }}">
                </div>
              </div>
            </a>
            <noscript>
              <p>
                {{ block.settings.image | img_url: '480x480', scale: 2 | img_tag: block.settings.image.alt, 'feature-row__image' }}
              </p>
            </noscript>
          {% else %}
            <p>
              {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
            </p>
          {% endif %}
        {% endif %}
        {% if block.settings.title != blank %}
          <h3 class="h4">{{ block.settings.title | escape }}</h3>
        {% endif %}
        {% if block.settings.text != blank %}
          <div class="rte-setting">{{ block.settings.text }}</div>
        {% endif %}

        {% if block.settings.button_label != blank and block.settings.button_link != blank %}
          {%- capture ariaLabel -%}
            {{- block.settings.button_label -}}
            {%- if block.settings.button_link.type == 'frontpage_link' -%}
              : {{ 'homepage.general.title' | t -}}
            {%- elsif block.settings.button_link.type == 'catalog_link' -%}
              : {{ 'collections.catalog.title' | t -}}
            {%- elsif block.settings.button_link.object.title -%}
              : {{ block.settings.button_link.object.title -}}
            {%- endif -%}
          {%- endcapture -%}

          <a href="{{ block.settings.button_link }}"
            class="btn btn--secondary btn--small"
            aria-label="{{ ariaLabel | escape }}">
            {{- block.settings.button_label | escape -}}
          </a>
        {% endif %}
      </div>
    {% endfor %}
  </div>

  {% if section.blocks.size == 0 %}
    {% include 'no-blocks' %}
  {% endif %}
</div>

[CarmenCuadrado]

Thank you very much @Hardik29418!!

It works perfectly!!

[Hardik29418]

@CarmenCuadrado  Thank you for the update.

[GiLbertQ99]

  I am also faced with the (nearly) same challenge: 

 Trying to add a PWA Code > (<div class='sp_install_msg'>Install Now</div> ) to my Main Homepage (GIF) Image, so that when it is clicked...

A message pops up, based upon that PWA App's Code(Snippet).

[KakeandKreme]

I need help. I am trying to make my featured image (IMAGE WITH TEXT) be clickable and go to my product page. I pasted this code, but nothing is happening. I cant click the image.

[arifahsophia]

Hi! I'm using the Dawn theme and it doesn't have a feature-row.liquid in the Sections area. What can I do to have the images in my homepage clickable? I'm Image with Text.

[ridasdidi]

hi I have the same problem i need my images to be clickable without the button, I'm using the presentation model, can you please help me?

[ridasdidi]

the website is www.naturalraja.com

[ridasdidi]

its the first presentation with 3 pictures, on my website naturalraja.com