Solved

How to embed hyperlinks to (buttonless) slideshow banners in Dawn theme 6.0.2

lucasgbona
Tourist
10 0 1

Hi there, 

 

I have managed to add page links of my store to the banners but what I really have to do is to add external hyperlinks to the (buttonless) slideshow banners so they take to the Facebook webpage, whatsapp group and  Instagram profile. 

 

I would really appreciated if anyone could give a hand with that.

 

Thank you.

Accepted Solution (1)
Rahul_dhiman
Shopify Expert
107 20 36

This is an accepted solution.

Okay so the solution for this is that you need to replace the code in slideshow.liquid with the one below . With the code below you will see the option to add banner link and that way the banner would become clickable .

So to got slideshow.liquid 

1: Online Store >> Themes >> Edit code 
2: Find the file called slideshow.liquid 
3: Replace the code inside with the one below and save .
4: Open Customize and Open the slideshow . You will see an option marked in the image .
e4604441-443f-45ed-99cf-9b49450fb181.png

 

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}

{%- if section.settings.slide_height == 'adapt_image' and section.blocks.first.settings.image != blank -%}
  {%- style -%}
    @media screen and (max-width: 749px) {
      #Slider-{{ section.id }}::before,
      #Slider-{{ section.id }} .media::before,
      #Slider-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
        padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }

    @media screen and (min-width: 750px) {
      #Slider-{{ section.id }}::before,
      #Slider-{{ section.id }} .media::before {
        padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }
  {%- endstyle -%}
{%- endif -%}

<slideshow-component
  class="slider-mobile-gutter{% if section.settings.layout == 'grid' %} page-width{% endif %}{% if section.settings.show_text_below %} mobile-text-below{% endif %}"
  role="region"
  aria-roledescription="{{ 'sections.slideshow.carousel' | t }}"
  aria-label="{{ section.settings.accessibility_info | escape }}"
