Re: Question about make image banner and slideshow clickable

Solved

Question about make image banner and slideshow clickable

Newcommer999
Tourist
11 0 2

Hi friends,

 

I am using the Aesthetic theme for my shopify store. I want to make image banner and slideshows clickable. I watched several youtube tutorials, but these tutorials are based on Dawn theme. I tried all the tutorials' suggestions, but none of them work on my theme. Do anyone here know how to do this on Aesthetic theme. Thank you in advance. 

Accepted Solution (1)
namphan
Shopify Partner
1817 232 252

This is an accepted solution.

Hi @Newcommer999,

Please change all code:

{{ 'section-slideshow.css' | asset_url | stylesheet_tag }}
<script src="{{ 'section-slideshow.js' | asset_url }}" defer="defer"></script>

{% style %}
{% render 'section-margin' %}
{% endstyle %}

{% liquid
assign slide_effects = section.settings.slide_effects
assign slide_effects_split_screen = section.settings.slide_effects_split_screen
assign slideshow_speed = section.settings.slideshow_speed
assign autoplay = section.settings.is_autoplay
assign loop = section.settings.is_loop
assign stop_autoplay = section.settings.is_hover_stop_autoplay
assign slideshow_delay = section.settings.slideshow_delay
assign parallax = section.settings.parallax
assign image_size = section.settings.image_size
assign slideshow_type = section.settings.section_layout
assign content_alignment = section.settings.content_alignment
assign section_size = section.settings.section_size

case image_size
when 'adapt'
assign section_height = 0
assign slide_class = image_size
when 'large'
assign section_height = 'calc(100vh - var(--header-height) - var(--announcement-height))'
assign slide_class = image_size
else
assign section_height = 'calc(100vh - var(--header-height) - var(--announcement-height))'
assign slide_class = image_size
endcase

if section.settings.header_overlay == true and slideshow_type == 'overlay' and section_size == 'full'
assign has_overlay = true
else
assign has_overlay = false
endif

if section.blocks.size == 1
assign has_even_paddings = true
elsif section.settings.show_bullets == false
assign has_even_paddings = true
else
assign has_even_paddings = false
endif
%}
<div
class="slideshow {{ slide_class }}"
data-id="shopify-section-{{ section.id }}"
data-autoplay="{{ autoplay }}"
data-stop-autoplay="{{ stop_autoplay }}"
data-speed="{{ slideshow_speed }}"
data-delay="{{ slideshow_delay }}"
data-effect="{{ slide_effects }}"
data-effect-split-screen="{{ slide_effects_split_screen }}"
data-loop="{{ loop }}"
data-parallax="{{ parallax }}"
data-slideshow-type="{{ slideshow_type }}"
data-slide-count="{{ section.blocks.size }}"
data-slideshow-size="{{ section_size }}"
{% if has_overlay %}
data-header-overlay="true"
{% endif %}
>
{% if section_size == "container" %}
<div class="container slideshow__container">
{% endif %}
{% if slideshow_type == "overlay" %}
<div class="slideshow__swiper swiper">
<div class="slideshow__wrapper swiper-wrapper">
{% for block in section.blocks %}
{% liquid
assign image_height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio
assign adapt_height = 1 | divided_by: block.settings.image.aspect_ratio | times: 100 | append: '%'
if image_size == 'adapt'
assign section_height = adapt_height
endif
%}
{% style %}
[data-id="{{ block.id }}"].slideshow-slide {
--slide-overlay: rgba(var(--color-overlay), {{ block.settings.overlay_opacity }});
--slide-height: {{ section_height }};
{% if image_size != 'adapt' and image_size != 'large' %}
aspect-ratio : {{ image_size }};
{% endif %}
}
{% endstyle %}
<div
class="slideshow-swiper__slide swiper-slide{% if has_overlay %} color-background-3{% else %} color-{{ block.settings.color_scheme }}{% endif %}"
data-color-scheme="{% if has_overlay %}color-background-3{% else %}color-{{ block.settings.color_scheme }}{% endif %}"
{{ block.shopify_attributes }}
>
<div class="slideshow-slide" data-id="{{ block.id }}">
<div class="slideshow-slide__container {% if section_size != "container" %}container section-full-screen{% endif %}">
{% if block.settings.image != blank %}
<div class="slideshow-slide__img {% if block.settings.overlay_enable %}have-overlay{% endif %}">
{% liquid
assign width_adapt_ratio = 1
if block.settings.image.width > block.settings.image.height
assign width_adapt_ratio = 550 | times: block.settings.image.aspect_ratio | round: 2
endif

if section_size == "full"
assign desktop_width = "100vw"
else
assign desktop_width = "calc(100vw - 64px * 2)"
endif
%}
{% capture sizes %}
(min-width: 1200px) {{desktop_width}},
{% if width_adapt_ratio != 1 %}
{{ width_adapt_ratio }}px
{% else %}
100vw
{% endif %}
{% endcapture %}
{{
block.settings.image
| image_url: width: block.settings.image.width
| image_tag:
loading: 'lazy',
width: block.settings.image.width,
height: image_height,
sizes: sizes,
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
}}
</div>
{% endif %}
<div class="slideshow-slide__content{% if content_alignment == "left" %} content-left{% endif %}{% if has_overlay %} slideshow-slide__content--header-overlay{% endif %}{% if has_even_paddings %} slideshow-slide__content--even-paddings{% endif %}">
{% if block.settings.subheading != blank %}
<div
class="subheading slideshow-slide__subheading"
data-swiper-parallax="-1500"
>
{{ block.settings.subheading }}
</div>
{% endif %}
{% if block.settings.heading != blank %}
<h1
class="slideshow-slide__title {{ block.settings.heading_size }}"
data-swiper-parallax="-1000"
>
{{ block.settings.heading }}
</h1>
{% endif %}
{% if block.settings.text != blank %}
<div
class="slideshow-slide__desc richtext__content"
data-swiper-parallax="-1000"
>
{{ block.settings.text }}
</div>
{% endif %}
{% if block.settings.primary_button_label != blank or block.settings.secondary_button_label != blank %}
<div
class="slideshow-slide__buttons"
data-swiper-parallax="-1500"
>
{% if block.settings.primary_button_label != blank %}
{% render 'button',
btn_label: block.settings.primary_button_label,
btn_link: block.settings.primary_button_link,
btn_size: 'primary',
btn_style: 'primary',
%}
{% endif %}
{% if block.settings.secondary_button_label != blank %}
{% render 'button',
btn_label: block.settings.secondary_button_label,
btn_link: block.settings.secondary_button_link,
btn_size: 'primary',
btn_style: 'tertiary'
%}
{% endif %}
</div>
{% endif %}
</div>
<a href="{{ block.settings.primary_button_link }}" style="
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
"></a>
</div>
</div>
</div>
{% endfor %}
</div>
{% if section.blocks.size > 1 %}
{% if content_alignment == "left" and section.blocks.size > 1 %}
<div class="swiper-controls__wrapper no-js-hidden">
<div class="{% if section_size != "container" %}container section-full-screen{% endif %}">
<div class="swiper-controls__box">
{% endif %}
{% if section.settings.show_bullets %}
<div class="swiper-pagination"></div>
{% endif %}
{% if section.settings.show_arrows %}
<div class="swiper-buttons__wrapper">
{% if content_alignment == "center" %}
<div class="swiper-buttons__container container {% if section_size == "container" %}section-in-container{% endif %}">
{% endif %}
<div class="swiper-buttons__box">
<div class="swiper-button swiper-button-prev {% if content_alignment == "center" %}swiper-button--large{% endif %}">
{% if content_alignment == "center" %}
<span>{% render 'icon-big-arrow' %}</span>
{% else %}
<span>{% render 'icon-arrow' %}</span>
{% endif %}
</div>
<div class="swiper-button swiper-button-next {% if content_alignment == "center" %}swiper-button--large{% endif %}">
{% if content_alignment == "center" %}
<span>{% render 'icon-big-arrow' %}</span>
{% else %}
<span>{% render 'icon-arrow' %}</span>
{% endif %}
</div>
</div>
{% if content_alignment == "center" %}
</div>
{% endif %}
</div>
{% endif %}
{% if content_alignment == "left" %}
</div>
</div>
</div>
{% endif %}
{% endif %}
</div>
{% else %}
<div class="split-screen-slideshow">
<div class="split-screen-slideshow__content-slider">
<div class="split-screen-slideshow__content-swiper swiper">
<div class="swiper-wrapper">
{% for block in section.blocks %}
<div
class="swiper-slide split-screen-slideshow-slide color-{{ block.settings.color_scheme }}"
{{ block.shopify_attributes }}
data-color-scheme="color-{{ block.settings.color_scheme }}"
>
<div class="split-screen-slideshow-slide__container{% if section_size != "container" %} container section-full-screen{% endif %}">
<div class="split-screen-slideshow-slide__content{% if content_alignment == "left" %} content-left{% endif %}{%if section.blocks.size > 1 and section.settings.show_bullets %} large-padding-bottom{% endif %}">
{% if block.settings.subheading != blank %}
<div
class="subheading split-screen-slideshow-slide__subheading"
data-swiper-parallax="-100"
>
{{ block.settings.subheading }}
</div>
{% endif %}
{% if block.settings.heading != blank %}
<h1 class="split-screen-slideshow-slide__title {{ block.settings.heading_size }}">
{{ block.settings.heading }}
</h1>
{% endif %}
{% if block.settings.text != blank %}
<div class="split-screen-slideshow-slide__desc richtext__content">
{{ block.settings.text }}
</div>
{% endif %}
{% if block.settings.primary_button_label != blank or block.settings.secondary_button_label != blank %}
<div
class="slideshow-slide__buttons"
data-swiper-parallax="-100"
>
{% if block.settings.primary_button_label != blank %}
{% render 'button',
btn_label: block.settings.primary_button_label,
btn_link: block.settings.primary_button_link,
btn_size: 'primary',
btn_style: 'primary',
%}
{% endif %}
{% if block.settings.secondary_button_label != blank %}
{% render 'button',
btn_label: block.settings.secondary_button_label,
btn_link: block.settings.secondary_button_link,
btn_size: 'primary',
btn_style: 'tertiary'
%}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
{%- if section.blocks.size > 1 -%}
<div class="swiper-controls__wrapper no-js-hidden">
<div class="container section-full-screen">
<div class="swiper-controls__box">
{% if section.settings.show_bullets %}
<div class="swiper-pagination"></div>
{% endif %}
</div>
</div>
</div>
{% endif %}
</div>
</div>
<div class="split-screen-slideshow__image-slider">
<div class="split-screen-slideshow__image-swiper swiper">
<div class="swiper-wrapper">
{% for block in section.blocks %}
{% liquid
assign image_height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio
assign adapt_height = 1 | divided_by: block.settings.image.aspect_ratio | times: 100 | append: '%'
if image_size == 'adapt'
assign section_height = adapt_height
endif
%}
{% style %}
#{{ block.id }} .split-screen-slideshow__image-slider__box{
--slide-overlay : rgba(var(--color-overlay), {{ block.settings.overlay_opacity }});
--slide-height : {{ section_height }};
{% if image_size != 'adapt' and image_size != 'large' %}
aspect-ratio : {{ image_size }};
{% endif %}
}
{% endstyle %}
<div
class="swiper-slide {% if block.settings.image == blank %}split-screen-slideshow__image-slider__slide{% endif %} color-background-3"
id="{{ block.id }}"
{{ block.shopify_attributes }}
>
<div class="split-screen-slideshow__image-slider__box {% if block.settings.overlay_enable %}have-overlay{% endif %}">
{% if block.settings.image != blank %}
{% liquid
if section_size == "full"
assign desktop_width = "60vw"
else
assign desktop_width = "calc(60vw - 64px)"
endif
%}
{% capture sizes %}
(min-width: 1200px) {{desktop_width}},
(min-width: 990px) 60vw,
100vw
{% endcapture %}
{{
block.settings.image
| image_url: width: block.settings.image.width
| image_tag:
loading: 'lazy',
width: block.settings.image.width,
height: image_height,
sizes: sizes,
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
}}
{% else %}
<div class="image-slider-placeholder">
{{ 'image' | placeholder_svg_tag }}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{%- if section.blocks.size > 1 -%}
<div class="swiper-controls__wrapper no-js-hidden color-background-3{% if section_size != "container" %} section-full-screen{% endif %}">
<div class="{% if section_size != "container" %}container section-full-screen{% endif %}">
<div class="swiper-controls__box">
{% if section.settings.show_bullets %}
<div class="swiper-pagination"></div>
{% endif %}
{% if section.settings.show_arrows %}
<div class="swiper-buttons__wrapper">
<div class="swiper-buttons__box">
<div class="swiper-button swiper-button-prev">
<span>{% render 'icon-arrow' %}</span>
</div>
<div class="swiper-button swiper-button-next">
<span>{% render 'icon-arrow' %}</span>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% endif %}
{% if section_size == "container" %}
</div>
{% endif %}
</div>

