Hey everyone! Welcome back to another tutorial. In this tutorial, I’ll show you how to add a scrolling image slider to your Shopify store—no apps required! This is an updated method, and I’ll provide all the code you need to make it work seamlessly. Just copy and paste the code, and your Shopify store will have a stunning scrolling slider in no time. This feature is perfect for showcasing products, collections, or any visual content you want to highlight. I’ll guide you step-by-step through the process, so let’s jump right in and get started!
Step1:
Create a new section name scrolling-Images.liquid and paste the following code
{%- liquid
assign padding_horizontal = section.settings.padding_horizontal
assign padding_horizontal_mobile = section.settings.padding_horizontal_mobile
assign padding_top = section.settings.padding_top
assign padding_bottom = section.settings.padding_bottom
assign border_color = section.settings.border_color
assign border_thickness = section.settings.border_thickness
assign margin_top = section.settings.margin_top
assign margin_bottom = section.settings.margin_bottom
assign background_color = section.settings.background_color
assign background_gradient = section.settings.background_gradient
assign content_width = section.settings.content_width
assign full_width = section.settings.full_width
assign lazy = section.settings.lazy
assign heading = section.settings.heading
assign heading_size = section.settings.heading_size
assign heading_custom = section.settings.heading_custom
assign heading_color = section.settings.heading_color
assign heading_font = section.settings.heading_font
assign heading_height = section.settings.heading_height
assign heading_letter = section.settings.heading_letter
assign heading_mt = section.settings.heading_mt
assign heading_mb = section.settings.heading_mb
assign heading_align = section.settings.heading_align
assign image_height_desktop = section.settings.image_height_desktop
assign image_height_mobile = section.settings.image_height_mobile
assign image_radius = section.settings.image_radius
assign image_width_desktop = section.settings.image_width_desktop
assign image_width_mobile = section.settings.image_width_mobile
assign slider_speed = section.settings.slider_speed
assign slider_mt = section.settings.slider_mt
assign slider_direction = section.settings.slider_direction
assign pause_hover = section.settings.pause_hover
assign slider_gap_mobile = section.settings.slider_gap_mobile
assign slider_gap = section.settings.slider_gap
assign use_content = section.settings.use_content
assign use_shadow = section.settings.use_shadow
assign content_padding_vertical = section.settings.content_padding_vertical
assign content_padding_horizontal = section.settings.content_padding_horizontal
assign content_radius = section.settings.content_radius
assign content_distance = section.settings.content_distance
assign content_bg = section.settings.content_bg
assign content_max_width = section.settings.content_max_width
assign content_max_width_mobile = section.settings.content_max_width_mobile
assign content_position = section.settings.content_position
assign content_border_thickness = section.settings.content_border_thickness
assign content_border_color = section.settings.content_border_color
assign text = section.settings.text
assign text_custom = section.settings.text_custom
assign text_font = section.settings.text_font
assign text_size = section.settings.text_size
assign text_height = section.settings.text_height
assign text_color = section.settings.text_color
-%}
{%- style -%}
{{ heading_font | font_face: font_display: 'swap' }}
{{ text_font | font_face: font_display: 'swap' }}
.section-{{ section.id }} {
border-top: solid {{ border_color }} {{ border_thickness }}px;
border-bottom: solid {{ border_color }} {{ border_thickness }}px;
margin-top: {{ margin_top | times: 0.75 | round: 0 }}px;
margin-bottom: {{ margin_bottom | times: 0.75 | round: 0 }}px;
}
.section-{{ section.id }}-settings {
{% unless full_width %}
max-width: {{ content_width }}rem;
{% endunless %}
margin: 0 auto;
padding-top: {{ padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ padding_bottom | times: 0.75 | round: 0 }}px;
padding-left: {{ padding_horizontal_mobile }}rem;
padding-right: {{ padding_horizontal_mobile }}rem;
position: relative;
}
.scrolling-image-heading-{{ section.id }} > * {
margin: 0;
font-size: {{ heading_size | times: 0.85 }}px;
color: {{ heading_color }};
line-height: {{ heading_height }}%;
text-transform: unset;
text-align: {{ heading_align }};
}
.scrolling-image-slider-{{ section.id }} {
margin-top: {{ slider_mt | times: 0.75 | round: 0 }}px;
}
.scrolling-image-slide-{{ section.id }} {
height: {{ image_height_mobile }}px;
width: 100%;
flex: 0 0 {{ image_width_mobile }}px;
}
.scrolling-image-slide-{{ section.id }} img,
.scrolling-image-slide-{{ section.id }} svg {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: {{ image_radius }}px;
}
.scrolling-image-slide-{{ section.id }} svg {
background-color: #a0a0a0;
}
.scrolling-image-content-{{ section.id }} {
max-width: {{ content_max_width_mobile }}px;
margin-top: -{{ content_distance | times: 0.5 | round: 0 }}px;
padding: {{ content_padding_vertical | times: 0.75 | round: 0 }}px {{ content_padding_horizontal | times: 0.75 | round: 0 }}px;
border-radius: {{ content_radius }}px;
border: {{ content_border_thickness }}px solid {{ content_border_color }};
background-color: {{ content_bg }};
position: relative;
z-index: 3;
text-align: center;
{% if use_shadow %}
box-shadow: -3px 7px 9px -2px #a09c9c;
{% endif %}
}
.scrolling-image-content-{{ section.id }} p,
.scrolling-image-content-{{ section.id }} a,
.scrolling-image-content-{{ section.id }} li {
margin: 0px;
font-size: {{ text_size | times: 0.85 }}px;
line-height: {{ text_height }}%;
color: {{ text_color }};
}
.marquee-horizontal-{{ section.id }} {
position: relative;
z-index: 2;
display: inline-flex;
overflow: hidden;
width: 100%;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
html[dir="rtl"] .marquee-horizontal-{{ section.id }} {
flex-direction: row-reverse;
}
.track-horizontal-{{section.id}} {
padding-left: {{ slider_gap_mobile }}px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-shrink: 0;
width: calc(({{ image_width_mobile }}px * {{ section.blocks.size }}) + ({{ slider_gap_mobile }}px * {{ section.blocks.size }}));
gap: {{ slider_gap_mobile }}px;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
white-space: nowrap;
will-change: transform;
animation: marquee-horizontal-{{ slider_direction }} {{ slider_speed | times: 1000 | round: 0 }}ms linear infinite;
}
@keyframes marquee-horizontal-left {
0% {
transform: translateZ(0);
visibility: visible;
}
100% {
transform: translate3d(-100%,0,0);
}
}
@keyframes marquee-horizontal-right {
0% {
transform: translate3d(-100%,0,0);
visibility: visible;
}
100% {
transform: translateZ(0);
}
}
@media(min-width: 1024px) {
.section-{{ section.id }} {
margin-top: {{ margin_top }}px;
margin-bottom: {{ margin_bottom }}px;
}
.section-{{ section.id }}-settings {
padding: 0 5rem;
padding-top: {{ padding_top }}px;
padding-bottom: {{ padding_bottom }}px;
padding-left: {{ padding_horizontal }}rem;
padding-right: {{ padding_horizontal }}rem;
}
.scrolling-image-heading-{{ section.id }} > * {
font-size: {{ heading_size }}px;
}
.scrolling-image-slider-{{ section.id }} {
margin-top: {{ slider_mt }}px;
}
.scrolling-image-slide-{{ section.id }} {
height: {{ image_height_desktop }}px;
flex: 0 0 {{ image_width_desktop }}px;
}
.scrolling-image-content-{{ section.id }} {
max-width: {{ content_max_width }}px;
margin-top: -{{ content_distance }}px;
padding: {{ content_padding_vertical }}px {{ content_padding_horizontal }}px;
}
.scrolling-image-content-{{ section.id }} p,
.scrolling-image-content-{{ section.id }} a,
.scrolling-image-content-{{ section.id }} li {
font-size: {{ text_size }}px;
}
.track-horizontal-{{section.id}} {
padding-left: {{ slider_gap }}px;
width: calc(({{ image_width_desktop }}px * {{ section.blocks.size }}) + ({{ slider_gap }}px * {{ section.blocks.size }}));
gap: {{ slider_gap }}px;
}
{% if pause_hover %}
.marquee-horizontal-{{ section.id }}:hover .track-horizontal-{{section.id}} {
animation-play-state: paused
}
{% endif %}
}
{%- endstyle -%}
{% if heading_custom %}
<style>
.scrolling-image-heading-{{ section.id }} > * {
font-family: {{ heading_font.family }}, {{ heading_font.fallback_families }};
font-weight: {{ heading_font.weight }};
font-style: {{ heading_font.style }};
}
</style>
{% endif %}
{% if text_custom %}
<style>
.scrolling-image-content-{{ section.id }} p,
.scrolling-image-content-{{ section.id }} a,
.scrolling-image-content-{{ section.id }} li {
font-family: {{ text_font.family }}, {{ text_font.fallback_families }};
font-weight: {{ text_font.weight }};
font-style: {{ text_font.style }};
}
</style>
{% endif %}
{% if content_position == "center" %}
<style>
.scrolling-image-content-{{ section.id }} {
margin-left: auto;
margin-right: auto;
}
</style>
{% elsif content_position == "right" %}
<style>
.scrolling-image-content-{{ section.id }} {
margin-left: auto;
}
</style>
{% endif %}
<div class="section-{{ section.id }} scrolling-image-{{ section.id }}" style="background-color:{{ background_color }}; background-image: {{ background_gradient }};">
<div class="section-{{ section.id }}-settings scrolling-image-body-{{ section.id }}">
{% if heading != blank %}
<div class="scrolling-image-heading-{{ section.id }}">
{{ heading }}
</div>
{% endif %}
<div class="scrolling-image-slider-{{ section.id }}">
<div class="marquee-horizontal-{{ section.id }}">
<div class="track-horizontal-{{section.id}}">
{% for block in section.blocks %}
<{% if block.settings.url != blank %}a href="{{ block.settings.url }}"{% else %}div{% endif %} class="scrolling-image-slide-{{ section.id }}">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.image.alt }}" {% if lazy %}loading="lazy"{% endif %}>
{% else %}
{{ 'image' | placeholder_svg_tag }}
{% endif %}
</{% if block.settings.url != blank %}a{% else %}div{% endif %}>
{% endfor %}
</div>
<div class="track-horizontal-{{section.id}}">
{% for block in section.blocks %}
<{% if block.settings.url != blank %}a href="{{ block.settings.url }}"{% else %}div{% endif %} class="scrolling-image-slide-{{ section.id }}">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.image.alt }}" {% if lazy %}loading="lazy"{% endif %}>
{% else %}
{{ 'image' | placeholder_svg_tag }}
{% endif %}
</{% if block.settings.url != blank %}a{% else %}div{% endif %}>
{% endfor %}
</div>
<div class="track-horizontal-{{section.id}}">
{% for block in section.blocks %}
<{% if block.settings.url != blank %}a href="{{ block.settings.url }}"{% else %}div{% endif %} class="scrolling-image-slide-{{ section.id }}">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.image.alt }}" {% if lazy %}loading="lazy"{% endif %}>
{% else %}
{{ 'image' | placeholder_svg_tag }}
{% endif %}
</{% if block.settings.url != blank %}a{% else %}div{% endif %}>
{% endfor %}
</div>
<div class="track-horizontal-{{section.id}}">
{% for block in section.blocks %}
<{% if block.settings.url != blank %}a href="{{ block.settings.url }}"{% else %}div{% endif %} class="scrolling-image-slide-{{ section.id }}">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.image.alt }}" {% if lazy %}loading="lazy"{% endif %}>
{% else %}
{{ 'image' | placeholder_svg_tag }}
{% endif %}
</{% if block.settings.url != blank %}a{% else %}div{% endif %}>
{% endfor %}
</div>
</div>
</div>
{% if use_content %}
<div class="scrolling-image-content-{{ section.id }}">
{{ text }}
</div>
{% endif %}
</div>
</div>
{% schema %}
{
"name": "Scrolling Images",
"settings": [
{
"type": "header",
"content": "Heading"
},
{
"type": "richtext",
"id": "heading",
"label": "Heading",
"default": "<h2>Heading</h2>"
},
{
"type": "checkbox",
"id": "heading_custom",
"label": "Use Custom Font",
"default": false
},
{
"type": "font_picker",
"id": "heading_font",
"label": "Heading Font Family",
"default": "josefin_sans_n4"
},
{
"type": "range",
"id": "heading_size",
"min": 0,
"max": 72,
"step": 2,
"unit": "px",
"label": "Heading Size",
"default": 40
},
{
"type": "range",
"id": "heading_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Heading Line Height",
"default": 130
},
{
"type": "select",
"id": "heading_align",
"label": "Heading Text Align",
"default": "center",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "Right",
"value": "right"
}
]
},
{
"type": "header",
"content": "Slider Settings"
},
{
"type": "range",
"id": "slider_speed",
"min": 1,
"max": 40,
"step": 1,
"label": "Slider Speed",
"info": "⚡ <----------------> 🐌",
"default": 13
},
{
"type": "range",
"id": "slider_gap",
"min": 10,
"max": 100,
"step": 2,
"unit": "px",
"label": "Slider Items Gap",
"default": 10
},
{
"type": "range",
"id": "slider_gap_mobile",
"min": 10,
"max": 100,
"step": 2,
"unit": "px",
"label": "Slider Items Gap - Mobile",
"default": 10
},
{
"type": "range",
"id": "slider_mt",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Slider Margin Top",
"default": 50
},
{
"type": "select",
"id": "slider_direction",
"label": "Slider Direction",
"default": "left",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Right",
"value": "right"
}
]
},
{
"type": "checkbox",
"id":"pause_hover",
"label": "Pause on Hover",
"default": false
},
{
"type": "header",
"content": "Image Settings"
},
{
"type": "range",
"id": "image_width_desktop",
"min": 100,
"max": 800,
"step": 10,
"unit": "px",
"label": "Image Width Desktop",
"default": 300
},
{
"type": "range",
"id": "image_width_mobile",
"min": 100,
"max": 800,
"step": 10,
"unit": "px",
"label": "Image Width Mobile",
"default": 120
},
{
"type": "range",
"id": "image_height_desktop",
"min": 100,
"max": 600,
"step": 10,
"unit": "px",
"label": "Image Height Desktop",
"default": 400
},
{
"type": "range",
"id": "image_height_mobile",
"min": 50,
"max": 600,
"step": 10,
"unit": "px",
"label": "Image Height Mobile",
"default": 200
},
{
"type": "range",
"id": "image_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Image Border Radius",
"default": 10
},
{
"type": "header",
"content": "Content Settings"
},
{
"type": "checkbox",
"id": "use_content",
"label": "Use Content",
"default": true
},
{
"type": "select",
"id": "content_position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center",
"label": "Content Position"
},
{
"type": "range",
"id": "content_max_width",
"min": 50,
"max": 800,
"step": 10,
"unit": "px",
"label": "Content Width",
"default": 340
},
{
"type": "range",
"id": "content_max_width_mobile",
"min": 50,
"max": 800,
"step": 10,
"unit": "px",
"label": "Content Width - Mobile",
"default": 340
},
{
"type": "range",
"id": "content_padding_vertical",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Content Padding Vertical",
"default": 30
},
{
"type": "range",
"id": "content_padding_horizontal",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Content Padding Horizontal",
"default": 30
},
{
"type": "range",
"id": "content_distance",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Content Distance From Bottom",
"default": 60
},
{
"type": "range",
"id": "content_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Content Border Radius",
"default": 10
},
{
"type": "range",
"id": "content_border_thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Content Border Thickness",
"default": 0
},
{
"type": "checkbox",
"id": "use_shadow",
"label": "Use Shadow Content",
"default": true
},
{
"type": "header",
"content": "Text Settings"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>+29.000 people love our product</p>"
},
{
"type": "checkbox",
"id": "text_custom",
"label": "Use Custom Font",
"default": false
},
{
"type": "font_picker",
"id": "text_font",
"label": "Text Font Family",
"default": "assistant_n4"
},
{
"type": "range",
"id": "text_size",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Text Size",
"default": 24
},
{
"type": "range",
"id": "text_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Text Line Height",
"default": 130
},
{
"type": "header",
"content": "Section Colors"
},
{
"type": "color",
"label": "Heading",
"id": "heading_color",
"default": "#000000"
},
{
"type": "color",
"label": "Content Background",
"id": "content_bg",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Content Border",
"id": "content_border_color",
"default": "#000000"
},
{
"type": "color",
"id": "text_color",
"label":"Text Color",
"default": "#000000"
},
{
"type": "color",
"label": "Section background",
"id": "background_color",
"default": "#FFFFFF"
},
{
"type": "color_background",
"id": "background_gradient",
"label": "Section background gradient"
},
{
"type": "color",
"label": "Border",
"id": "border_color",
"default": "#000000"
},
{
"type": "header",
"content": "Section margin (outside)"
},
{
"type": "range",
"id": "margin_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Margin top",
"default": 0
},
{
"type": "range",
"id": "margin_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Margin bottom",
"default": 0
},
{
"type": "header",
"content": "Section padding (inside)"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding bottom",
"default": 36
},
{
"type": "range",
"id": "padding_horizontal",
"min": 0,
"max": 30,
"step": 1,
"unit": "rem",
"label": "Padding sides",
"default": 0
},
{
"type": "range",
"id": "padding_horizontal_mobile",
"min": 0,
"max": 15,
"step": 0.5,
"unit": "rem",
"label": "Padding sides mobile",
"default": 0
},
{
"type": "header",
"content": "Section Settings"
},
{
"type": "checkbox",
"id": "full_width",
"label": "Full Width",
"default": true
},
{
"type": "range",
"id": "content_width",
"min": 0,
"max": 400,
"step": 10,
"unit": "rem",
"label": "Section content width",
"default": 120
},
{
"type": "range",
"id": "border_thickness",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 0
},
{
"type": "checkbox",
"id": "lazy",
"label": "Lazy load",
"info": "Lazy load images below fold for speed optimisation",
"default": true
}
],
"blocks": [
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "url",
"label": "URL for Image",
"info": "Optional"
}
]
}
],
"presets": [
{
"name": "Scrolling Images",
"blocks": [
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}