>
  {%- if section.settings.auto_rotate and section.blocks.size > 1 -%}
    <div class="slideshow__controls slideshow__controls--top slider-buttons no-js-hidden{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">
      <button
        type="button"
        class="slider-button slider-button--prev"
        name="previous"
        aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
        aria-controls="Slider-{{ section.id }}"
      >
        {% render 'icon-caret' %}
      </button>
      <div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">
        {%- if section.settings.slider_visual == 'counter' -%}
          <span class="slider-counter--current">1</span>
          <span aria-hidden="true"> / </span>
          <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
          <span class="slider-counter--total">{{ section.blocks.size }}</span>
        {%- else -%}
          <div class="slideshow__control-wrapper">
            {%- for block in section.blocks -%}
              <button
                class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"
                aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
                aria-controls="Slider-{{ section.id }}"
              >
                {%- if section.settings.slider_visual == 'numbers' -%}
                  {{ forloop.index -}}
                {%- else -%}
                  <span class="dot"></span>
                {%- endif -%}
              </button>
            {%- endfor -%}
          </div>
        {%- endif -%}
      </div>
      <button
        type="button"
        class="slider-button slider-button--next"
        name="next"
        aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
        aria-controls="Slider-{{ section.id }}"
      >
        {% render 'icon-caret' %}
      </button>

      {%- if section.settings.auto_rotate -%}
        <button
          type="button"
          class="slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}"
          aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"
        >
          {%- render 'icon-pause' -%}
          {%- render 'icon-play' -%}
        </button>
      {%- endif -%}
    </div>
    <noscript>
      <div class="slider-buttons">
        <div class="slider-counter">
          {%- for block in section.blocks -%}
            <a
              href="#Slide-{{ section.id }}-{{ forloop.index }}"
              class="slider-counter__link link"
              aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
            >
              {{ forloop.index }}
            </a>
          {%- endfor -%}
        </div>
      </div>
    </noscript>
  {%- endif -%}

  <div
    class="slideshow banner banner--{{ section.settings.slide_height }} grid grid--1-col slider slider--everywhere{% if section.settings.show_text_below %} banner--mobile-bottom{% endif %}{% if section.blocks.first.settings.image == blank %} slideshow--placeholder{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
    id="Slider-{{ section.id }}"
    aria-live="polite"
    aria-atomic="true"
    data-autoplay="{{ section.settings.auto_rotate }}"
    data-speed="{{ section.settings.change_slides_speed }}"
  >
    {%- for block in section.blocks -%}
      <style>
        #Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after {
          opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }};
        }
      </style>

      <div
        class="slideshow__slide grid__item grid--1-col slider__slide"
        id="Slide-{{ section.id }}-{{ forloop.index }}"
        {{ block.shopify_attributes }}
        role="group"
        aria-roledescription="{{ 'sections.slideshow.slide' | t }}"
        aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
        tabindex="-1"
      >
        <a href="{{ block.settings.banner_link }}" style="height:100%">
          <div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
            {%- if block.settings.image -%}
              {%- liquid
                assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round
                if section.settings.image_behavior == 'ambient'
                  assign sizes = '120vw'
                  assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
                else
                  assign sizes = '100vw'
                  assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
                endif
                assign fetch_priority = 'auto'
                if section.index == 1
                  assign fetch_priority = 'high'
                endif
              -%}
              {%- if forloop.first %}
                {{
                  block.settings.image
                  | image_url: width: 3840
                  | image_tag: height: height, sizes: sizes, widths: widths, fetchpriority: fetch_priority
                }}
              {%- else -%}
                {{
                  block.settings.image
                  | image_url: width: 3840
                  | image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths
                }}
              {%- endif -%}
            {%- else -%}
              {%- assign placeholder_slide = forloop.index | modulo: 2 -%}
              {%- if placeholder_slide == 1 -%}
                {{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
              {%- else -%}
                {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
              {%- endif -%}
            {%- endif -%}
          </div>
          <div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll and forloop.index == 1 %} scroll-trigger animate--slide-in{% endif %}">
            <div class="slideshow__text banner__box content-container content-container--full-width-mobile color-{{ block.settings.color_scheme }} gradient slideshow__text--{{ block.settings.text_alignment }} slideshow__text-mobile--{{ block.settings.text_alignment_mobile }}">
              {%- if block.settings.heading != blank -%}
                <h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}">
                  {{ block.settings.heading }}
                </h2>
              {%- endif -%}
              {%- if block.settings.subheading != blank -%}
                <div class="banner__text rte" {{ block.shopify_attributes }}>
                  <p>{{ block.settings.subheading }}</p>
                </div>
              {%- endif -%}
              {%- if block.settings.button_label != blank -%}
                <div class="banner__buttons">
                  <a
                    {% if block.settings.link %}
                      href="{{ block.settings.link }}"
                    {% else %}
                      role="link" aria-disabled="true"
                    {% endif %}
                    class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}"
                  >
                    {{- block.settings.button_label | escape -}}
                  </a>
                </div>
              {%- endif -%}
            </div>
          </div>
        </a>
      </div>
    {%- endfor -%}
  </div>

  {%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}
    <div class="slideshow__controls slider-buttons no-js-hidden{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">
      <button
        type="button"
        class="slider-button slider-button--prev"
        name="previous"
        aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
        aria-controls="Slider-{{ section.id }}"
      >
        {% render 'icon-caret' %}
      </button>
      <div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">
        {%- if section.settings.slider_visual == 'counter' -%}
          <span class="slider-counter--current">1</span>
          <span aria-hidden="true"> / </span>
          <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
          <span class="slider-counter--total">{{ section.blocks.size }}</span>
        {%- else -%}
          <div class="slideshow__control-wrapper">
            {%- for block in section.blocks -%}
              <button
                class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"
                aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
                aria-controls="Slider-{{ section.id }}"
              >
                {%- if section.settings.slider_visual == 'numbers' -%}
                  {{ forloop.index -}}
                {%- else -%}
                  <span class="dot"></span>
                {%- endif -%}
              </button>
            {%- endfor -%}
          </div>
        {%- endif -%}
      </div>
      <button
        type="button"
        class="slider-button slider-button--next"
        name="next"
        aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
        aria-controls="Slider-{{ section.id }}"
      >
        {% render 'icon-caret' %}
      </button>

      {%- if section.settings.auto_rotate -%}
        <button
          type="button"
          class="slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}"
          aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"
        >
          {%- render 'icon-pause' -%}
          {%- render 'icon-play' -%}
        </button>
      {%- endif -%}
    </div>
    <noscript>
      <div class="slider-buttons">
        <div class="slider-counter">
          {%- for block in section.blocks -%}
            <a
              href="#Slide-{{ section.id }}-{{ forloop.index }}"
              class="slider-counter__link link"
              aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
            >
              {{ forloop.index }}
            </a>
          {%- endfor -%}
        </div>
      </div>
    </noscript>
  {%- endif -%}
