Making Slideshow Images clickable link (Minimal Theme)

NattyIce311
Excursionist
28 0 4

Okay, so I found the solution for getting my slideshow images to be clickable, but now it cuts off the bottom of my images. How do I solve that?

I'm attaching a link to the solution I followed to get my homepage slidehow images to be clickable without a button. 

https://community.shopify.com/c/Shopify-Design/Making-Slideshow-Images-clickable-link-Minimal-Theme/...

 

I have also made my homepage slideshow the entire width of my page, do you think that is effecting the cropping of my homepage slideshow after making it clickable? Here's a link to the code I used:

https://community.shopify.com/c/Shopify-Design/How-to-make-the-homepage-image-banner-full-width-for-...

 

@Bo 

KetanKumar
Shopify Partner
20503 2120 7732

@NattyIce311 

sorry for that issue please share slideshow section code so i will update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
NattyIce311
Excursionist
28 0 4

I'm not sure what that is. Sorry, I'm really new to all of this.

Do you mean the whole slider.liquid Section's code? It's about 1300 lines

0 Likes
NattyIce311
Excursionist
28 0 4

This is the first 200 lines, the rest of the 1100 lines seem to maybe relate to language translation, maybe?

 

{%- if settings.enable_wide_layout -%}
{%- assign max_width = 1280 -%}
{%- else -%}
{%- assign max_width = 970 -%}
{%- endif -%}
{%- assign slide_width = max_width -%}

{%- case section.settings.slider_height -%}
{%- when 'small' -%}
{%- assign slider_desktop_height = '400px' -%}
{%- assign slider_mobile_height = '250px' -%}
{%- when 'medium' -%}
{%- assign slider_desktop_height = '500px' -%}
{%- assign slider_mobile_height = '300px' -%}
{%- when 'large' -%}
{%- assign slider_desktop_height = '600px' -%}
{%- assign slider_mobile_height = '400px' -%}
{%- when 'adapt' -%}
{%- assign min_aspect_ratio = section.blocks[0].settings.image.aspect_ratio | default: 2.0 -%}
{%- endcase -%}

{%- unless section.settings.slider_height == 'adapt' -%}
{%- style -%}
#flexslider--{{ section.id }} .slides__image,
#flexslider--{{ section.id }} .slides svg {
height: {{ slider_desktop_height }};
}

@media screen and (max-width: 768px) {
#flexslider--{{ section.id }} .slides__image,
#flexslider--{{ section.id }} .slides svg {
height: {{ slider_mobile_height }};
}
}
{%- endstyle -%}
{%- endunless -%}

{%- if section.blocks.size > 0 -%}
{%- assign arrow_offset = section.blocks.size | times: 10 | plus: 60 -%}
{%- style -%}
.slider__controls-button--prev {
left: calc(50% - {{ arrow_offset }}px);
}
.slider__controls-button--next {
right: calc(50% - {{ arrow_offset }}px);
}
{%- if section.settings.slider_height == 'adapt' -%}
{%- if section.settings.slider_home_transition == 'fade' -%}
#flexslider--{{ section.id }} .slides {
padding-top: {{ 100.0 | divided_by: min_aspect_ratio }}%;
}
{%- else -%}
#flexslider--{{ section.id }} .flex-viewport {
padding-top: {{ 100.0 | divided_by: min_aspect_ratio }}%;
}
{%- endif -%}
{%- endif -%}
{%- endstyle -%}
<div class="index-section slideshow-section"
role="region"
tabindex="-1"
aria-label="slideshow"
aria-describedby="slideshow-info">
<div class="flexslider flexslider--{{ section.settings.slider_home_transition }}{% if section.settings.slider_height == 'adapt' %} flexslider--adapt{% endif %}"
id="flexslider--{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="slideshow-section"
data-transition="{{ section.settings.slider_home_transition }}"
data-autoplay="{{ section.settings.slider_autorotate }}"
data-speed="{{ section.settings.slider_autorotate_rate | times: 1000 }}"
data-slide-nav-a11y="{{ 'home_page.slideshow.load_slide' | t: slide_number: '[slide_number]' }}"
data-slide-nav-active-a11y="{{ 'home_page.slideshow.active_slide' | t: slide_number: '[slide_number]' }}">
<ul class="slides supports-js">
{%- for block in section.blocks -%}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{%- if block.settings.image.width < max_width -%}
{%- assign slide_width = block.settings.image.width -%}
{%- endif -%}