{% schema %}
{
"name": "t:sections.slideshow.name",
"tag": "section",
"class": "slideshow-section spaced-section",
"enabled_on": {
"templates": ["*"]
},
"settings": [
{
"type": "checkbox",
"id": "header_overlay",
"label": "t:sections.all.header_overlay.label",
"info": "t:sections.all.header_overlay.info",
"default": false
},
{
"type": "select",
"id": "section_layout",
"default": "overlay",
"label": "t:sections.all.section_layout.label",
"options": [
{
"value": "overlay",
"label": "t:sections.all.section_layout.options.options__1.label"
},
{
"value": "standard",
"label": "t:sections.all.section_layout.options.options__2.label"
}
]
},
{
"type": "select",
"id": "section_size",
"default": "full",
"label": "t:sections.all.section_size.label",
"options": [
{
"value": "full",
"label": "t:sections.all.section_size.options.options__1.label"
},
{
"value": "container",
"label": "t:sections.all.section_size.options.options__2.label"
}
]
},
{
"type": "select",
"id": "content_alignment",
"default": "center",
"label": "t:sections.all.content_alignment.label",
"options": [
{
"value": "left",
"label": "t:sections.all.content_alignment.options.options__2.label"
},
{
"value": "center",
"label": "t:sections.all.content_alignment.options.options__1.label"
}
]
},
{
"type": "header",
"content": "t:sections.all.image.header.content"
},
{
"type": "select",
"id": "image_size",
"default": "adapt",
"label": "t:sections.all.image.aspect_ratio.label",
"info": "t:sections.all.image.aspect_ratio.info",
"options": [
{
"value": "1/1",
"label": "t:sections.all.image.aspect_ratio.options__1.label"
},
{
"value": "3/2",
"label": "t:sections.all.image.aspect_ratio.options__2.label"
},
{
"value": "3/4",
"label": "t:sections.all.image.aspect_ratio.options__3.label"
},
{
"value": "4/3",
"label": "t:sections.all.image.aspect_ratio.options__4.label"
},
{
"value": "16/9",
"label": "t:sections.all.image.aspect_ratio.options__5.label"
},
{
"value": "21/9",
"label": "t:sections.all.image.aspect_ratio.options__6.label"
},
{
"value": "adapt",
"label": "t:sections.all.image.aspect_ratio.options__7.label"
},
{
"value": "large",
"label": "t:sections.all.image.aspect_ratio.options__8.label"
}
]
},
{
"type": "header",
"content": "t:sections.all.slider_options.header.content"
},
{
"type": "checkbox",
"id": "is_loop",
"default": true,
"label": "t:sections.all.slider_options.slider_is_loop.label"
},
{
"type": "checkbox",
"id": "is_autoplay",
"default": false,
"label": "t:sections.all.slider_options.slider_is_autoplay.label"
},
{
"type": "checkbox",
"id": "is_hover_stop_autoplay",
"default": true,
"label": "t:sections.all.slider_options.slider_hover_autoplay_stop.label"
},
{
"type": "checkbox",
"id": "show_arrows",
"default": true,
"label": "t:sections.all.slider_options.navigation.label"
},
{
"type": "checkbox",
"id": "show_bullets",
"default": true,
"label": "t:sections.all.slider_options.pagination.label"
},
{
"type": "checkbox",
"id": "parallax",
"default": false,
"label": "t:sections.all.slider_options.parallax.label"
},
{
"type": "range",
"id": "slideshow_speed",
"min": 0,
"max": 6,
"step": 0.1,
"default": 1.1,
"unit": "s",
"label": "t:sections.all.slider_options.speed.label"
},
{
"type": "range",
"id": "slideshow_delay",
"min": 0,
"max": 8,
"step": 0.1,
"default": 3,
"unit": "s",
"label": "t:sections.all.slider_options.delay.label"
},
{
"type": "select",
"id": "slide_effects",
"options": [
{
"value": "slide",
"label": "t:sections.all.slider_options.effects.options.options__1.label"
},
{
"value": "fade",
"label": "t:sections.all.slider_options.effects.options.options__2.label"
},
{
"value": "coverflow",
"label": "t:sections.all.slider_options.effects.options.options__3.label"
},
{
"value": "creative",
"label": "t:sections.all.slider_options.effects.options.options__4.label"
},
{
"value": "flip",
"label": "t:sections.all.slider_options.effects.options.options__5.label"
}
],
"default": "slide",
"label": "t:sections.all.slider_options.effects.label",
"info": "t:sections.all.slider_options.effects.info"
},
{
"type": "select",
"id": "slide_effects_split_screen",
"options": [
{
"value": "slide",
"label": "t:sections.all.slider_options.effects_text.options.options__1.label"
},
{
"value": "fade",
"label": "t:sections.all.slider_options.effects_text.options.options__2.label"
},
{
"value": "coverflow",
"label": "t:sections.all.slider_options.effects_text.options.options__3.label"
},
{
"value": "creative",
"label": "t:sections.all.slider_options.effects_text.options.options__4.label"
},
{
"value": "flip",
"label": "t:sections.all.slider_options.effects_text.options.options__5.label"
}
],
"default": "slide",
"label": "t:sections.all.slider_options.effects_text.label",
"info": "t:sections.all.slider_options.effects_text.info"
},
{
"type": "header",
"content": "t:sections.all.section-margin.header.content"
},
{
"type": "select",
"id": "margin_top",
"options": [
{
"value": "no-indent",
"label": "t:sections.all.section-margin.options__1.label"
},
{
"value": "xs",
"label": "t:sections.all.section-margin.options__2.label"
},
{
"value": "s",
"label": "t:sections.all.section-margin.options__3.label"
},
{
"value": "m",
"label": "t:sections.all.section-margin.options__4.label"
},
{
"value": "l",
"label": "t:sections.all.section-margin.options__5.label"
},
{
"value": "xl",
"label": "t:sections.all.section-margin.options__6.label"
}
],
"default": "no-indent",
"label": "t:sections.all.section-margin.margin_top.label"
},
{
"type": "select",
"id": "margin_bottom",
"options": [
{
"value": "no-indent",
"label": "t:sections.all.section-margin.options__1.label"
},
{
"value": "xs",
"label": "t:sections.all.section-margin.options__2.label"
},
{
"value": "s",
"label": "t:sections.all.section-margin.options__3.label"
},
{
"value": "m",
"label": "t:sections.all.section-margin.options__4.label"
},
{
"value": "l",
"label": "t:sections.all.section-margin.options__5.label"
},
{
"value": "xl",
"label": "t:sections.all.section-margin.options__6.label"
}
],
"default": "no-indent",
"label": "t:sections.all.section-margin.margin_bottom.label"
}
],
"blocks": [
{
"type": "slideshow_item",
"name": "t:sections.slideshow.blocks.name",
"limit": 8,
"settings": [
{
"type": "color_scheme",
"id": "color_scheme",
"default": "background-3",
"label": "t:sections.all.color_scheme.label"
},
{
"type": "image_picker",
"id": "image",
"label": "t:sections.all.image.label"
},
{
"type": "text",
"id": "subheading",
"label": "t:sections.all.subheading.label",
"default": "Some Subheading"
},
{
"type": "text",
"id": "heading",
"label": "t:sections.all.heading.label",
"default": "Slide Heading"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h4",
"label": "t:sections.all.heading_size.options__4.label"
},
{
"value": "h3",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h2",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "inline_richtext",
"id": "text",
"label": "t:sections.all.text.label",
"default": "Text from here describes your slide"
},
{
"type": "header",
"content": "t:sections.all.button.header_button_primary.content"
},
{
"type": "text",
"id": "primary_button_label",
"default": "Button label",
"label": "t:sections.all.button.button_label.label",
"info": "t:sections.all.button.button_label.info"
},
{
"type": "url",
"id": "primary_button_link",
"label": "t:sections.all.button.button_link.label"
},
{
"type": "header",
"content": "t:sections.all.button.header_button_secondary.content"
},
{
"type": "text",
"id": "secondary_button_label",
"default": "Button label",
"label": "t:sections.all.button.button_label.label",
"info": "t:sections.all.button.button_label.info"
},
{
"type": "url",
"id": "secondary_button_link",
"label": "t:sections.all.button.button_link.label"
},
{
"type": "header",
"content": "t:sections.all.overlay.header.content"
},
{
"type": "checkbox",
"id": "overlay_enable",
"default": true,
"label": "t:sections.all.overlay.overlay_enable.label"
},
{
"type": "range",
"id": "overlay_opacity",
"min": 0,
"max": 1,
"step": 0.1,
"default": 0.2,
"label": "t:sections.all.overlay.overlay_opacity.label"
}
]
}
],
"presets": [
{
"name": "t:sections.slideshow.name",
"blocks": [
{
"type": "slideshow_item"
},
{
"type": "slideshow_item"
},
{
"type": "slideshow_item"
}
]
}
]
}
{% endschema %}