</slideshow-component>

{%- if request.design_mode -%}
  <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

{% schema %}
{
  "name": "t:sections.slideshow.name",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "full_bleed",
          "label": "t:sections.slideshow.settings.layout.options__1.label"
        },
        {
          "value": "grid",
          "label": "t:sections.slideshow.settings.layout.options__2.label"
        }
      ],
      "default": "full_bleed",
      "label": "t:sections.slideshow.settings.layout.label"
    },
    {
      "type": "select",
      "id": "slide_height",
      "options": [
        {
          "value": "adapt_image",
          "label": "t:sections.slideshow.settings.slide_height.options__1.label"
        },
        {
          "value": "small",
          "label": "t:sections.slideshow.settings.slide_height.options__2.label"
        },
        {
          "value": "medium",
          "label": "t:sections.slideshow.settings.slide_height.options__3.label"
        },
        {
          "value": "large",
          "label": "t:sections.slideshow.settings.slide_height.options__4.label"
        }
      ],
      "default": "medium",
      "label": "t:sections.slideshow.settings.slide_height.label"
    },
    {
      "type": "select",
      "id": "slider_visual",
      "options": [
        {
          "value": "dots",
          "label": "t:sections.slideshow.settings.slider_visual.options__2.label"
        },
        {
          "value": "counter",
          "label": "t:sections.slideshow.settings.slider_visual.options__1.label"
        },
        {
          "value": "numbers",
          "label": "t:sections.slideshow.settings.slider_visual.options__3.label"
        }
      ],
      "default": "counter",
      "label": "t:sections.slideshow.settings.slider_visual.label"
    },
    {
      "type": "checkbox",
      "id": "auto_rotate",
      "label": "t:sections.slideshow.settings.auto_rotate.label",
      "default": false
    },
    {
      "type": "range",
      "id": "change_slides_speed",
      "min": 3,
      "max": 9,
      "step": 2,
      "unit": "s",
      "label": "t:sections.slideshow.settings.change_slides_speed.label",
      "default": 5
    },
    {
      "type": "header",
      "content": "t:sections.all.animation.content"
    },
    {
      "type": "select",
      "id": "image_behavior",
      "options": [
        {
          "value": "none",
          "label": "t:sections.all.animation.image_behavior.options__1.label"
        },
        {
          "value": "ambient",
          "label": "t:sections.all.animation.image_behavior.options__2.label"
        }
      ],
      "default": "none",
      "label": "t:sections.all.animation.image_behavior.label"
    },
    {
      "type": "header",
      "content": "t:sections.slideshow.settings.mobile.content"
    },
    {
      "type": "checkbox",
      "id": "show_text_below",
      "label": "t:sections.slideshow.settings.show_text_below.label",
      "default": true
    },
    {
      "type": "header",
      "content": "t:sections.slideshow.settings.accessibility.content"
    },
    {
      "type": "text",
      "id": "accessibility_info",
      "label": "t:sections.slideshow.settings.accessibility.label",
      "info": "t:sections.slideshow.settings.accessibility.info",
      "default": "Slideshow about our brand"
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "t:sections.slideshow.blocks.slide.name",
      "limit": 5,
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.slideshow.blocks.slide.settings.image.label"
        },
         {
          "type": "url",
          "id": "banner_link",
          "label": "Banner Link"
        },
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Image slide",
          "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h2",
              "label": "t:sections.all.heading_size.options__1.label"
            },
            {
              "value": "h1",
              "label": "t:sections.all.heading_size.options__2.label"
            },
            {
              "value": "h0",
              "label": "t:sections.all.heading_size.options__3.label"
            }
          ],
          "default": "h1",
          "label": "t:sections.all.heading_size.label"
        },
        {
          "type": "inline_richtext",
          "id": "subheading",
          "default": "Tell your brand's story through images",
          "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
        },
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
          "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.slideshow.blocks.slide.settings.link.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary",
          "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
          "default": false
        },
        {
          "type": "select",
          "id": "box_align",
          "options": [
            {
              "value": "top-left",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__1.label"
            },
            {
              "value": "top-center",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__2.label"
            },
            {
              "value": "top-right",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__3.label"
            },
            {
              "value": "middle-left",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__4.label"
            },
            {
              "value": "middle-center",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__5.label"
            },
            {
              "value": "middle-right",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__6.label"
            },
            {
              "value": "bottom-left",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__7.label"
            },
            {
              "value": "bottom-center",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__8.label"
            },
            {
              "value": "bottom-right",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__9.label"
            }
          ],
          "default": "middle-center",
          "label": "t:sections.slideshow.blocks.slide.settings.box_align.label",
          "info": "t:sections.slideshow.blocks.slide.settings.box_align.info"
        },
        {
          "type": "checkbox",
          "id": "show_text_box",
          "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
          "default": true
        },
        {
          "type": "select",
          "id": "text_alignment",
          "options": [
            {
              "value": "left",
              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label"
            },
            {
              "value": "center",
              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label"
            },
            {
              "value": "right",
              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label"
            }
          ],
          "default": "center",
          "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.label"
        },
        {
          "type": "range",
          "id": "image_overlay_opacity",
          "min": 0,
          "max": 100,
          "step": 10,
          "unit": "%",
          "label": "t:sections.slideshow.blocks.slide.settings.image_overlay_opacity.label",
          "default": 0
        },
        {
          "type": "color_scheme",
          "id": "color_scheme",
          "label": "t:sections.all.colors.label",
          "default": "scheme-1"
        },
        {
          "type": "header",
          "content": "t:sections.slideshow.settings.mobile.content"
        },
        {
          "type": "select",
          "id": "text_alignment_mobile",
          "options": [
            {
              "value": "left",
              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label"
            },
            {
              "value": "center",
              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label"
            },
            {
              "value": "right",
              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label"
            }
          ],
          "default": "center",
          "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.slideshow.presets.name",
      "blocks": [
        {
          "type": "slide"
        },
        {
          "type": "slide"
        }
      ]
    }
  ]
}
{% endschema %}

 

 

