Boost your Shopify store’s credibility and visual appeal by adding a scrolling logos slider section—without relying on paid apps! This simple yet effective feature showcases your brand partners, clients, or payment methods in an eye-catching way, enhancing trust and professionalism.
✨ Benefits of Adding a Scrolling Logos Slider
✅ Enhances Trust & Social Proof – Displaying well-known logos builds credibility.
✅ Improves Aesthetics – A smooth auto-scrolling animation makes your store look modern.
✅ No Extra Costs – Avoid monthly app fees by using custom code.
✅ Lightweight & Fast – No bloated apps slowing down your site.
📹 Video Tutorial Guide
Follow along with our step-by-step video to implement this feature easily:
- Access Shopify Theme Code – Navigate to Themes > Actions > Edit Code.
- Add New Section File – Create a new section (e.g.,
logo-slider.liquid). - Insert HTML & CSS – Copy the provided code snippet (below).
- Customize Logos & Speed – Adjust settings to fit your brand.
- Save & Publish – See the slider in action!
🛠️ Free Code Snippet
{% schema %}
{
"name": "JS Logo Slider",
"class": "js-logo-slider-section",
"settings": [
{
"type": "header",
"content": "Section Settings"
},
{
"type": "checkbox",
"id": "full_width",
"label": "Full width section",
"default": false
},
{
"type": "color",
"id": "bg_color",
"label": "Background color",
"default": "#ffffff"
},
{
"type": "range",
"id": "section_padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Top padding",
"default": 36
},
{
"type": "range",
"id": "section_padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Bottom padding",
"default": 36
},
{
"type": "header",
"content": "Heading Settings"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Trusted By"
},
{
"type": "checkbox",
"id": "show_heading",
"label": "Show heading",
"default": true
},
{
"type": "select",
"id": "heading_position",
"label": "Heading position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading color",
"default": "#000000"
},
{
"type": "range",
"id": "heading_size",
"min": 12,
"max": 50,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 24
},
{
"type": "range",
"id": "heading_margin_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Heading bottom margin",
"default": 20
},
{
"type": "header",
"content": "Slider Settings"
},
{
"type": "range",
"id": "logo_height",
"min": 20,
"max": 200,
"step": 5,
"unit": "px",
"label": "Logo height",
"default": 40
},
{
"type": "range",
"id": "logo_width",
"min": 50,
"max": 300,
"step": 10,
"unit": "px",
"label": "Max logo width",
"default": 150
},
{
"type": "range",
"id": "speed",
"min": 1,
"max": 20,
"label": "Slider speed",
"default": 5,
"step": 1,
"info": "Higher number = slower speed"
},
{
"type": "range",
"id": "gap_between_logos",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Space between logos",
"default": 30
},
{
"type": "checkbox",
"id": "pause_on_hover",
"label": "Pause on hover",
"default": true
},
{
"type": "checkbox",
"id": "show_shadow",
"label": "Show logo shadow",
"default": false
},
{
"type": "checkbox",
"id": "grayscale",
"label": "Grayscale logos",
"default": false
},
{
"type": "checkbox",
"id": "grayscale_hover_color",
"label": "Color on hover",
"default": true
},
{
"type": "checkbox",
"id": "rtl_support",
"label": "Enable RTL support",
"default": false,
"info": "Right-to-left language support"
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "range",
"id": "logo_height_mobile",
"min": 20,
"max": 100,
"step": 5,
"unit": "px",
"label": "Logo height (mobile)",
"default": 30
},
{
"type": "range",
"id": "gap_between_logos_mobile",
"min": 0,
"max": 50,
"step": 5,
"unit": "px",
"label": "Space between logos (mobile)",
"default": 15
}
],
"blocks": [
{
"type": "logo",
"name": "Logo",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "link",
"label": "Link (optional)"
},
{
"type": "text",
"id": "alt_text",
"label": "Alt text"
},
{
"type": "color",
"id": "hover_color",
"label": "Custom hover color"
}
]
}
],
"presets": [
{
"name": "JS Logo Slider",
"category": "Image",
"blocks": [
{
"type": "logo"
},
{
"type": "logo"
},
{
"type": "logo"
},
{
"type": "logo"
},
{
"type": "logo"
}
]
}
]
}
{% endschema %}
{% style %}
.js-logo-slider-section {
background-color: {{ section.settings.bg_color }};
padding-top: {{ section.settings.section_padding_top }}px;
padding-bottom: {{ section.settings.section_padding_bottom }}px;
{% if section.settings.full_width %}
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
{% endif %}
}
.js-logo-slider-heading {
color: {{ section.settings.heading_color }};
font-size: {{ section.settings.heading_size }}px;
margin-bottom: {{ section.settings.heading_margin_bottom }}px;
text-align: {{ section.settings.heading_position }};
{% if section.settings.heading_position == 'left' %}
padding-left: 15px;
{% elsif section.settings.heading_position == 'right' %}
padding-right: 15px;
{% endif %}
}
.js-logo-slider {
overflow: hidden;
position: relative;
width: 100%;
}
.js-logo-slider-track {
display: flex;
width: max-content;
will-change: transform;
}
.js-logo-slide {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin: 0 {{ section.settings.gap_between_logos }}px;
height: {{ section.settings.logo_height }}px;
max-width: {{ section.settings.logo_width }}px;
}
.js-logo-slide img {
height: {{ section.settings.logo_height }}px;
width: auto;
max-width: {{ section.settings.logo_width }}px;
object-fit: contain;
{% if section.settings.show_shadow %}
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
{% endif %}
{% if section.settings.grayscale %}
filter: grayscale(100%);
transition: filter 0.3s ease;
{% endif %}
}
{% if section.settings.grayscale and section.settings.grayscale_hover_color %}
.js-logo-slide:hover img {
filter: grayscale(0%);
}
{% endif %}
.js-logo-slide a {
display: inline-block;
height: 100%;
}
/* Mobile styles */
@media screen and (max-width: 749px) {
.js-logo-slider-section {
padding-top: {{ section.settings.section_padding_top | divided_by: 2 }}px;
padding-bottom: {{ section.settings.section_padding_bottom | divided_by: 2 }}px;
}
.js-logo-slider-heading {
font-size: {{ section.settings.heading_size | times: 0.8 }}px;
margin-bottom: {{ section.settings.heading_margin_bottom | divided_by: 2 }}px;
}
.js-logo-slide {
height: {{ section.settings.logo_height_mobile }}px;
margin: 0 {{ section.settings.gap_between_logos_mobile }}px;
}
.js-logo-slide img {
height: {{ section.settings.logo_height_mobile }}px;
}
}
{% endstyle %}
<div class="js-logo-slider-section" data-section-id="{{ section.id }}">
{%- if section.settings.show_heading and section.settings.heading != blank -%}
<h2 class="js-logo-slider-heading">{{ section.settings.heading }}</h2>
{%- endif -%}
<div
class="js-logo-slider"
data-speed="{{ section.settings.speed }}"
data-pause-on-hover="{{ section.settings.pause_on_hover }}"
data-rtl="{{ section.settings.rtl_support }}"
>
<div class="js-logo-slider-track">
{%- for block in section.blocks -%}
<div
class="js-logo-slide"
{{ block.shopify_attributes }}
{% if section.settings.grayscale
and section.settings.grayscale_hover_color
and block.settings.hover_color != blank
%}
style="--hover-color: {{ block.settings.hover_color }}"
{% endif %}
>
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}">
{%- endif -%}
{%- if block.settings.image != blank -%}
<img
src="{{ block.settings.image | img_url: '300x' }}"
alt="{{ block.settings.alt_text | default: block.settings.image.alt | escape }}"
loading="lazy"
width="{{ block.settings.image.width }}"
height="{{ block.settings.image.height }}"
>
{%- else -%}
{{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
</div>
{%- endfor -%}
{% comment %} Duplicate logos for seamless looping {% endcomment %}
{%- for block in section.blocks -%}
<div
class="js-logo-slide"
{% if section.settings.grayscale
and section.settings.grayscale_hover_color
and block.settings.hover_color != blank
%}
style="--hover-color: {{ block.settings.hover_color }}"
{% endif %}
>
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}">
{%- endif -%}
{%- if block.settings.image != blank -%}
<img
src="{{ block.settings.image | img_url: '300x' }}"
alt="{{ block.settings.alt_text | default: block.settings.image.alt | escape }}"
loading="lazy"
width="{{ block.settings.image.width }}"
height="{{ block.settings.image.height }}"
>
{%- else -%}
{{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
</div>
{%- endfor -%}
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const logoSliders = document.querySelectorAll('.js-logo-slider');
logoSliders.forEach(slider => {
const track = slider.querySelector('.js-logo-slider-track');
const slides = Array.from(track.children);
const speed = parseFloat(slider.dataset.speed) || 5;
const pauseOnHover = slider.dataset.pauseOnHover === 'true';
const isRTL = slider.dataset.rtl === 'true';
// Calculate total width needed
const slideWidth = slides[0].getBoundingClientRect().width;
const totalWidth = slideWidth * slides.length;
track.style.width = `${totalWidth}px`;
// Clone slides for infinite effect
slides.forEach(slide => {
const clone = slide.cloneNode(true);
track.appendChild(clone);
});
let animation;
let startTime = null;
let direction = isRTL ? 1 : -1;
let position = 0;
const distance = slideWidth * slides.length / 2;
function animate(currentTime) {
if (!startTime) startTime = currentTime;
const elapsedTime = (currentTime - startTime) / 1000; // in seconds
const progress = (elapsedTime / speed) % 1;
position = progress * distance * direction;
track.style.transform = `translateX(${position}px)`;
animation = requestAnimationFrame(animate);
}
function startAnimation() {
if (!animation) {
animation = requestAnimationFrame(animate);
}
}
function stopAnimation() {
if (animation) {
cancelAnimationFrame(animation);
animation = null;
}
}
// Handle hover events
if (pauseOnHover) {
slider.addEventListener('mouseenter', stopAnimation);
slider.addEventListener('mouseleave', startAnimation);
}
// Handle visibility changes
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
startAnimation();
} else {
stopAnimation();
}
});
}, { threshold: 0.1 });
observer.observe(slider);
// Start animation initially
startAnimation();
// Handle resize events
let resizeTimeout;
window.addEventListener('resize', () => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
stopAnimation();
const newSlideWidth = slides[0].getBoundingClientRect().width;
const newTotalWidth = newSlideWidth * slides.length;
track.style.width = `${newTotalWidth}px`;
startAnimation();
}, 100);
});
});
});
</script>
🚀 Pro Tips
- Optimize Logo Sizes – Use compressed PNG/SVG for fast loading.
- Adjust Speed – Change the
animation-durationin CSS. - Make It Clickable – Wrap logos in
<a href="#">for links.
By following this guide, you’ll add a sleek, professional logo slider to your Shopify store—without extra costs or slowdowns! 🎉