Hello,
The store link is: www.gladscollectibles.ca
On the homepage, I want to add 2 more images to the banner section that can be swiped through on Desktop and mobile. So far, one image is posted to the banner section but I am unsure how to add multiple images.
The screenshots are attached are from another website but is what I want to do on mine:
Thank you in advance!!
Which Dawn version are you using? It should be there by default.
Dawn version 2.4.0
I can’t seem find it in the section options.
Ah the slideshow section was added in version 2.5.0.
I am wondering as I have personalized a lot of the code so to update the theme version will take a significant amount of time to re-customize everything, is there a way just to code in the slideshow section?
You can copy the code added. You can try to copy the code for the slideshow. Please duplicate your theme prior to starting with the steps.
Go to Admin > Online store > Themes > Actions > Edit 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 -%}
{%- if request.design_mode -%}
{%- 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 %}
slideshow-component {
position: relative;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 989px) {
.no-js slideshow-component .slider {
padding-bottom: 3rem;
}
}
slideshow-component .slideshow.banner {
flex-direction: row;
flex-wrap: nowrap;
margin: 0;
gap: 0;
}
.slideshow__slide {
padding: 0;
position: relative;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 749px) {
.slideshow--placeholder.banner--mobile-bottom.banner--adapt_image .slideshow__media,
.slideshow--placeholder.banner--adapt_image:not(.banner--mobile-bottom) {
height: 28rem;
}
}
@media screen and (min-width: 750px) {
.slideshow--placeholder.banner--adapt_image {
height: 56rem;
}
}
.slideshow__text.banner__box {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 54.5rem;
}
.slideshow__text > * {
max-width: 100%;
}
@media screen and (max-width: 749px) {
slideshow-component.page-width .slideshow__text {
border-right: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
border-left: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
}
.banner--mobile-bottom .slideshow__text.banner__box {
max-width: 100%;
}
.banner--mobile-bottom .slideshow__text-wrapper {
flex-grow: 1;
}
.banner--mobile-bottom .slideshow__text.banner__box {
height: 100%;
}
.banner--mobile-bottom .slideshow__text .button {
flex-grow: 0;
}
.slideshow__text.slideshow__text-mobile--left {
align-items: flex-start;
text-align: left;
}
.slideshow__text.slideshow__text-mobile--right {
align-items: flex-end;
text-align: right;
}
}
@media screen and (min-width: 750px) {
.slideshow__text.slideshow__text--left {
align-items: flex-start;
text-align: left;
}
.slideshow__text.slideshow__text--right {
align-items: flex-end;
text-align: right;
}
}
.slideshow:not(.banner--mobile-bottom) .slideshow__text-wrapper {
height: 100%;
}
@media screen and (min-width: 750px) {
.slideshow__text-wrapper.banner__content {
height: 100%;
padding: 5rem;
}
}
.slideshow__controls {
border: 0.1rem solid rgba(var(--color-foreground), 0.08);
}
.slideshow__controls--top {
order: 2;
z-index: 1;
}
@media screen and (max-width: 749px) {
.slideshow__controls--border-radius-mobile {
border-bottom-right-radius: var(--text-boxes-radius);
border-bottom-left-radius: var(--text-boxes-radius);
}
}
.spaced-section--full-width:last-child slideshow-component:not(.page-width) .slideshow__controls {
border-bottom: none;
}
@media screen and (min-width: 750px) {
.slideshow__controls {
position: relative;
}
}
slideshow-component:not(.page-width) .slider-buttons {
border-right: 0;
border-left: 0;
}
.slideshow__control-wrapper {
display: flex;
}
.slideshow__autoplay {
position: absolute;
right: 0;
border-left: none;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 749px) {
slideshow-component.page-width .slideshow__autoplay {
right: 1.5rem;
}
}
@media screen and (min-width: 750px) {
.slideshow__autoplay.slider-button {
position: inherit;
margin-left: 0.6rem;
padding: 0 0 0 0.6rem;
border-left: 0.1rem solid rgba(var(--color-foreground), 0.08);
}
}
.slideshow__autoplay .icon.icon-play,
.slideshow__autoplay .icon.icon-pause {
display: block;
position: absolute;
opacity: 1;
transform: scale(1);
transition: transform 150ms ease, opacity 150ms ease;
width: 0.8rem;
height: 1.2rem;
}
.slideshow__autoplay .icon.icon-play {
height: 1rem;
}
.slideshow__autoplay path {
fill: rgba(var(--color-foreground), 0.75);
}
.slideshow__autoplay:hover path {
fill: rgb(var(--color-foreground));
}
@media screen and (forced-colors: active) {
.slideshow__autoplay path,
.slideshow__autoplay:hover path{
fill: CanvasText;
}
}
.slideshow__autoplay:hover svg {
transform: scale(1.1);
}
.slideshow__autoplay--paused .icon-pause,
.slideshow__autoplay:not(.slideshow__autoplay--paused) .icon-play {
visibility: hidden;
opacity: 0;
transform: scale(.8)
}
class SlideshowComponent extends SliderComponent {
constructor() {
super();
this.sliderControlWrapper = this.querySelector('.slider-buttons');
this.enableSliderLooping = true;
if (!this.sliderControlWrapper) return;
this.sliderFirstItemNode = this.slider.querySelector('.slideshow__slide');
if (this.sliderItemsToShow.length > 0) this.currentPage = 1;
this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll('.slider-counter__link'));
this.sliderControlLinksArray.forEach(link => link.addEventListener('click', this.linkToSlide.bind(this)));
this.slider.addEventListener('scroll', this.setSlideVisibility.bind(this));
this.setSlideVisibility();
if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay();
}
setAutoPlay() {
this.sliderAutoplayButton = this.querySelector('.slideshow__autoplay');
this.autoplaySpeed = this.slider.dataset.speed * 1000;
this.sliderAutoplayButton.addEventListener('click', this.autoPlayToggle.bind(this));
this.addEventListener('mouseover', this.focusInHandling.bind(this));
this.addEventListener('mouseleave', this.focusOutHandling.bind(this));
this.addEventListener('focusin', this.focusInHandling.bind(this));
this.addEventListener('focusout', this.focusOutHandling.bind(this));
this.play();
this.autoplayButtonIsSetToPlay = true;
}
onButtonClick(event) {
super.onButtonClick(event);
const isFirstSlide = this.currentPage === 1;
const isLastSlide = this.currentPage === this.sliderItemsToShow.length;
if (!isFirstSlide && !isLastSlide) return;
if (isFirstSlide && event.currentTarget.name === 'previous') {
this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length;
} else if (isLastSlide && event.currentTarget.name === 'next') {
this.slideScrollPosition = 0;
}
this.slider.scrollTo({
left: this.slideScrollPosition
});
}
update() {
super.update();
this.sliderControlButtons = this.querySelectorAll('.slider-counter__link');
this.prevButton.removeAttribute('disabled');
if (!this.sliderControlButtons.length) return;
this.sliderControlButtons.forEach(link => {
link.classList.remove('slider-counter__link--active');
link.removeAttribute('aria-current');
});
this.sliderControlButtons[this.currentPage - 1].classList.add('slider-counter__link--active');
this.sliderControlButtons[this.currentPage - 1].setAttribute('aria-current', true);
}
autoPlayToggle() {
this.togglePlayButtonState(this.autoplayButtonIsSetToPlay);
this.autoplayButtonIsSetToPlay ? this.pause() : this.play();
this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay;
}
focusOutHandling(event) {
const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target);
if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return;
this.play();
}
focusInHandling(event) {
const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target);
if (focusedOnAutoplayButton && this.autoplayButtonIsSetToPlay) {
this.play();
} else if (this.autoplayButtonIsSetToPlay) {
this.pause();
}
}
play() {
this.slider.setAttribute('aria-live', 'off');
clearInterval(this.autoplay);
this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed);
}
pause() {
this.slider.setAttribute('aria-live', 'polite');
clearInterval(this.autoplay);
}
togglePlayButtonState(pauseAutoplay) {
if (pauseAutoplay) {
this.sliderAutoplayButton.classList.add('slideshow__autoplay--paused');
this.sliderAutoplayButton.setAttribute('aria-label', window.accessibilityStrings.playSlideshow);
} else {
this.sliderAutoplayButton.classList.remove('slideshow__autoplay--paused');
this.sliderAutoplayButton.setAttribute('aria-label', window.accessibilityStrings.pauseSlideshow);
}
}
autoRotateSlides() {
const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.slider.querySelector('.slideshow__slide').clientWidth;
this.slider.scrollTo({
left: slideScrollPosition
});
}
setSlideVisibility() {
this.sliderItemsToShow.forEach((item, index) => {
const button = item.querySelector('a');
if (index === this.currentPage - 1) {
if (button) button.removeAttribute('tabindex');
item.setAttribute('aria-hidden', 'false');
item.removeAttribute('tabindex');
} else {
if (button) button.setAttribute('tabindex', '-1');
item.setAttribute('aria-hidden', 'true');
item.setAttribute('tabindex', '-1');
}
});
}
linkToSlide(event) {
event.preventDefault();
const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage);
this.slider.scrollTo({
left: slideScrollPosition
});
}
}
customElements.define('slideshow-component', SlideshowComponent);