With this done you will get what you need . 

I hope you might like this solution and would work for you . Let me know if you need more help .

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

View solution in original post

Replies 8 (8)

ProtoMan44
Shopify Partner
290 22 35

@lucasgbona when you add a link to the button I hope it will automatically embed on whole slide

- A thirsty developer passionate about supporting the community. If you'd like to, you can buy me a

Coffee

.
- Your Shopify Solution Specialist Get a Quote at Dev444- Chat On Whatsapp
Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!

Rahul_dhiman
Shopify Expert
107 20 36

So thats possible . Please check the screenshot which might give you better Idea

 

ba52024b-4976-471e-9380-ab08ae3d46f6.png

 

e89a30a0-b9d6-4486-adab-9f9cfdfbf9cc.png

 

 

 

 

 

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
lucasgbona
Tourist
10 0 1

Hey Rahul, 

Thank you for your reply.

 

I am actually on the Slideshow instead of image banner section. I have 5 slides on slideshow that have their height customised to 350px and all are buttonless

 

I have managed to add a box link to them although I can't add an external hyperlink to the banners as the options given are for my store webpages only as displayed in the screenshots below:

Screenshot 2024-05-30 at 11.59.11.png

Screenshot 2024-05-30 at 11.58.17.png

If you are still able to help me with it I'd be much appreciated. 