{%- style -%}
#slide--{{ block.id }}, #slide--{{ block.id }}_clone {
color: {{ block.settings.color_text }};
}
#slide--{{ block.id }}:not(.slide-hide)::before, #slide--{{ block.id }}_clone:not(.slide-hide)::before {
opacity: {{ block.settings.overlay_opacity | divided_by: 100.00 }};
}
{%- endstyle -%}

<li id="slide--{{ block.id }}" class="slides__slide slide-hide" data-slider-item data-flexslider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
{%- if block.settings.image != blank -%}

<style>
.slide__link {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
}
</style>
<a class="slide__link" href="{{ block.settings.button_link }}"></a>


<img class="slides__image lazyload{% unless forloop.first == true %} lazypreload{% endunless %}"
src="{{ block.settings.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
style="{%- if slide_width <= max_width -%}
{%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
min-width: {{ min_width }}%;
{%- endif -%}
object-position: {{ block.settings.alignment }};"
alt="{{ block.settings.image.alt | escape }}">
{%- else -%}
<span>
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</span>
{%- endif -%}

{%- assign show_link_button = false -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
{%- assign show_link_button = true -%}
{%- endif -%}
{%- unless block.settings.slide_heading == blank and show_link_button == false -%}
<div class="slides__text-content text-{{ block.settings.text_alignment }}">
<div class="slides-text-content-wrapper-{{ block.settings.text_alignment }}">
{%- unless block.settings.slide_heading == blank -%}
<h2 class="slides__title slides__title--{{ section.settings.text_size }} h1">
{{ block.settings.slide_heading | escape }}
</h2>
{%- endunless -%}
{%- if show_link_button -%}
<a href="{{ block.settings.button_link }}" class="slides__btn btn">
{{ block.settings.button_label | escape }}
</a>
{%- endif -%}
</div>
</div>
{%- endunless -%}
</li>
{%- endfor -%}
</ul>
<noscript>
{{ section.blocks[0].settings.image | img_url: '1280x', scale: 2 | img_tag: block.settings.image.alt }}
</noscript>
</div>
{%- if section.blocks.size > 1 -%}
<div class="slider__controls-container" data-slider-controls>
{%- if section.settings.slider_autorotate -%}
<button class="slider__controls-button slider__controls-button--pause"
aria-live="polite"
aria-label="{{ 'home_page.slideshow.pause' | t }}"
aria-pressed="false"
data-label-pause="{{ 'home_page.slideshow.pause' | t }}"
data-label-play="{{ 'home_page.slideshow.play' | t }}"
data-slider-pause>
<span class="icon icon-pause" aria-hidden="true"></span>
<span class="icon icon-play" aria-hidden="true"></span>
</button>
{%- endif -%}
<ul class="slider-navigation">
<li>
<button class="slider__controls-button slider__controls-button--prev" aria-label="{{ 'home_page.slideshow.previous_slide' | t }}" data-slider-navigation data-slider-prev>
<span class="icon icon-arrow-left" aria-hidden="true"></span>
</button>
</li>
<li>
<button class="slider__controls-button slider__controls-button--next" aria-label="{{ 'home_page.slideshow.next_slide' | t }}" data-slider-navigation>
<span class="icon icon-arrow-right" aria-hidden="true"></span>
</button>
</li>
</ul>
</div>
{%- endif -%}
<div class="slideshow__mobile-text-container">
{%- for block in section.blocks -%}
{%- assign show_link_button = false -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
{%- assign show_link_button = true -%}
{%- endif -%}
{%- unless block.settings.slide_heading == blank and show_link_button == false -%}
<div class="slides__text-content slides__text-content--mobile text-center" data-mobile-slide-text="{{ forloop.index0 }}" data-text-mobile>
{%- unless block.settings.slide_heading == blank -%}
<h2 class="slides__title slides__title--mobile slides__title--{{ section.settings.text_size }} h1">
{{ block.settings.slide_heading | escape }}
</h2>
{%- endunless -%}
{%- if show_link_button -%}
<a href="{{ block.settings.button_link }}" class="slides__btn slides__btn--mobile btn">
{{ block.settings.button_label | escape }}
</a>
{%- endif -%}
</div>
{%- endunless -%}
{%- endfor -%}
</div>
</div>
{%- endif -%}

0 Likes
NattyIce311
Excursionist
28 0 4

These are the first 200 lines, the rest of the 1100 lines seem to relate to language translation. 

 

{%- if settings.enable_wide_layout -%}
{%- assign max_width = 1280 -%}
{%- else -%}
{%- assign max_width = 970 -%}
{%- endif -%}
{%- assign slide_width = max_width -%}

{%- case section.settings.slider_height -%}
{%- when 'small' -%}
{%- assign slider_desktop_height = '400px' -%}
{%- assign slider_mobile_height = '250px' -%}
{%- when 'medium' -%}
{%- assign slider_desktop_height = '500px' -%}
{%- assign slider_mobile_height = '300px' -%}
{%- when 'large' -%}
{%- assign slider_desktop_height = '600px' -%}
{%- assign slider_mobile_height = '400px' -%}
{%- when 'adapt' -%}
{%- assign min_aspect_ratio = section.blocks[0].settings.image.aspect_ratio | default: 2.0 -%}
{%- endcase -%}

{%- unless section.settings.slider_height == 'adapt' -%}
{%- style -%}
#flexslider--{{ section.id }} .slides__image,
#flexslider--{{ section.id }} .slides svg {
height: {{ slider_desktop_height }};
}

@media screen and (max-width: 768px) {
#flexslider--{{ section.id }} .slides__image,
#flexslider--{{ section.id }} .slides svg {
height: {{ slider_mobile_height }};
}
}
{%- endstyle -%}
{%- endunless -%}

{%- if section.blocks.size > 0 -%}
{%- assign arrow_offset = section.blocks.size | times: 10 | plus: 60 -%}
{%- style -%}
.slider__controls-button--prev {
left: calc(50% - {{ arrow_offset }}px);
}
.slider__controls-button--next {
right: calc(50% - {{ arrow_offset }}px);
}
{%- if section.settings.slider_height == 'adapt' -%}
{%- if section.settings.slider_home_transition == 'fade' -%}
#flexslider--{{ section.id }} .slides {
padding-top: {{ 100.0 | divided_by: min_aspect_ratio }}%;
}
{%- else -%}
#flexslider--{{ section.id }} .flex-viewport {
padding-top: {{ 100.0 | divided_by: min_aspect_ratio }}%;
}
{%- endif -%}
{%- endif -%}
{%- endstyle -%}
<div class="index-section slideshow-section"
role="region"
tabindex="-1"
aria-label="slideshow"
aria-describedby="slideshow-info">
<div class="flexslider flexslider--{{ section.settings.slider_home_transition }}{% if section.settings.slider_height == 'adapt' %} flexslider--adapt{% endif %}"
id="flexslider--{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="slideshow-section"
data-transition="{{ section.settings.slider_home_transition }}"
data-autoplay="{{ section.settings.slider_autorotate }}"
data-speed="{{ section.settings.slider_autorotate_rate | times: 1000 }}"
data-slide-nav-a11y="{{ 'home_page.slideshow.load_slide' | t: slide_number: '[slide_number]' }}"
data-slide-nav-active-a11y="{{ 'home_page.slideshow.active_slide' | t: slide_number: '[slide_number]' }}">
<ul class="slides supports-js">
{%- for block in section.blocks -%}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{%- if block.settings.image.width < max_width -%}
{%- assign slide_width = block.settings.image.width -%}
{%- endif -%}

