How can I add a clickable image in Parallax block?

Store Design
1

The section currently only has a Shop Now button. I want to add a clickable link to the image.

2

Hi @CW5

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/custom.scss.css
  3. Add code below to bottom of file
.ishiparallaxbanner .parallaximage .parallax-btn .theme-button:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	cursor: pointer;
}
.ishiparallaxbanner .parallaximage .parallax-title,
.ishiparallaxbanner .parallaximage .parallax-subtitle {
	position: relative;
	z-index: 2;
}
3

Ok, let me try. Just one question: where do I add the link url.

4

Hi @CW5

Code above is using url of shop button. If you would like to use a new link. You need remove code above after that add a option to schema in this section. After you added an option you need use liquid code to add to this link to wrap image as well.

5

Thanks much. I am not a technical person, so I could not understand what you mentioned. Can you or anyone else, explain this in a step by step manner, I would really appreciate. Many thanks.

6

@EBOOST @KetanKumar Any suggestions???

Thanks in advance.

7

Hi @CW5

When you add a url for shop now button after that this url will be applied to image. So when click on image after that it will redirect to url that you added for shop now button.

8

Thanks, I understand how that works. I did not understand the solution you had last suggested above.

9

Hi,

I mean, If you don’t want use the link of Shop now button. You can add more an option like the button link to schema in sections/image_with_text.liquid. After that use this link for image. It can the same the show now link or different

EBOOST_0-1673914526780.png
EBOOST_0-1673914526780.png509×210 6.59 KB

After that you add this code it will show like the screenshow below

EBOOST_1-1673914682916.png
EBOOST_1-1673914682916.png291×437 11.1 KB

10

Thanks. This is the code I see (screenshot). What code should I change?

Screenshot (470).png
Screenshot (470).png1388×805 54.5 KB

11

Hi @CW5

yes

12

Reference my last reply, what code should I change in that section?

13

Still looking for a solution that can be understood and implemented (like what code to put where). Thanks very much.

14

Hi,

You can add code below like the screenshot

{
        "type": "url",
        "id": "img_link",
        "label": "Image link (Optional)"
      },

EBOOST_0-1673952327943.png
EBOOST_0-1673952327943.png1424×754 63.4 KB

Add code below to inner parallaximage block.

{% if section.setting.img_link != blank %} {% endif %}

EBOOST_1-1673952363789.png
EBOOST_1-1673952363789.png1519×102 5.04 KB

CSS

.ishiparallaxbanner .parallax-list {
	position: relative;
	z-index: 2;
}
15

Thank you for your patience on this matter.

You have mentioned 3 codes to insert.

Code 1. Its clear what code to add and where.

Let me clarify on the other codes.

Code 2. You have given the code. Should I add that in ishi_parallaxblock.liquid ? Should i add it at the bottom of the file? Or any specific place?

Code 3. Which file should I insert this code? At the bottom of the file?

Many thanks for your help and appreciate your patience.

16

Hey @EBOOST , not sure you saw my query above. Look forward to your response. Thanks much.

17

Hi,

You only need work on landing_image_with_text.liquid.

Could you share content of this file. I will help to do it.

18

Here it is…

{% capture image_layout %}
{% if section.settings.image != blank %} {{ section.settings.image | img_url: '600x600' | img_tag: section.settings.image.alt, 'feature-row__image' }} {% 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 %} {{ section.settings.button_label | escape }} {% endif %}

{% if section.settings.layout == ‘right’ %}
{{ image_layout }}
{% endif %}

{% schema %}
{
“name”: “Image with text”,
“class”: “index-section”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“type”: “select”,
“id”: “layout”,
“label”: “Layout”,
“default”: “left”,
“options”: [
{
“value”: “left”,
“label”: “Image on left”
},
{
“value”: “right”,
“label”: “Image on right”
}
]
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Image with text”
},
{
“type”: “richtext”,
“id”: “text”,
“label”: “Text”,
“default”: “

Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

”
},
{
“type”: “text”,
“id”: “button_label”,
“label”: “Button label”
},
{
“type”: “url”,
“id”: “button_link”,
“label”: “Button link”
}
],
“presets”: [
{
“name”: “Image with text”,
“category”: “Image”
}
]
}
{% endschema %}

19

Hi,

You can replace with code below


  {% capture image_layout %}
  

    {% if section.settings.img_link != blank %} {%  endif %}
      {% if section.settings.image != blank %}
        {{ section.settings.image | img_url: '600x600' | img_tag: section.settings.image.alt, 'feature-row__image' }}
      {% else %}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {% endif %}
    {% if section.settings.img_link != blank %} {%  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 %}
    
    {{ section.settings.button_label | escape }}
    
  {% endif %}

  {% if section.settings.layout == 'right' %}
    {{ image_layout }}
  {% endif %}