Thank you.

Rahul_dhiman
Shopify Expert
107 20 36

@lucasgbona 

So if you can share the link to the website I can check . So you need the banners to be clickable ? Without any text on the banner ??

If yes then there might be little adjustment needed in the code .

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
lucasgbona
Tourist
10 0 1

Yes, the banners won't have buttons and will be clickable throughout each one. 
Store URL:

https://statuecorp.com/

 

Thank you. 

ProtoMan44
Shopify Partner
290 22 35

@lucasgbona add this css 

 

.banner:after {
    position: unset !important;
}

 


and add href value of a tag , 

ProtoMan44_0-1717076434799.png

 

- A thirsty developer passionate about supporting the community. If you'd like to, you can buy me a

Coffee

.
- Your Shopify Solution Specialist Get a Quote at Dev444- Chat On Whatsapp
Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!
Rahul_dhiman
Shopify Expert
107 20 36

This is an accepted solution.

Okay so the solution for this is that you need to replace the code in slideshow.liquid with the one below . With the code below you will see the option to add banner link and that way the banner would become clickable .

So to got slideshow.liquid 

1: Online Store >> Themes >> Edit code 
2: Find the file called slideshow.liquid 
3: Replace the code inside with the one below and save .
4: Open Customize and Open the slideshow . You will see an option marked in the image .
e4604441-443f-45ed-99cf-9b49450fb181.png

 

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}

{%- if section.settings.slide_height == 'adapt_image' and section.blocks.first.settings.image != blank -%}
  {%- style -%}
    @media screen and (max-width: 749px) {
      #Slider-{{ section.id }}::before,
      #Slider-{{ section.id }} .media::before,
      #Slider-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
        padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }

    @media screen and (min-width: 750px) {
      #Slider-{{ section.id }}::before,
      #Slider-{{ section.id }} .media::before {
        padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }
  {%- endstyle -%}
{%- endif -%}

<slideshow-component
  class="slider-mobile-gutter{% if section.settings.layout == 'grid' %} page-width{% endif %}{% if section.settings.show_text_below %} mobile-text-below{% endif %}"
  role="region"
  aria-roledescription="{{ 'sections.slideshow.carousel' | t }}"
  aria-label="{{ section.settings.accessibility_info | escape }}"