{%- style -%}
#slide--{{ block.id }}, #slide--{{ block.id }}_clone {
color: {{ block.settings.color_text }};
}
#slide--{{ block.id }}:not(.slide-hide)::before, #slide--{{ block.id }}_clone:not(.slide-hide)::before {
opacity: {{ block.settings.overlay_opacity | divided_by: 100.00 }};
}
{%- endstyle -%}

<li id="slide--{{ block.id }}" class="slides__slide slide-hide" data-slider-item data-flexslider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
{%- if block.settings.image != blank -%}

<style>
.slide__link {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
}
</style>
<a class="slide__link" href="{{ block.settings.button_link }}"></a>


<img class="slides__image lazyload{% unless forloop.first == true %} lazypreload{% endunless %}"
src="{{ block.settings.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
style="{%- if slide_width <= max_width -%}
{%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
min-width: {{ min_width }}%;
{%- endif -%}
object-position: {{ block.settings.alignment }};"
alt="{{ block.settings.image.alt | escape }}">
{%- else -%}
<span>
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</span>
{%- endif -%}

{%- assign show_link_button = false -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
{%- assign show_link_button = true -%}
{%- endif -%}
{%- unless block.settings.slide_heading == blank and show_link_button == false -%}
<div class="slides__text-content text-{{ block.settings.text_alignment }}">
<div class="slides-text-content-wrapper-{{ block.settings.text_alignment }}">
{%- unless block.settings.slide_heading == blank -%}
<h2 class="slides__title slides__title--{{ section.settings.text_size }} h1">
{{ block.settings.slide_heading | escape }}
</h2>
{%- endunless -%}
{%- if show_link_button -%}
<a href="{{ block.settings.button_link }}" class="slides__btn btn">
{{ block.settings.button_label | escape }}
</a>
{%- endif -%}
</div>
</div>
{%- endunless -%}
</li>
{%- endfor -%}
</ul>
<noscript>
{{ section.blocks[0].settings.image | img_url: '1280x', scale: 2 | img_tag: block.settings.image.alt }}
</noscript>
</div>
{%- if section.blocks.size > 1 -%}
<div class="slider__controls-container" data-slider-controls>
{%- if section.settings.slider_autorotate -%}
<button class="slider__controls-button slider__controls-button--pause"
aria-live="polite"
aria-label="{{ 'home_page.slideshow.pause' | t }}"
aria-pressed="false"
data-label-pause="{{ 'home_page.slideshow.pause' | t }}"
data-label-play="{{ 'home_page.slideshow.play' | t }}"
data-slider-pause>
<span class="icon icon-pause" aria-hidden="true"></span>
<span class="icon icon-play" aria-hidden="true"></span>
</button>
{%- endif -%}
<ul class="slider-navigation">
<li>
<button class="slider__controls-button slider__controls-button--prev" aria-label="{{ 'home_page.slideshow.previous_slide' | t }}" data-slider-navigation data-slider-prev>
<span class="icon icon-arrow-left" aria-hidden="true"></span>
</button>
</li>
<li>
<button class="slider__controls-button slider__controls-button--next" aria-label="{{ 'home_page.slideshow.next_slide' | t }}" data-slider-navigation>
<span class="icon icon-arrow-right" aria-hidden="true"></span>
</button>
</li>
</ul>
</div>
{%- endif -%}
<div class="slideshow__mobile-text-container">
{%- for block in section.blocks -%}
{%- assign show_link_button = false -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
{%- assign show_link_button = true -%}
{%- endif -%}
{%- unless block.settings.slide_heading == blank and show_link_button == false -%}
<div class="slides__text-content slides__text-content--mobile text-center" data-mobile-slide-text="{{ forloop.index0 }}" data-text-mobile>
{%- unless block.settings.slide_heading == blank -%}
<h2 class="slides__title slides__title--mobile slides__title--{{ section.settings.text_size }} h1">
{{ block.settings.slide_heading | escape }}
</h2>
{%- endunless -%}
{%- if show_link_button -%}
<a href="{{ block.settings.button_link }}" class="slides__btn slides__btn--mobile btn">
{{ block.settings.button_label | escape }}
</a>
{%- endif -%}
</div>
{%- endunless -%}
{%- endfor -%}
</div>
</div>
{%- endif -%}

0 Likes

Can you share the link to your store?

Laura | UK Shopify Partner & Theme Developer at Fizzy Pixel

- Was my reply helpful? Please Like and Accept as Solution.

- Looking for more help? Email me at laura@fizzypixel.co.uk or visit our website.

0 Likes
NattyIce311
Excursionist
28 0 4

It is https://naked-city-clothing.myshopify.com/ 

password Nakedcity3730

The site isn't live yet

0 Likes

It looks like your have included an extra bit of text in the template file... &ZeroWidthSpace;

Screenshot 2021-07-18 at 20.45.01.png

If you delete that, it should work fine.

Hope that helps!

Laura | UK Shopify Partner & Theme Developer at Fizzy Pixel

- Was my reply helpful? Please Like and Accept as Solution.

- Looking for more help? Email me at laura@fizzypixel.co.uk or visit our website.

0 Likes
NattyIce311
Excursionist
28 0 4

The issue is that the store owner wants the slide show to be full width, but nothing else on the homepage, but also have the slideshow images be clickable. 

0 Likes

To make just the homepage slider full-width, you can add the following CSS:

.shopify-section.index-section {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 15px;
}

Hope that helps!

Laura | UK Shopify Partner & Theme Developer at Fizzy Pixel

- Was my reply helpful? Please Like and Accept as Solution.

- Looking for more help? Email me at laura@fizzypixel.co.uk or visit our website.