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/topic/617524)), but I am using “image with text” instead of “image with text overlay”.
Can someone help me please?
I am using Debut theme.
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.
{% capture image_layout %}
{% 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 %}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% endcapture %}
{% if section.settings.layout == 'left' %}
{{ image_layout }}
{% endif %}
{% if section.settings.title != blank %}
## {{ section.settings.title | escape }}
{% endif %}
{% if section.settings.text != blank %}
{{ section.settings.text }}
{% 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 -%}
{{- section.settings.button_label | escape -}}
{% endif %}
{% if section.settings.layout == 'right' %}
{{ image_layout }}
{% endif %}
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
Please Go to Online Store → Themes → Edit code → Sections → feature-coumns.liquid and remove code till {% schema %} and paste this code.
{% if section.settings.title != blank %}
## {{ section.settings.title | escape }}
{% endif %}
{%- 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 %}
{% 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 %}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% endif %}
{% if block.settings.title != blank %}
### {{ block.settings.title | escape }}
{% endif %}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% 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 -%}
{{- block.settings.button_label | escape -}}
{% endif %}
{% endfor %}
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
Thank you very much @Hardik29418 !!
It works perfectly!!
@CarmenCuadrado Thank you for the update.
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.
I am also faced with the (nearly) same challenge:
Trying to add a PWA Code > (
A message pops up, based upon that PWA App’s Code(Snippet).
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?
the website is www.naturalraja.com
its the first presentation with 3 pictures, on my website naturalraja.com
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.