>
  {%- if section.settings.auto_rotate and section.blocks.size > 1 -%}
    <div class="slideshow__controls slideshow__controls--top slider-buttons no-js-hidden{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">
      <button
        type="button"
        class="slider-button slider-button--prev"
        name="previous"
        aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
        aria-controls="Slider-{{ section.id }}"
      >
        {% render 'icon-caret' %}
      </button>
      <div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">
        {%- if section.settings.slider_visual == 'counter' -%}
          <span class="slider-counter--current">1</span>
          <span aria-hidden="true"> / </span>
          <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
          <span class="slider-counter--total">{{ section.blocks.size }}</span>
        {%- else -%}
          <div class="slideshow__control-wrapper">
            {%- for block in section.blocks -%}
              <button
                class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"
                aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
                aria-controls="Slider-{{ section.id }}"
              >
                {%- if section.settings.slider_visual == 'numbers' -%}
                  {{ forloop.index -}}
                {%- else -%}
                  <span class="dot"></span>
                {%- endif -%}
              </button>
            {%- endfor -%}
          </div>
        {%- endif -%}
      </div>
      <button
        type="button"
        class="slider-button slider-button--next"
        name="next"
        aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
        aria-controls="Slider-{{ section.id }}"
      >
        {% render 'icon-caret' %}
      </button>

      {%- if section.settings.auto_rotate -%}
        <button
          type="button"
          class="slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}"
          aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"
        >
          {%- render 'icon-pause' -%}
          {%- render 'icon-play' -%}
        </button>
      {%- endif -%}
    </div>
    <noscript>
      <div class="slider-buttons">
        <div class="slider-counter">
          {%- for block in section.blocks -%}
            <a
              href="#Slide-{{ section.id }}-{{ forloop.index }}"
              class="slider-counter__link link"
              aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
            >
              {{ forloop.index }}
            </a>
          {%- endfor -%}
        </div>
      </div>
    </noscript>
  {%- endif -%}

  <div
    class="slideshow banner banner--{{ section.settings.slide_height }} grid grid--1-col slider slider--everywhere{% if section.settings.show_text_below %} banner--mobile-bottom{% endif %}{% if section.blocks.first.settings.image == blank %} slideshow--placeholder{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
    id="Slider-{{ section.id }}"
    aria-live="polite"
    aria-atomic="true"
    data-autoplay="{{ section.settings.auto_rotate }}"
    data-speed="{{ section.settings.change_slides_speed }}"
  >
    {%- for block in section.blocks -%}
      <style>
        #Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after {
          opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }};
        }
      </style>

      <div
        class="slideshow__slide grid__item grid--1-col slider__slide"
        id="Slide-{{ section.id }}-{{ forloop.index }}"
        {{ block.shopify_attributes }}
        role="group"
        aria-roledescription="{{ 'sections.slideshow.slide' | t }}"
        aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
        tabindex="-1"
      >
        <a href="{{ block.settings.banner_link }}" style="height:100%">
          <div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
            {%- if block.settings.image -%}
              {%- liquid
                assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round
                if section.settings.image_behavior == 'ambient'
                  assign sizes = '120vw'
                  assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
                else
                  assign sizes = '100vw'
                  assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
                endif
                assign fetch_priority = 'auto'
                if section.index == 1
                  assign fetch_priority = 'high'
                endif
              -%}
              {%- if forloop.first %}
                {{
                  block.settings.image
                  | image_url: width: 3840
                  | image_tag: height: height, sizes: sizes, widths: widths, fetchpriority: fetch_priority
                }}
              {%- else -%}
                {{
                  block.settings.image
                  | image_url: width: 3840
                  | image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths
                }}
              {%- endif -%}
            {%- else -%}
              {%- assign placeholder_slide = forloop.index | modulo: 2 -%}
              {%- if placeholder_slide == 1 -%}
                {{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
              {%- else -%}
                {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
              {%- endif -%}
            {%- endif -%}
          </div>
          <div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll and forloop.index == 1 %} scroll-trigger animate--slide-in{% endif %}">
            <div class="slideshow__text banner__box content-container content-container--full-width-mobile color-{{ block.settings.color_scheme }} gradient slideshow__text--{{ block.settings.text_alignment }} slideshow__text-mobile--{{ block.settings.text_alignment_mobile }}">
              {%- if block.settings.heading != blank -%}
                <h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}">
                  {{ block.settings.heading }}
                </h2>
              {%- endif -%}
              {%- if block.settings.subheading != blank -%}
                <div class="banner__text rte" {{ block.shopify_attributes }}>
                  <p>{{ block.settings.subheading }}</p>
                </div>
              {%- endif -%}
              {%- if block.settings.button_label != blank -%}
                <div class="banner__buttons">
                  <a
                    {% if block.settings.link %}
                      href="{{ block.settings.link }}"
                    {% else %}
                      role="link" aria-disabled="true"
                    {% endif %}
                    class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}"
                  >
                    {{- block.settings.button_label | escape -}}
                  </a>
                </div>
              {%- endif -%}
            </div>
          </div>
        </a>
      </div>
    {%- endfor -%}
  </div>

  {%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}
    <div class="slideshow__controls slider-buttons no-js-hidden{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">
      <button
        type="button"
        class="slider-button slider-button--prev"
        name="previous"
        aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
        aria-controls="Slider-{{ section.id }}"
      >
        {% render 'icon-caret' %}
      </button>
      <div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">
        {%- if section.settings.slider_visual == 'counter' -%}
          <span class="slider-counter--current">1</span>
          <span aria-hidden="true"> / </span>
          <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
          <span class="slider-counter--total">{{ section.blocks.size }}</span>
        {%- else -%}
          <div class="slideshow__control-wrapper">
            {%- for block in section.blocks -%}
              <button
                class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"
                aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
                aria-controls="Slider-{{ section.id }}"
              >
                {%- if section.settings.slider_visual == 'numbers' -%}
                  {{ forloop.index -}}
                {%- else -%}
                  <span class="dot"></span>
                {%- endif -%}
              </button>
            {%- endfor -%}
          </div>
        {%- endif -%}
      </div>
      <button
        type="button"
        class="slider-button slider-button--next"
        name="next"
        aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
        aria-controls="Slider-{{ section.id }}"
      >
        {% render 'icon-caret' %}
      </button>

      {%- if section.settings.auto_rotate -%}
        <button
          type="button"
          class="slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}"
          aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"
        >
          {%- render 'icon-pause' -%}
          {%- render 'icon-play' -%}
        </button>
      {%- endif -%}
    </div>
    <noscript>
      <div class="slider-buttons">
        <div class="slider-counter">
          {%- for block in section.blocks -%}
            <a
              href="#Slide-{{ section.id }}-{{ forloop.index }}"
              class="slider-counter__link link"
              aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
            >
              {{ forloop.index }}
            </a>
          {%- endfor -%}
        </div>
      </div>
    </noscript>
  {%- endif -%}
