Adding Link to an image/banner ( tricky theme)

Solved
Tourist
17 0 0

Hi there i'm struggling with getting an image (banner) to link to a page on click. Ive searched although nothing specifically looks like it addresses my specific situation.

 

my site is limnclothing.com if anyone could offer any assistance?

After the initial banner there is a specific mens/women's collection I would like to have a user be able to click the image or area to go to the specific collection.

 

I tried to do a workaround and do a small image with text. (the text being the link) but on mobile this is totally unpractical and actually makes the site look a bit of a mess. It is also not all that practical on desktop (you cant click the picture but the text) but works.

0 Likes

Hello 

Go to slide.liquid file

Add this schema this will provide option in slider customization to add link:

{
          "type": "url",
          "id": "slide_link",
          "label": "Slide link"
        }

Then search this code:

 <img class="hero__image hero__image--{{ block.id }} lazyload {% unless forloop.first == true %} lazypreload{% endunless %}"
                {% if forloop.first == true %}
                  src="{{ block.settings.image | img_url: '300x' }}"
                {% endif %}
                data-src="{{ img_url }}"
                data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                data-sizes="auto"
                data-parent-fit="cover"
                alt="{{ block.settings.image.alt | escape }}"
                style="object-position: {{ block.settings.image_position }}">

And replace this code with:

  <a href="{{ block.settings.slide_link }}"> <img class="hero__image hero__image--{{ block.id }} lazyload {% unless forloop.first == true %} lazypreload{% endunless %}"
                {% if forloop.first == true %}
                  src="{{ block.settings.image | img_url: '300x' }}"
                {% endif %}
                data-src="{{ img_url }}"
                data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                data-sizes="auto"
                data-parent-fit="cover"
                alt="{{ block.settings.image.alt | escape }}"
                style="object-position: {{ block.settings.image_position }}">
            </a>
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
17 0 0

Thank-you for your help sir.

 

Unfortunately i don't have a slide.liquid under the theme code to add the first snippet

0 Likes
Tourist
17 0 0

Thank-you for your help sir.

 

Unfortunately i don't have a slide.liquid under the theme code to add the first snippet, nor do i have the initial part of the second code to replace (presuming this is in the initial slide.liquid)

0 Likes

Success.

Ok.

Then i have to check your theme code to show the banner.

So that i  can give you the solution.

Give me store access permission if possible.

Email me.

Email: pallavi@oscprofessionals.com

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
17 0 0

thank you for your help sir, i managed to add a href into the div class without editing too much of the .theme file . although it doesn't particularly format well on mobile, it at least works

0 Likes

@DukeNukem,

1. Go to Online Store->Theme->Edit code
2. Asset->styles.scss.liquid->paste bellow code in bottom of file

@media screen and (max-width:749px) {
.banner-image-section .box-inner .banner--image {
	height: 280px;
	background-position: 10% 100%;
}
}

Note:For better Results you have to add another image for mobile

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Tourist
17 0 0

@oscprofessional thanks for your help sir. if i ever need some paid work that is complex i will most certainly come to you. thanks again

0 Likes

@DukeNukem,

ok,
Will always available for you.
you can skype me or email me as well.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes