How can I adjust my banner size only on a desktop view?

NinjaHolding · ‎01-27-2023

Hello everyone, Im trying to change the size of my banner but only on the computer because the size and the proportion on the cellphone it is perfect, anyone know how I can do that ? at the moment Iam using the Danw theme

LitExtension · ‎01-28-2023

Hi @NinjaHolding,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (min-width: 750px){
#Slider-template--15688597766282__bdd21044-6568-4fea-aa92-35e032a7b1fa::before, #Slider-template--15688597766282__bdd21044-6568-4fea-aa92-35e032a7b1fa .media::before {
    padding-bottom: 35% !important;
}
}

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

View solution in original post

LitExtension · ‎01-30-2023

Hi @NinjaHolding,

Please change all code:

{{ '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 %}"
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"
>
<div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %} {% if block.settings.image_1 %} small-hide{% endif %}">
          {%- if block.settings.image -%}
            <img
              srcset="{%- if block.settings.image.width >= 375 -%}{{ block.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
              {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
              {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
              {%- if block.settings.image.width >= 1100 -%}{{ block.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
              {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
              {%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
              {%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
              {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
              {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
              {{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
              sizes="100vw"
              src="{{ block.settings.image | image_url: width: 1500 }}"
              loading="lazy"
              alt="{{ block.settings.image.alt | escape }}"
              width="{{ block.settings.image.width }}"
              height="{{ block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round }}"
            >
          {%- else -%}
            {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>
        {%- if block.settings.image_1 -%}
        <div class="slideshow__media banner__media media medium-hide large-up-hide">
            <img
              srcset="{%- if block.settings.image_1.width >= 375 -%}{{ block.settings.image_1 | image_url: width: 375 }} 375w,{%- endif -%}
              {%- if block.settings.image_1.width >= 550 -%}{{ block.settings.image_1 | image_url: width: 550 }} 550w,{%- endif -%}
              {%- if block.settings.image_1.width >= 750 -%}{{ block.settings.image_1 | image_url: width: 750 }} 750w,{%- endif -%}
              {%- if block.settings.image_1.width >= 1100 -%}{{ block.settings.image_1 | image_url: width: 1100 }} 1100w,{%- endif -%}
              {%- if block.settings.image_1.width >= 1500 -%}{{ block.settings.image_1 | image_url: width: 1500 }} 1500w,{%- endif -%}
              {%- if block.settings.image_1.width >= 1780 -%}{{ block.settings.image_1 | image_url: width: 1780 }} 1780w,{%- endif -%}
              {%- if block.settings.image_1.width >= 2000 -%}{{ block.settings.image_1 | image_url: width: 2000 }} 2000w,{%- endif -%}
              {%- if block.settings.image_1.width >= 3000 -%}{{ block.settings.image_1 | image_url: width: 3000 }} 3000w,{%- endif -%}
              {%- if block.settings.image_1.width >= 3840 -%}{{ block.settings.image_1 | image_url: width: 3840 }} 3840w,{%- endif -%}
              {{ block.settings.image_1 | image_url }} {{ block.settings.image_1.width }}w"
              sizes="100vw"
              src="{{ block.settings.image_1 | image_url: width: 1500 }}"
              loading="lazy"
              alt="{{ block.settings.image_1.alt | escape }}"
              width="{{ block.settings.image_1.width }}"
              height="{{ block.settings.image_1.width | divided_by: block.settings.image_1.aspect_ratio | round }}"
            >
        </div>
        {%- endif -%}
<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 %}">
<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 {{ block.settings.heading_size }}">{{ block.settings.heading | escape }}</h2>
{%- endif -%}
{%- if block.settings.subheading != blank -%}
<div class="banner__text" {{ block.shopify_attributes }}>
<span>{{ block.settings.subheading | escape }}</span>
</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>
</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",
"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": "adapt_image",
"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.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": "image_picker",
          "id": "image",
          "label": "Image for Desktop"
        },
        {
          "type": "image_picker",
          "id": "image_1",
          "label": "Image for Mobile"
        },
{
"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": "text",
"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": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.slideshow.blocks.slide.settings.color_scheme.info"
},
{
"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 %}

I have added option for images on desktop and mobile, you just need to upload, it will display fine

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

View solution in original post

LitExtension · ‎01-30-2023

Hi @NinjaHolding,

Please remove code here:

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

View solution in original post

LitExtension · ‎02-08-2023

Hi @NinjaHolding,

Sorry, please change all code:

{{ '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) {
{% if section.blocks.first.settings.image_1 %}
  #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_1.aspect_ratio | times: 100 }}%;
    content: '';
    display: block;
  }
{% else %}
  #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;
  }
{% endif %}
}

@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 %}"
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"
>
<div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %} {% if block.settings.image_1 %} small-hide{% endif %}">
          {%- if block.settings.image -%}
            <img
              srcset="{%- if block.settings.image.width >= 375 -%}{{ block.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
              {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
              {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
              {%- if block.settings.image.width >= 1100 -%}{{ block.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
              {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
              {%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
              {%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
              {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
              {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
              {{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
              sizes="100vw"
              src="{{ block.settings.image | image_url: width: 1500 }}"
              loading="lazy"
              alt="{{ block.settings.image.alt | escape }}"
              width="{{ block.settings.image.width }}"
              height="{{ block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round }}"
            >
          {%- else -%}
            {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>
        {%- if block.settings.image_1 -%}
        <div class="slideshow__media banner__media media medium-hide large-up-hide">
            <img
              srcset="{%- if block.settings.image_1.width >= 375 -%}{{ block.settings.image_1 | image_url: width: 375 }} 375w,{%- endif -%}
              {%- if block.settings.image_1.width >= 550 -%}{{ block.settings.image_1 | image_url: width: 550 }} 550w,{%- endif -%}
              {%- if block.settings.image_1.width >= 750 -%}{{ block.settings.image_1 | image_url: width: 750 }} 750w,{%- endif -%}
              {%- if block.settings.image_1.width >= 1100 -%}{{ block.settings.image_1 | image_url: width: 1100 }} 1100w,{%- endif -%}
              {%- if block.settings.image_1.width >= 1500 -%}{{ block.settings.image_1 | image_url: width: 1500 }} 1500w,{%- endif -%}
              {%- if block.settings.image_1.width >= 1780 -%}{{ block.settings.image_1 | image_url: width: 1780 }} 1780w,{%- endif -%}
              {%- if block.settings.image_1.width >= 2000 -%}{{ block.settings.image_1 | image_url: width: 2000 }} 2000w,{%- endif -%}
              {%- if block.settings.image_1.width >= 3000 -%}{{ block.settings.image_1 | image_url: width: 3000 }} 3000w,{%- endif -%}
              {%- if block.settings.image_1.width >= 3840 -%}{{ block.settings.image_1 | image_url: width: 3840 }} 3840w,{%- endif -%}
              {{ block.settings.image_1 | image_url }} {{ block.settings.image_1.width }}w"
              sizes="100vw"
              src="{{ block.settings.image_1 | image_url: width: 1500 }}"
              loading="lazy"
              alt="{{ block.settings.image_1.alt | escape }}"
              width="{{ block.settings.image_1.width }}"
              height="{{ block.settings.image_1.width | divided_by: block.settings.image_1.aspect_ratio | round }}"
            >
        </div>
        {%- endif -%}
<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 %}">
<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 {{ block.settings.heading_size }}">{{ block.settings.heading | escape }}</h2>
{%- endif -%}
{%- if block.settings.subheading != blank -%}
<div class="banner__text" {{ block.shopify_attributes }}>
<span>{{ block.settings.subheading | escape }}</span>
</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>
</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",
"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": "adapt_image",
"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.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": "Image for Desktop"
        },
        {
          "type": "image_picker",
          "id": "image_1",
          "label": "Image for Mobile"
        },
{
"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": "text",
"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": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.slideshow.blocks.slide.settings.color_scheme.info"
},
{
"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 %}

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

View solution in original post

LitExtension · ‎01-28-2023

Hi @NinjaHolding,

Please send your site and if your site is password protected, please send me the password. I will check it.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

NinjaHolding · ‎01-28-2023

Hi @LitExtension, thanks for that, my website is Mammy Outlet (mammy-outlet.myshopify.com)

and the password is: reigum

LitExtension · ‎01-28-2023

Hi @NinjaHolding,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (min-width: 750px){
#Slider-template--15688597766282__bdd21044-6568-4fea-aa92-35e032a7b1fa::before, #Slider-template--15688597766282__bdd21044-6568-4fea-aa92-35e032a7b1fa .media::before {
    padding-bottom: 35% !important;
}
}

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

NinjaHolding · ‎01-28-2023

Thanks @LitExtension the code works very well, if you dont mind, has some way to put a diferent image just on the computer ? preserving the image on the cellphone

LitExtension · ‎01-28-2023

Hi @NinjaHolding,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

NinjaHolding · ‎01-30-2023

Thanks @LitExtension , here the code

{{ '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 %}"
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"
>
<div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}">
{%- if block.settings.image -%}
{%- assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round -%}
{{ block.settings.image | image_url: width: 3840 | image_tag:
loading: 'lazy',
height: height,
sizes: "100vw",
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
}}
{%- else -%}
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
{%- 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 %}">
<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 {{ block.settings.heading_size }}">{{ block.settings.heading | escape }}</h2>
{%- endif -%}
{%- if block.settings.subheading != blank -%}
<div class="banner__text" {{ block.shopify_attributes }}>
<span>{{ block.settings.subheading | escape }}</span>
</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>
</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",
"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": "adapt_image",
"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.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": "text",
"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": "text",
"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": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.slideshow.blocks.slide.settings.color_scheme.info"
},
{
"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 %}

LitExtension · ‎01-30-2023

Hi @NinjaHolding,

Please change all code:

{{ '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 %}"
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"
>
<div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %} {% if block.settings.image_1 %} small-hide{% endif %}">
          {%- if block.settings.image -%}
            <img
              srcset="{%- if block.settings.image.width >= 375 -%}{{ block.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
              {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
              {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
              {%- if block.settings.image.width >= 1100 -%}{{ block.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
              {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
              {%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
              {%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
              {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
              {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
              {{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
              sizes="100vw"
              src="{{ block.settings.image | image_url: width: 1500 }}"
              loading="lazy"
              alt="{{ block.settings.image.alt | escape }}"
              width="{{ block.settings.image.width }}"
              height="{{ block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round }}"
            >
          {%- else -%}
            {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>
        {%- if block.settings.image_1 -%}
        <div class="slideshow__media banner__media media medium-hide large-up-hide">
            <img
              srcset="{%- if block.settings.image_1.width >= 375 -%}{{ block.settings.image_1 | image_url: width: 375 }} 375w,{%- endif -%}
              {%- if block.settings.image_1.width >= 550 -%}{{ block.settings.image_1 | image_url: width: 550 }} 550w,{%- endif -%}
              {%- if block.settings.image_1.width >= 750 -%}{{ block.settings.image_1 | image_url: width: 750 }} 750w,{%- endif -%}
              {%- if block.settings.image_1.width >= 1100 -%}{{ block.settings.image_1 | image_url: width: 1100 }} 1100w,{%- endif -%}
              {%- if block.settings.image_1.width >= 1500 -%}{{ block.settings.image_1 | image_url: width: 1500 }} 1500w,{%- endif -%}
              {%- if block.settings.image_1.width >= 1780 -%}{{ block.settings.image_1 | image_url: width: 1780 }} 1780w,{%- endif -%}
              {%- if block.settings.image_1.width >= 2000 -%}{{ block.settings.image_1 | image_url: width: 2000 }} 2000w,{%- endif -%}
              {%- if block.settings.image_1.width >= 3000 -%}{{ block.settings.image_1 | image_url: width: 3000 }} 3000w,{%- endif -%}
              {%- if block.settings.image_1.width >= 3840 -%}{{ block.settings.image_1 | image_url: width: 3840 }} 3840w,{%- endif -%}
              {{ block.settings.image_1 | image_url }} {{ block.settings.image_1.width }}w"
              sizes="100vw"
              src="{{ block.settings.image_1 | image_url: width: 1500 }}"
              loading="lazy"
              alt="{{ block.settings.image_1.alt | escape }}"
              width="{{ block.settings.image_1.width }}"
              height="{{ block.settings.image_1.width | divided_by: block.settings.image_1.aspect_ratio | round }}"
            >
        </div>
        {%- endif -%}
<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 %}">
<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 {{ block.settings.heading_size }}">{{ block.settings.heading | escape }}</h2>
{%- endif -%}
{%- if block.settings.subheading != blank -%}
<div class="banner__text" {{ block.shopify_attributes }}>
<span>{{ block.settings.subheading | escape }}</span>
</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>
</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",
"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": "adapt_image",
"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.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": "image_picker",
          "id": "image",
          "label": "Image for Desktop"
        },
        {
          "type": "image_picker",
          "id": "image_1",
          "label": "Image for Mobile"
        },
{
"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": "text",
"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": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.slideshow.blocks.slide.settings.color_scheme.info"
},
{
"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 %}

I have added option for images on desktop and mobile, you just need to upload, it will display fine

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

NinjaHolding · ‎01-30-2023

Thank you very much @LitExtension, you are help me very much, after that I just have to change the photo normally ?

LitExtension · ‎01-30-2023

Hi @NinjaHolding,

After this you just need to upload any image, it will show full size for desktop and mobile

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

NinjaHolding · ‎01-30-2023

@LitExtension didn´t work this time, appears this mensage when I try to save

LitExtension · ‎01-30-2023

Hi @NinjaHolding,

Please remove code here:

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

NinjaHolding · ‎01-31-2023

Yohhh, @LitExtension you are f*** magic, thank you very much, the code worked this time

NinjaHolding · ‎02-02-2023

@LitExtension sorry bother you, but now when I save the modifications the size of the banners start to ajust the form by the image

LitExtension · ‎02-02-2023

Hi @NinjaHolding,

Please send me screenshot description of it, I will check it.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

NinjaHolding · ‎02-03-2023

Now I can put to differents images, one on the desktop another on the mobile. But when I chose any image for the desktop distorts the proportion of the image on the mobile

LitExtension · ‎02-03-2023

Hi @NinjaHolding,

Please upload the image and send me the preview link. I will check it.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

NinjaHolding · ‎02-06-2023

Mammy Outlet (mammy-outlet.myshopify.com)

Thanks @LitExtension, I gonna send another banner in another replying

NinjaHolding · ‎02-06-2023

The other banner

LitExtension · ‎02-07-2023

Hi @NinjaHolding,

Please change all code:

{{ '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) {
{% if section.blocks.first.settings.image_1 %}
  #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_1.aspect_ratio | times: 100 }}%;
    content: '';
    display: block;
  }
{% else %}
  #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;
  }
{% endif %}
}

@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 %}"
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"
>
<div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %} {% if block.settings.image_1 %} small-hide{% endif %}">
          {%- if block.settings.image -%}
            <img
              srcset="{%- if block.settings.image.width >= 375 -%}{{ block.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
              {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
              {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
              {%- if block.settings.image.width >= 1100 -%}{{ block.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
              {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
              {%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
              {%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
              {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
              {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
              {{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
              sizes="100vw"
              src="{{ block.settings.image | image_url: width: 1500 }}"
              loading="lazy"
              alt="{{ block.settings.image.alt | escape }}"
              width="{{ block.settings.image.width }}"
              height="{{ block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round }}"
            >
          {%- else -%}
            {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>
        {%- if block.settings.image_1 -%}
        <div class="slideshow__media banner__media media medium-hide large-up-hide">
            <img
              srcset="{%- if block.settings.image_1.width >= 375 -%}{{ block.settings.image_1 | image_url: width: 375 }} 375w,{%- endif -%}
              {%- if block.settings.image_1.width >= 550 -%}{{ block.settings.image_1 | image_url: width: 550 }} 550w,{%- endif -%}
              {%- if block.settings.image_1.width >= 750 -%}{{ block.settings.image_1 | image_url: width: 750 }} 750w,{%- endif -%}
              {%- if block.settings.image_1.width >= 1100 -%}{{ block.settings.image_1 | image_url: width: 1100 }} 1100w,{%- endif -%}
              {%- if block.settings.image_1.width >= 1500 -%}{{ block.settings.image_1 | image_url: width: 1500 }} 1500w,{%- endif -%}
              {%- if block.settings.image_1.width >= 1780 -%}{{ block.settings.image_1 | image_url: width: 1780 }} 1780w,{%- endif -%}
              {%- if block.settings.image_1.width >= 2000 -%}{{ block.settings.image_1 | image_url: width: 2000 }} 2000w,{%- endif -%}
              {%- if block.settings.image_1.width >= 3000 -%}{{ block.settings.image_1 | image_url: width: 3000 }} 3000w,{%- endif -%}
              {%- if block.settings.image_1.width >= 3840 -%}{{ block.settings.image_1 | image_url: width: 3840 }} 3840w,{%- endif -%}
              {{ block.settings.image_1 | image_url }} {{ block.settings.image_1.width }}w"
              sizes="100vw"
              src="{{ block.settings.image_1 | image_url: width: 1500 }}"
              loading="lazy"
              alt="{{ block.settings.image_1.alt | escape }}"
              width="{{ block.settings.image_1.width }}"
              height="{{ block.settings.image_1.width | divided_by: block.settings.image_1.aspect_ratio | round }}"
            >
        </div>
        {%- endif -%}
<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 %}">
<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 {{ block.settings.heading_size }}">{{ block.settings.heading | escape }}</h2>
{%- endif -%}
{%- if block.settings.subheading != blank -%}
<div class="banner__text" {{ block.shopify_attributes }}>
<span>{{ block.settings.subheading | escape }}</span>
</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>
</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",
"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": "adapt_image",
"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.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": "image_picker",
          "id": "image",
          "label": "Image for Desktop"
        },
        {
          "type": "image_picker",
          "id": "image_1",
          "label": "Image for Mobile"
        },
{
"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": "text",
"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": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.slideshow.blocks.slide.settings.color_scheme.info"
},
{
"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 %}

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

NinjaHolding · ‎02-07-2023

Thanks @LitExtension, but is appearing error

LitExtension · ‎02-08-2023

Hi @NinjaHolding,

Sorry, please change all code:

{{ '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) {
{% if section.blocks.first.settings.image_1 %}
  #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_1.aspect_ratio | times: 100 }}%;
    content: '';
    display: block;
  }
{% else %}
  #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;
  }
{% endif %}
}

@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 %}"
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"
>
<div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %} {% if block.settings.image_1 %} small-hide{% endif %}">
          {%- if block.settings.image -%}
            <img
              srcset="{%- if block.settings.image.width >= 375 -%}{{ block.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
              {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
              {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
              {%- if block.settings.image.width >= 1100 -%}{{ block.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
              {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
              {%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
              {%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
              {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
              {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
              {{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
              sizes="100vw"
              src="{{ block.settings.image | image_url: width: 1500 }}"
              loading="lazy"
              alt="{{ block.settings.image.alt | escape }}"
              width="{{ block.settings.image.width }}"
              height="{{ block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round }}"
            >
          {%- else -%}
            {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>
        {%- if block.settings.image_1 -%}
        <div class="slideshow__media banner__media media medium-hide large-up-hide">
            <img
              srcset="{%- if block.settings.image_1.width >= 375 -%}{{ block.settings.image_1 | image_url: width: 375 }} 375w,{%- endif -%}
              {%- if block.settings.image_1.width >= 550 -%}{{ block.settings.image_1 | image_url: width: 550 }} 550w,{%- endif -%}
              {%- if block.settings.image_1.width >= 750 -%}{{ block.settings.image_1 | image_url: width: 750 }} 750w,{%- endif -%}
              {%- if block.settings.image_1.width >= 1100 -%}{{ block.settings.image_1 | image_url: width: 1100 }} 1100w,{%- endif -%}
              {%- if block.settings.image_1.width >= 1500 -%}{{ block.settings.image_1 | image_url: width: 1500 }} 1500w,{%- endif -%}
              {%- if block.settings.image_1.width >= 1780 -%}{{ block.settings.image_1 | image_url: width: 1780 }} 1780w,{%- endif -%}
              {%- if block.settings.image_1.width >= 2000 -%}{{ block.settings.image_1 | image_url: width: 2000 }} 2000w,{%- endif -%}
              {%- if block.settings.image_1.width >= 3000 -%}{{ block.settings.image_1 | image_url: width: 3000 }} 3000w,{%- endif -%}
              {%- if block.settings.image_1.width >= 3840 -%}{{ block.settings.image_1 | image_url: width: 3840 }} 3840w,{%- endif -%}
              {{ block.settings.image_1 | image_url }} {{ block.settings.image_1.width }}w"
              sizes="100vw"
              src="{{ block.settings.image_1 | image_url: width: 1500 }}"
              loading="lazy"
              alt="{{ block.settings.image_1.alt | escape }}"
              width="{{ block.settings.image_1.width }}"
              height="{{ block.settings.image_1.width | divided_by: block.settings.image_1.aspect_ratio | round }}"
            >
        </div>
        {%- endif -%}
<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 %}">
<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 {{ block.settings.heading_size }}">{{ block.settings.heading | escape }}</h2>
{%- endif -%}
{%- if block.settings.subheading != blank -%}
<div class="banner__text" {{ block.shopify_attributes }}>
<span>{{ block.settings.subheading | escape }}</span>
</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>
</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",
"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": "adapt_image",
"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.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": "Image for Desktop"
        },
        {
          "type": "image_picker",
          "id": "image_1",
          "label": "Image for Mobile"
        },
{
"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": "text",
"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": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.slideshow.blocks.slide.settings.color_scheme.info"
},
{
"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 %}

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

NinjaHolding · ‎02-09-2023

Thanks my friend @LitExtension for all the support, finally is everything working properly

How can I adjust my banner size only on a desktop view?

How can I adjust my banner size only on a desktop view?

Community Blog Articles