</slideshow-component>

{%- if request.design_mode -%}
  <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

{% schema %}
{
  "name": "t:sections.slideshow.name",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "full_bleed",
          "label": "t:sections.slideshow.settings.layout.options__1.label"
        },
        {
          "value": "grid",
          "label": "t:sections.slideshow.settings.layout.options__2.label"
        }
      ],
      "default": "full_bleed",
      "label": "t:sections.slideshow.settings.layout.label"
    },
    {
      "type": "select",
      "id": "slide_height",
      "options": [
        {
          "value": "adapt_image",
          "label": "t:sections.slideshow.settings.slide_height.options__1.label"
        },
        {
          "value": "small",
          "label": "t:sections.slideshow.settings.slide_height.options__2.label"
        },
        {
          "value": "medium",
          "label": "t:sections.slideshow.settings.slide_height.options__3.label"
        },
        {
          "value": "large",
          "label": "t:sections.slideshow.settings.slide_height.options__4.label"
        }
      ],
      "default": "medium",
      "label": "t:sections.slideshow.settings.slide_height.label"
    },
    {
      "type": "select",
      "id": "slider_visual",
      "options": [
        {
          "value": "dots",
          "label": "t:sections.slideshow.settings.slider_visual.options__2.label"
        },
        {
          "value": "counter",
          "label": "t:sections.slideshow.settings.slider_visual.options__1.label"
        },
        {
          "value": "numbers",
          "label": "t:sections.slideshow.settings.slider_visual.options__3.label"
        }
      ],
      "default": "counter",
      "label": "t:sections.slideshow.settings.slider_visual.label"
    },
    {
      "type": "checkbox",
      "id": "auto_rotate",
      "label": "t:sections.slideshow.settings.auto_rotate.label",
      "default": false
    },
    {
      "type": "range",
      "id": "change_slides_speed",
      "min": 3,
      "max": 9,
      "step": 2,
      "unit": "s",
      "label": "t:sections.slideshow.settings.change_slides_speed.label",
      "default": 5
    },
    {
      "type": "header",
      "content": "t:sections.all.animation.content"
    },
    {
      "type": "select",
      "id": "image_behavior",
      "options": [
        {
          "value": "none",
          "label": "t:sections.all.animation.image_behavior.options__1.label"
        },
        {
          "value": "ambient",
          "label": "t:sections.all.animation.image_behavior.options__2.label"
        }
      ],
      "default": "none",
      "label": "t:sections.all.animation.image_behavior.label"
    },
    {
      "type": "header",
      "content": "t:sections.slideshow.settings.mobile.content"
    },
    {
      "type": "checkbox",
      "id": "show_text_below",
      "label": "t:sections.slideshow.settings.show_text_below.label",
      "default": true
    },
    {
      "type": "header",
      "content": "t:sections.slideshow.settings.accessibility.content"
    },
    {
      "type": "text",
      "id": "accessibility_info",
      "label": "t:sections.slideshow.settings.accessibility.label",
      "info": "t:sections.slideshow.settings.accessibility.info",
      "default": "Slideshow about our brand"
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "t:sections.slideshow.blocks.slide.name",
      "limit": 5,
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.slideshow.blocks.slide.settings.image.label"
        },
         {
          "type": "url",
          "id": "banner_link",
          "label": "Banner Link"
        },
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Image slide",
          "label": "t:sections.slideshow.blocks.slide.settings.heading.label"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h2",
              "label": "t:sections.all.heading_size.options__1.label"
            },
            {
              "value": "h1",
              "label": "t:sections.all.heading_size.options__2.label"
            },
            {
              "value": "h0",
              "label": "t:sections.all.heading_size.options__3.label"
            }
          ],
          "default": "h1",
          "label": "t:sections.all.heading_size.label"
        },
        {
          "type": "inline_richtext",
          "id": "subheading",
          "default": "Tell your brand's story through images",
          "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
        },
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
          "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.slideshow.blocks.slide.settings.link.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary",
          "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
          "default": false
        },
        {
          "type": "select",
          "id": "box_align",
          "options": [
            {
              "value": "top-left",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__1.label"
            },
            {
              "value": "top-center",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__2.label"
            },
            {
              "value": "top-right",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__3.label"
            },
            {
              "value": "middle-left",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__4.label"
            },
            {
              "value": "middle-center",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__5.label"
            },
            {
              "value": "middle-right",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__6.label"
            },
            {
              "value": "bottom-left",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__7.label"
            },
            {
              "value": "bottom-center",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__8.label"
            },
            {
              "value": "bottom-right",
              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__9.label"
            }
          ],
          "default": "middle-center",
          "label": "t:sections.slideshow.blocks.slide.settings.box_align.label",
          "info": "t:sections.slideshow.blocks.slide.settings.box_align.info"
        },
        {
          "type": "checkbox",
          "id": "show_text_box",
          "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
          "default": true
        },
        {
          "type": "select",
          "id": "text_alignment",
          "options": [
            {
              "value": "left",
              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label"
            },
            {
              "value": "center",
              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label"
            },
            {
              "value": "right",
              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label"
            }
          ],
          "default": "center",
          "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.label"
        },
        {
          "type": "range",
          "id": "image_overlay_opacity",
          "min": 0,
          "max": 100,
          "step": 10,
          "unit": "%",
          "label": "t:sections.slideshow.blocks.slide.settings.image_overlay_opacity.label",
          "default": 0
        },
        {
          "type": "color_scheme",
          "id": "color_scheme",
          "label": "t:sections.all.colors.label",
          "default": "scheme-1"
        },
        {
          "type": "header",
          "content": "t:sections.slideshow.settings.mobile.content"
        },
        {
          "type": "select",
          "id": "text_alignment_mobile",
          "options": [
            {
              "value": "left",
              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label"
            },
            {
              "value": "center",
              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label"
            },
            {
              "value": "right",
              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label"
            }
          ],
          "default": "center",
          "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.slideshow.presets.name",
      "blocks": [
        {
          "type": "slide"
        },
        {
          "type": "slide"
        }
      ]
    }
  ]
}
{% endschema %}

 

 

With this done you will get what you need . 

I hope you might like this solution and would work for you . Let me know if you need more help .

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
lucasgbona
Tourist
10 0 1

Hey Rahul, 

The solution you provided works well. I appreciated your help.

 

One last question. 

 

On mobile responsive the slideshow has a big space at the bottom of it, making a good room between it and the next section.

Would you be able to help me to remove that space on mobile responsive please?

 

 I added a screenshot of it for further details.

 

517323a1-90ce-42ea-a748-19204a5681ca.jpeg

 

Thank you, once again.