then you just need to enter the link for the button, it will work fine

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

View solution in original post

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
9029 2160 2664

Hi @Newcommer999 

Check this one if it work on that theme. 

Clickable Slideshow Banner 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Newcommer999
Tourist
11 0 2

Hello Made4uo-Ribe,

Thanks a lot for your reply. I followed the instruction, but when I went to slideshow.liquid, I cannot find <div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }}, which is in the instruction. 

I think my Aesthetic theme is different from the Dawn theme. 

 

namphan
Shopify Partner
1817 232 252

Hi @Newcommer999,

Please send me the code of slideshow.liquid file, I will check and guide it for you

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
Newcommer999
Tourist
11 0 2

Hi Namphan,

 

Thank you for your reply. As the slideshow liquid file is long, I sent it to you in message instead of posting it here. I appreciate your help. 

namphan
Shopify Partner
1817 232 252

This is an accepted solution.

Hi @Newcommer999,

Please change all code:

{{ 'section-slideshow.css' | asset_url | stylesheet_tag }}
<script src="{{ 'section-slideshow.js' | asset_url }}" defer="defer"></script>

{% style %}
{% render 'section-margin' %}
{% endstyle %}

{% liquid
assign slide_effects = section.settings.slide_effects
assign slide_effects_split_screen = section.settings.slide_effects_split_screen
assign slideshow_speed = section.settings.slideshow_speed
assign autoplay = section.settings.is_autoplay
assign loop = section.settings.is_loop
assign stop_autoplay = section.settings.is_hover_stop_autoplay
assign slideshow_delay = section.settings.slideshow_delay
assign parallax = section.settings.parallax
assign image_size = section.settings.image_size
assign slideshow_type = section.settings.section_layout
assign content_alignment = section.settings.content_alignment
assign section_size = section.settings.section_size

case image_size
when 'adapt'
assign section_height = 0
assign slide_class = image_size
when 'large'
assign section_height = 'calc(100vh - var(--header-height) - var(--announcement-height))'
assign slide_class = image_size
else
assign section_height = 'calc(100vh - var(--header-height) - var(--announcement-height))'
assign slide_class = image_size
endcase

if section.settings.header_overlay == true and slideshow_type == 'overlay' and section_size == 'full'
assign has_overlay = true
else
assign has_overlay = false
endif

if section.blocks.size == 1
assign has_even_paddings = true
elsif section.settings.show_bullets == false
assign has_even_paddings = true
else
assign has_even_paddings = false
endif
%}
<div
class="slideshow {{ slide_class }}"
data-id="shopify-section-{{ section.id }}"
data-autoplay="{{ autoplay }}"
data-stop-autoplay="{{ stop_autoplay }}"
data-speed="{{ slideshow_speed }}"
data-delay="{{ slideshow_delay }}"
data-effect="{{ slide_effects }}"
data-effect-split-screen="{{ slide_effects_split_screen }}"
data-loop="{{ loop }}"
data-parallax="{{ parallax }}"
data-slideshow-type="{{ slideshow_type }}"
data-slide-count="{{ section.blocks.size }}"
data-slideshow-size="{{ section_size }}"
{% if has_overlay %}
data-header-overlay="true"
{% endif %}
>
{% if section_size == "container" %}
<div class="container slideshow__container">
{% endif %}
{% if slideshow_type == "overlay" %}
<div class="slideshow__swiper swiper">
<div class="slideshow__wrapper swiper-wrapper">
{% for block in section.blocks %}
{% liquid
assign image_height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio
assign adapt_height = 1 | divided_by: block.settings.image.aspect_ratio | times: 100 | append: '%'
if image_size == 'adapt'
assign section_height = adapt_height
endif
%}
{% style %}
[data-id="{{ block.id }}"].slideshow-slide {
--slide-overlay: rgba(var(--color-overlay), {{ block.settings.overlay_opacity }});
--slide-height: {{ section_height }};
{% if image_size != 'adapt' and image_size != 'large' %}
aspect-ratio : {{ image_size }};
{% endif %}
}
{% endstyle %}
<div
class="slideshow-swiper__slide swiper-slide{% if has_overlay %} color-background-3{% else %} color-{{ block.settings.color_scheme }}{% endif %}"
data-color-scheme="{% if has_overlay %}color-background-3{% else %}color-{{ block.settings.color_scheme }}{% endif %}"
{{ block.shopify_attributes }}
>
<div class="slideshow-slide" data-id="{{ block.id }}">
<div class="slideshow-slide__container {% if section_size != "container" %}container section-full-screen{% endif %}">
{% if block.settings.image != blank %}
<div class="slideshow-slide__img {% if block.settings.overlay_enable %}have-overlay{% endif %}">
{% liquid
assign width_adapt_ratio = 1
if block.settings.image.width > block.settings.image.height
assign width_adapt_ratio = 550 | times: block.settings.image.aspect_ratio | round: 2
endif

if section_size == "full"
assign desktop_width = "100vw"
else
assign desktop_width = "calc(100vw - 64px * 2)"
endif
%}
{% capture sizes %}
(min-width: 1200px) {{desktop_width}},
{% if width_adapt_ratio != 1 %}
{{ width_adapt_ratio }}px
{% else %}
100vw
{% endif %}
{% endcapture %}
{{
block.settings.image
| image_url: width: block.settings.image.width
| image_tag:
loading: 'lazy',
width: block.settings.image.width,
height: image_height,
sizes: sizes,
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
}}
</div>
{% endif %}
<div class="slideshow-slide__content{% if content_alignment == "left" %} content-left{% endif %}{% if has_overlay %} slideshow-slide__content--header-overlay{% endif %}{% if has_even_paddings %} slideshow-slide__content--even-paddings{% endif %}">
{% if block.settings.subheading != blank %}
<div
class="subheading slideshow-slide__subheading"
data-swiper-parallax="-1500"
>
{{ block.settings.subheading }}
</div>
{% endif %}
{% if block.settings.heading != blank %}
<h1
class="slideshow-slide__title {{ block.settings.heading_size }}"
data-swiper-parallax="-1000"
>
{{ block.settings.heading }}
</h1>
{% endif %}
{% if block.settings.text != blank %}
<div
class="slideshow-slide__desc richtext__content"
data-swiper-parallax="-1000"
>
{{ block.settings.text }}
</div>
{% endif %}
{% if block.settings.primary_button_label != blank or block.settings.secondary_button_label != blank %}
<div
class="slideshow-slide__buttons"
data-swiper-parallax="-1500"
>
{% if block.settings.primary_button_label != blank %}
{% render 'button',
btn_label: block.settings.primary_button_label,
btn_link: block.settings.primary_button_link,
btn_size: 'primary',
btn_style: 'primary',
%}
{% endif %}
{% if block.settings.secondary_button_label != blank %}
{% render 'button',
btn_label: block.settings.secondary_button_label,
btn_link: block.settings.secondary_button_link,
btn_size: 'primary',
btn_style: 'tertiary'
%}
{% endif %}
</div>
{% endif %}
</div>
<a href="{{ block.settings.primary_button_link }}" style="
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
"></a>
</div>
</div>
</div>
{% endfor %}
</div>
{% if section.blocks.size > 1 %}
{% if content_alignment == "left" and section.blocks.size > 1 %}
<div class="swiper-controls__wrapper no-js-hidden">
<div class="{% if section_size != "container" %}container section-full-screen{% endif %}">
<div class="swiper-controls__box">
{% endif %}
{% if section.settings.show_bullets %}
<div class="swiper-pagination"></div>
{% endif %}
{% if section.settings.show_arrows %}
<div class="swiper-buttons__wrapper">
{% if content_alignment == "center" %}
<div class="swiper-buttons__container container {% if section_size == "container" %}section-in-container{% endif %}">
{% endif %}
<div class="swiper-buttons__box">
<div class="swiper-button swiper-button-prev {% if content_alignment == "center" %}swiper-button--large{% endif %}">
{% if content_alignment == "center" %}
<span>{% render 'icon-big-arrow' %}</span>
{% else %}
<span>{% render 'icon-arrow' %}</span>
{% endif %}
</div>
<div class="swiper-button swiper-button-next {% if content_alignment == "center" %}swiper-button--large{% endif %}">
{% if content_alignment == "center" %}
<span>{% render 'icon-big-arrow' %}</span>
{% else %}
<span>{% render 'icon-arrow' %}</span>
{% endif %}
</div>
</div>
{% if content_alignment == "center" %}
</div>
{% endif %}
</div>
{% endif %}
{% if content_alignment == "left" %}
</div>
</div>
</div>
{% endif %}
{% endif %}
</div>
{% else %}
<div class="split-screen-slideshow">
<div class="split-screen-slideshow__content-slider">
<div class="split-screen-slideshow__content-swiper swiper">
<div class="swiper-wrapper">
{% for block in section.blocks %}
<div
class="swiper-slide split-screen-slideshow-slide color-{{ block.settings.color_scheme }}"
{{ block.shopify_attributes }}
data-color-scheme="color-{{ block.settings.color_scheme }}"
>
<div class="split-screen-slideshow-slide__container{% if section_size != "container" %} container section-full-screen{% endif %}">
<div class="split-screen-slideshow-slide__content{% if content_alignment == "left" %} content-left{% endif %}{%if section.blocks.size > 1 and section.settings.show_bullets %} large-padding-bottom{% endif %}">
{% if block.settings.subheading != blank %}
<div
class="subheading split-screen-slideshow-slide__subheading"
data-swiper-parallax="-100"
>
{{ block.settings.subheading }}
</div>
{% endif %}
{% if block.settings.heading != blank %}
<h1 class="split-screen-slideshow-slide__title {{ block.settings.heading_size }}">
{{ block.settings.heading }}
</h1>
{% endif %}
{% if block.settings.text != blank %}
<div class="split-screen-slideshow-slide__desc richtext__content">
{{ block.settings.text }}
</div>
{% endif %}
{% if block.settings.primary_button_label != blank or block.settings.secondary_button_label != blank %}
<div
class="slideshow-slide__buttons"
data-swiper-parallax="-100"
>
{% if block.settings.primary_button_label != blank %}
{% render 'button',
btn_label: block.settings.primary_button_label,
btn_link: block.settings.primary_button_link,
btn_size: 'primary',
btn_style: 'primary',
%}
{% endif %}
{% if block.settings.secondary_button_label != blank %}
{% render 'button',
btn_label: block.settings.secondary_button_label,
btn_link: block.settings.secondary_button_link,
btn_size: 'primary',
btn_style: 'tertiary'
%}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
{%- if section.blocks.size > 1 -%}
<div class="swiper-controls__wrapper no-js-hidden">
<div class="container section-full-screen">
<div class="swiper-controls__box">
{% if section.settings.show_bullets %}
<div class="swiper-pagination"></div>
{% endif %}
</div>
</div>
</div>
{% endif %}
</div>
</div>
<div class="split-screen-slideshow__image-slider">
<div class="split-screen-slideshow__image-swiper swiper">
<div class="swiper-wrapper">
{% for block in section.blocks %}
{% liquid
assign image_height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio
assign adapt_height = 1 | divided_by: block.settings.image.aspect_ratio | times: 100 | append: '%'
if image_size == 'adapt'
assign section_height = adapt_height
endif
%}
{% style %}
#{{ block.id }} .split-screen-slideshow__image-slider__box{
--slide-overlay : rgba(var(--color-overlay), {{ block.settings.overlay_opacity }});
--slide-height : {{ section_height }};
{% if image_size != 'adapt' and image_size != 'large' %}
aspect-ratio : {{ image_size }};
{% endif %}
}
{% endstyle %}
<div
class="swiper-slide {% if block.settings.image == blank %}split-screen-slideshow__image-slider__slide{% endif %} color-background-3"
id="{{ block.id }}"
{{ block.shopify_attributes }}
>
<div class="split-screen-slideshow__image-slider__box {% if block.settings.overlay_enable %}have-overlay{% endif %}">
{% if block.settings.image != blank %}
{% liquid
if section_size == "full"
assign desktop_width = "60vw"
else
assign desktop_width = "calc(60vw - 64px)"
endif
%}
{% capture sizes %}
(min-width: 1200px) {{desktop_width}},
(min-width: 990px) 60vw,
100vw
{% endcapture %}
{{
block.settings.image
| image_url: width: block.settings.image.width
| image_tag:
loading: 'lazy',
width: block.settings.image.width,
height: image_height,
sizes: sizes,
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
}}
{% else %}
<div class="image-slider-placeholder">
{{ 'image' | placeholder_svg_tag }}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{%- if section.blocks.size > 1 -%}
<div class="swiper-controls__wrapper no-js-hidden color-background-3{% if section_size != "container" %} section-full-screen{% endif %}">
<div class="{% if section_size != "container" %}container section-full-screen{% endif %}">
<div class="swiper-controls__box">
{% if section.settings.show_bullets %}
<div class="swiper-pagination"></div>
{% endif %}
{% if section.settings.show_arrows %}
<div class="swiper-buttons__wrapper">
<div class="swiper-buttons__box">
<div class="swiper-button swiper-button-prev">
<span>{% render 'icon-arrow' %}</span>
</div>
<div class="swiper-button swiper-button-next">
<span>{% render 'icon-arrow' %}</span>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% endif %}
{% if section_size == "container" %}
</div>
{% endif %}
</div>