{% schema %}
{
"name": "Image with text",
"class": "index-section",
"settings": [
  {
    "type": "image_picker",
    "id": "image",
    "label": "Image"
  },
  {
        "type": "url",
        "id": "img_link",
        "label": "Image link (Optional)"
      },
  {
    "type": "select",
    "id": "layout",
    "label": "Layout",
    "default": "left",
  "options": [
  {
    "value": "left",
    "label": "Image on left"
  },
  {
    "value": "right",
    "label": "Image on right"
  }
  ]
  },
  {
    "type": "text",
    "id": "title",
    "label": "Heading",
    "default": "Image with text"
  },
  {
    "type": "richtext",
    "id": "text",
    "label": "Text",
    "default": "

Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

"
  },
  {
    "type": "text",
    "id": "button_label",
    "label": "Button label"
  },
  {
    "type": "url",
    "id": "button_link",
    "label": "Button link"
  }
  ],
  "presets": [
    {
      "name": "Image with text",
      "category": "Image"
    }
  ]
}
{% endschema %}

After update code in the customize will appear an option likes the screenshot below

EBOOST_0-1674175572835.png
EBOOST_0-1674175572835.png281×686 11.3 KB

20

Sorry that did not work. Likely because that is the wrong file to be used.

Here are the contents of a file called “ishi_parallaxblock.liquid”

{% comment %} convert our dates to Number of seconds
since 1970-01-01 00:00:00 UTC {% endcomment %}
{% assign time = ‘now’ | date: ‘%s’ %}
{% assign datestart = section.settings.startdate | date: “%s” %}

{% assign dateend = section.settings.enddate | date: “%s” %}
{% assign dateendjs = section.settings.enddate | date: “%F” %}
{% assign deal = 0 %}

{% if datestart <= time and dateend > time %}
{% assign deal = 1 %}
{% else %}
{% assign deal = 0 %}
{% endif %}

{% if section.settings.main-title != blank %}
{{ section.settings.main-title }}
{% endif %} {% if section.settings.subtitle != blank %}
{{ section.settings.subtitle }}
{% endif %} {% if section.settings.button_label != blank and section.settings.button_link != blank %} {% endif %}

.parallax-block-with-timer .parallaximage{
background-image:url({{ section.settings.parallaximage | img_url: ‘master’ }});
}
.parallax-block-with-timer .parallax-color{
background-color: {{ section.settings.parallaxcolor }};
}
.parallax-block-with-timer .parallax-block{
padding: {{ section.settings.parallax_padding }}px 0;
}
.parallax-block-with-timer .parallax-text-right{
float: right;
}
.parallax-block-with-timer .parallax-text-left{
float: left;
}
.parallax-block-with-timer .parallax-text-center{
margin: 0 auto;
display:inline-block;
vertical-align:middle;
}
.parallax-block-with-timer .ishiparallaxbanner .parallax-block .parallax-list .parallax-title{
color: {{ section.settings.parallaxtextcolor1 }};
}

.parallax-block-with-timer .ishiparallaxbanner .parallax-block .parallax-list .parallax-subtitle,
.parallax-block-with-timer .ishiparallaxbanner .parallax-block .parallax-list .parallax-title span{
color: {{ section.settings.parallaxtextcolor2 }};
}
.parallax-block-with-timer .ishiparallaxbanner .parallax-block .parallax-list .parallax-subtitle{
border: 1px dotted {{ section.settings.parallaxtextcolor2 }};
}
@media (max-width: 991px) {
.parallax-block-with-timer .parallax-block{
padding: {{ section.settings.parallax_padding | divided_by: 2 }}px 0;
}
}

{% schema %}
{
“name”: “Ishi Parallax block”,
“class”: “parallax-block-with-timer index-section”,
“settings”: [
{
“type”: “image_picker”,
“id”: “parallaximage”,
“label”: “Background Image”,
“info”: “Size: 1920px X 850px”
},
{
“type”: “color”,
“id”: “parallaxcolor”,
“label”: “Background Color”,
“default”: “#222222”
},
{
“type”: “color”,
“id”: “parallaxtextcolor1”,
“label”: “Text Color1”,
“default”: “#e5604d”
},
{
“type”: “color”,
“id”: “parallaxtextcolor2”,
“label”: “Text Color2”,
“default”: “#ffffff”
},
{
“type”: “header”,
“content”: “Section Top-Bottom Internal Spacing”
},
{
“type”: “range”,
“id”: “parallax_padding”,
“min”: 0,
“max”: 200,
“step”: 20,
“label”: “Internal Space/Padding”,
“default”: 100
},
{
“type”: “header”,
“content”: “Section Settings”
},
{
“type”: “select”,
“id”: “parallax_text_position”,
“label”: “Text Position”,
“default”: “center”,
“options”: [
{ “value”: “left”, “label”: “Left”},
{ “value”: “center”, “label”: “Center”},
{ “value”: “right”, “label”: “Right”}
]
},
{
“type”: “text”,
“id”: “main-title”,
“label”: “Parallax Title”,
“default”: “New Top Brands Available ”
},
{
“type”: “text”,
“id”: “subtitle”,
“label”: “Parallax Subtitle”,
“default”: "The Store Addiction Up To 50% Off "
},
{
“type”: “text”,
“id”: “button_label”,
“label”: “Button Label”,
“default”: “VIEW COLLECTION”
},
{
“type”: “url”,
“id”: “button_link”,
“label”: “Button Link”
}
],
“presets”: [
{
“name”: “Ishi Parallax Block”,
“category”: “ishi themes”
}
]
}
{% endschema %}