Slideshow master

Go to Collection pages > Sections > Slideshow master

1 - Title

  • Turn off on mobile: Not show this section on mobile

  • Turn off on desktop: Not show this section on desktop

2 - Space settings

2.1 - Max width section

1200px
Wide
Full width

2.2 - Margin top, bottom, paddings

  • Margin top and bottom: 2.5rem|3rem|3.5rem|4rem|4.5rem|5rem

  • Paddings (top right bottom left): 6rem 6rem 0 6rem

3 - Background settings

3.1 - Background color

3.2 - Background image

  • Size suggestion: 1920 x 497 pixels

4 - Slider settings

4.1 - Display external content

4.2 - Use slideshow full screen

4.3 - Use Autoplay

  • Slideshow will autoplay

4.4 - Use navigation

4.5 - Navigation style

Default
Style 1
Style 2

4.6 - Navigation mode

Default
White
Primary color

4.7 - Navigation position

Default
Center center
Center ouside

4.8 - Use dot

4.9 - Dots mode

Default
White
Primary color

4.10 - Use Scrollbar

5 - Height slider settings

5.1 - Height slider

5.2 - Change slides every

  • After X secs slides will change

5.3 - Responsive

{
"0": {
"slidesPerView": 1,
"spaceBetween": 0
},
"320": {
"slidesPerView": 1,
"spaceBetween": 10
},
"768": {
"slidesPerView": 1,
"spaceBetween": 20
},
"992": {
"slidesPerView": 1,
"spaceBetween": 20
},
"1200": {
"slidesPerView": 1,
"spaceBetween": 20
}
}

6 - Banner settings

  • Banner Content type:

  • Note: You must select this item before adding the Item banner blocks.

  • Banner type 3 only appears on screens with resolutions greater than 1600px.

7 - CSS custom

7.1 - Css text of slideshow

7.2 - Css for section

  • Keywords start: .section_id

.section_id .slideshow__subtitle sup {
vertical-align: top;
font-size: 1.3rem;
top: 1em;
margin-right: 0;
letter-spacing: -.01em;
}
@media screen and (min-width: 768px){
.section_id .slideshow__subtitle sup {
font-size: 1.6rem;
}
}
@media screen and (min-width: 992px){
.section_id .slideshow__subtitle sup {
font-size: 1.8rem;
}
}
@media screen and (min-width: 1200px){
.section_id .slideshow__subtitle sup {
font-size: 2rem;
}
}

8 - Content

** Item Image

8.1 - Image (desktop)

8.2 - Image mobile

* Heading

8.3 - Heading text

8.4 - Font text heading

Choose font suitable with your store

8.5 - Css responsive heading

  • Keywords start: .block_id

.block_id .slideshow__title{
color: #fff;
font-size: 1.4rem;
letter-spacing: -.01em;
margin-bottom: .5rem;
}
@media (min-width: 576px){
.block_id .slideshow__title{
font-size: 1.6rem;
}
}
@media (min-width: 768px){
.block_id .slideshow__title{
font-size: 1.8rem;
}
}
@media (min-width: 992px){
}
@media (min-width: 1200px){
.block_id .slideshow__title{
font-size: 2rem;
}
}

* Subheading

8.6 - Subheading text

8.7 - Font text subheading

8.8 - Css responsive subheading

  • Keywords start: .block_id

.block_id .slideshow__subtitle{
color: #fff;
font-size: 3rem;
line-height: 1.2;
letter-spacing: -.03em;
margin-bottom: 1.2rem;
}
@media (min-width: 576px){
.block_id .slideshow__subtitle{
font-size: 3.6rem;
margin-bottom: 1.3rem;
}
}
@media (min-width: 768px){
.block_id .slideshow__subtitle{
font-size: 4.2rem;
margin-bottom: 1.7rem;
}
}
@media (min-width: 992px){
}
@media (min-width: 1200px){
.block_id .slideshow__subtitle{
font-size: 5.2rem;
}
}

* Description

8.9 - Description text

8.10 - Font text description

8.11 - Css responsive description

Keywords start: .block_id

.block_id .slideshow__description{
color: #fff;
margin-bottom: 0;
clear: both;
font-size: 14px;
line-height: 24px;
}
@media (min-width: 576px){
}
@media (min-width: 768px){
.block_id .slideshow__description{
line-height: 36px;
font-size: 24px;
letter-spacing: 0.05em;
}
}
@media (min-width: 992px){
}
@media (min-width: 1200px){
}

* Alignment

8.12 - Text alignment mobile

Left
Center
Right

8.13 - Text alignment

Left
Center
Right

8.14 - Text alignment

* Button

8.15 - Style button

Default
White
White 2
White 3
Boder
Border gray
Boder Lightgray
Boder dark
Border darker
Border white
Border white 2
Border white 3
Border white 4
Simple button
Simple button dark
Underline button
Underline button dark

8.16 - Button Style Radius

Square
Rounded corners
Rounded

* Custom

** Item video

* Video Settings

Background video(URL from Files)

<source type="video/mp4" src="//cdn.shopify.com/s/files/1/1958/5719/files/video_slideshow.mp4?7643285812109313593"><source type="video/webm" src="//cdn.shopify.com/s/files/1/1958/5719/files/video_slideshow.webm?7643285812109313593">

** Item Banner

  • You can refer again in '6 - Banner settings'

  • Note: You have to choose Item image or item video first and then you choose item banner

If you dont have any item image or video so Item banner not show

8.19 - Image banner

  • Set link for clicking

8.21 - Text content

** Item banner type 4

8.22 - Image banner

  • Set link for clicking to banner

8.24 - Text content

From The4

Hope you success!!