{% schema %}
{
"name": "t:sections.slideshow.name",
"tag": "section",
"class": "slideshow-section spaced-section",
"enabled_on": {
"templates": ["*"]
},
"settings": [
{
"type": "checkbox",
"id": "header_overlay",
"label": "t:sections.all.header_overlay.label",
"info": "t:sections.all.header_overlay.info",
"default": false
},
{
"type": "select",
"id": "section_layout",
"default": "overlay",
"label": "t:sections.all.section_layout.label",
"options": [
{
"value": "overlay",
"label": "t:sections.all.section_layout.options.options__1.label"
},
{
"value": "standard",
"label": "t:sections.all.section_layout.options.options__2.label"
}
]
},
{
"type": "select",
"id": "section_size",
"default": "full",
"label": "t:sections.all.section_size.label",
"options": [
{
"value": "full",
"label": "t:sections.all.section_size.options.options__1.label"
},
{
"value": "container",
"label": "t:sections.all.section_size.options.options__2.label"
}
]
},
{
"type": "select",
"id": "content_alignment",
"default": "center",
"label": "t:sections.all.content_alignment.label",
"options": [
{
"value": "left",
"label": "t:sections.all.content_alignment.options.options__2.label"
},
{
"value": "center",
"label": "t:sections.all.content_alignment.options.options__1.label"
}
]
},
{
"type": "header",
"content": "t:sections.all.image.header.content"
},
{
"type": "select",
"id": "image_size",
"default": "adapt",
"label": "t:sections.all.image.aspect_ratio.label",
"info": "t:sections.all.image.aspect_ratio.info",
"options": [
{
"value": "1/1",
"label": "t:sections.all.image.aspect_ratio.options__1.label"
},
{
"value": "3/2",
"label": "t:sections.all.image.aspect_ratio.options__2.label"
},
{
"value": "3/4",
"label": "t:sections.all.image.aspect_ratio.options__3.label"
},
{
"value": "4/3",
"label": "t:sections.all.image.aspect_ratio.options__4.label"
},
{
"value": "16/9",
"label": "t:sections.all.image.aspect_ratio.options__5.label"
},
{
"value": "21/9",
"label": "t:sections.all.image.aspect_ratio.options__6.label"
},
{
"value": "adapt",
"label": "t:sections.all.image.aspect_ratio.options__7.label"
},
{
"value": "large",
"label": "t:sections.all.image.aspect_ratio.options__8.label"
}
]
},
{
"type": "header",
"content": "t:sections.all.slider_options.header.content"
},
{
"type": "checkbox",
"id": "is_loop",
"default": true,
"label": "t:sections.all.slider_options.slider_is_loop.label"
},
{
"type": "checkbox",
"id": "is_autoplay",
"default": false,
"label": "t:sections.all.slider_options.slider_is_autoplay.label"
},
{
"type": "checkbox",
"id": "is_hover_stop_autoplay",
"default": true,
"label": "t:sections.all.slider_options.slider_hover_autoplay_stop.label"
},
{
"type": "checkbox",
"id": "show_arrows",
"default": true,
"label": "t:sections.all.slider_options.navigation.label"
},
{
"type": "checkbox",
"id": "show_bullets",
"default": true,
"label": "t:sections.all.slider_options.pagination.label"
},
{
"type": "checkbox",
"id": "parallax",
"default": false,
"label": "t:sections.all.slider_options.parallax.label"
},
{
"type": "range",
"id": "slideshow_speed",
"min": 0,
"max": 6,
"step": 0.1,
"default": 1.1,
"unit": "s",
"label": "t:sections.all.slider_options.speed.label"
},
{
"type": "range",
"id": "slideshow_delay",
"min": 0,
"max": 8,
"step": 0.1,
"default": 3,
"unit": "s",
"label": "t:sections.all.slider_options.delay.label"
},
{
"type": "select",
"id": "slide_effects",
"options": [
{
"value": "slide",
"label": "t:sections.all.slider_options.effects.options.options__1.label"
},
{
"value": "fade",
"label": "t:sections.all.slider_options.effects.options.options__2.label"
},
{
"value": "coverflow",
"label": "t:sections.all.slider_options.effects.options.options__3.label"
},
{
"value": "creative",
"label": "t:sections.all.slider_options.effects.options.options__4.label"
},
{
"value": "flip",
"label": "t:sections.all.slider_options.effects.options.options__5.label"
}
],
"default": "slide",
"label": "t:sections.all.slider_options.effects.label",
"info": "t:sections.all.slider_options.effects.info"
},
{
"type": "select",
"id": "slide_effects_split_screen",
"options": [
{
"value": "slide",
"label": "t:sections.all.slider_options.effects_text.options.options__1.label"
},
{
"value": "fade",
"label": "t:sections.all.slider_options.effects_text.options.options__2.label"
},
{
"value": "coverflow",
"label": "t:sections.all.slider_options.effects_text.options.options__3.label"
},
{
"value": "creative",
"label": "t:sections.all.slider_options.effects_text.options.options__4.label"
},
{
"value": "flip",
"label": "t:sections.all.slider_options.effects_text.options.options__5.label"
}
],
"default": "slide",
"label": "t:sections.all.slider_options.effects_text.label",
"info": "t:sections.all.slider_options.effects_text.info"
},
{
"type": "header",
"content": "t:sections.all.section-margin.header.content"
},
{
"type": "select",
"id": "margin_top",
"options": [
{
"value": "no-indent",
"label": "t:sections.all.section-margin.options__1.label"
},
{
"value": "xs",
"label": "t:sections.all.section-margin.options__2.label"
},
{
"value": "s",
"label": "t:sections.all.section-margin.options__3.label"
},
{
"value": "m",
"label": "t:sections.all.section-margin.options__4.label"
},
{
"value": "l",
"label": "t:sections.all.section-margin.options__5.label"
},
{
"value": "xl",
"label": "t:sections.all.section-margin.options__6.label"
}
],
"default": "no-indent",
"label": "t:sections.all.section-margin.margin_top.label"
},
{
"type": "select",
"id": "margin_bottom",
"options": [
{
"value": "no-indent",
"label": "t:sections.all.section-margin.options__1.label"
},
{
"value": "xs",
"label": "t:sections.all.section-margin.options__2.label"
},
{
"value": "s",
"label": "t:sections.all.section-margin.options__3.label"
},
{
"value": "m",
"label": "t:sections.all.section-margin.options__4.label"
},
{
"value": "l",
"label": "t:sections.all.section-margin.options__5.label"
},
{
"value": "xl",
"label": "t:sections.all.section-margin.options__6.label"
}
],
"default": "no-indent",
"label": "t:sections.all.section-margin.margin_bottom.label"
}
],
"blocks": [
{
"type": "slideshow_item",
"name": "t:sections.slideshow.blocks.name",
"limit": 8,
"settings": [
{
"type": "color_scheme",
"id": "color_scheme",
"default": "background-3",
"label": "t:sections.all.color_scheme.label"
},
{
"type": "image_picker",
"id": "image",
"label": "t:sections.all.image.label"
},
{
"type": "text",
"id": "subheading",
"label": "t:sections.all.subheading.label",
"default": "Some Subheading"
},
{
"type": "text",
"id": "heading",
"label": "t:sections.all.heading.label",
"default": "Slide Heading"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h4",
"label": "t:sections.all.heading_size.options__4.label"
},
{
"value": "h3",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h2",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "inline_richtext",
"id": "text",
"label": "t:sections.all.text.label",
"default": "Text from here describes your slide"
},
{
"type": "header",
"content": "t:sections.all.button.header_button_primary.content"
},
{
"type": "text",
"id": "primary_button_label",
"default": "Button label",
"label": "t:sections.all.button.button_label.label",
"info": "t:sections.all.button.button_label.info"
},
{
"type": "url",
"id": "primary_button_link",
"label": "t:sections.all.button.button_link.label"
},
{
"type": "header",
"content": "t:sections.all.button.header_button_secondary.content"
},
{
"type": "text",
"id": "secondary_button_label",
"default": "Button label",
"label": "t:sections.all.button.button_label.label",
"info": "t:sections.all.button.button_label.info"
},
{
"type": "url",
"id": "secondary_button_link",
"label": "t:sections.all.button.button_link.label"
},
{
"type": "header",
"content": "t:sections.all.overlay.header.content"
},
{
"type": "checkbox",
"id": "overlay_enable",
"default": true,
"label": "t:sections.all.overlay.overlay_enable.label"
},
{
"type": "range",
"id": "overlay_opacity",
"min": 0,
"max": 1,
"step": 0.1,
"default": 0.2,
"label": "t:sections.all.overlay.overlay_opacity.label"
}
]
}
],
"presets": [
{
"name": "t:sections.slideshow.name",
"blocks": [
{
"type": "slideshow_item"
},
{
"type": "slideshow_item"
},
{
"type": "slideshow_item"
}
]
}
]
}
{% endschema %}

then you just need to enter the link for the button, it will work fine

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com