Looking for a clean, lightweight brand logo slider—without paying for an app? Here’s a no‑bloat, copy‑paste solution that works in any modern Shopify theme. You’ll create a reusable section you can drop onto your home page or any template.
What You’ll Build
- A continuously scrolling (marquee‑style) logo slider
- No external libraries or apps
- Customizable speed, spacing, grayscale styling, and logo height
- Clickable logos with optional links
- Pauses on hover (optional)
Step 1: Create the Section File
- In your Shopify admin, go to Online Store → Themes.
- Click … → Edit code on your current theme.
- Under the Sections folder, click Add a new section.
- Name it exactly:
logo-slider.liquid.
If your theme uses JSON templates, this will appear in the section list and can be added through the Theme Editor.
Step 2: Paste This Code into sections/logo-slider.liquid
{% schema %}
{
"name": "Brand Logo Carousel",
"class": "brand-carousel-section",
"settings": [
{
"type": "header",
"content": "Layout"
},
{
"type": "checkbox",
"id": "full_width",
"label": "Full width",
"default": false
},
{
"type": "color",
"id": "background",
"label": "Background color",
"default": "#ffffff"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Top spacing",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Bottom spacing",
"default": 36
},
{
"type": "header",
"content": "Title"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Our Partners"
},
{
"type": "checkbox",
"id": "show_title",
"label": "Show heading",
"default": true
},
{
"type": "select",
"id": "title_align",
"label": "Alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "color",
"id": "title_color",
"label": "Color",
"default": "#000000"
},
{
"type": "range",
"id": "title_size",
"min": 12,
"max": 50,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 24
},
{
"type": "range",
"id": "title_margin",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Bottom spacing",
"default": 20
},
{
"type": "header",
"content": "Carousel"
},
{
"type": "range",
"id": "logo_height",
"min": 20,
"max": 200,
"step": 5,
"unit": "px",
"label": "Logo height",
"default": 40
},
{
"type": "range",
"id": "logo_max_width",
"min": 50,
"max": 300,
"step": 10,
"unit": "px",
"label": "Max logo width",
"default": 150
},
{
"type": "range",
"id": "speed",
"min": 1,
"max": 20,
"label": "Animation speed",
"default": 5,
"step": 1,
"info": "Higher is slower"
},
{
"type": "range",
"id": "spacing",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Logo spacing",
"default": 30
},
{
"type": "checkbox",
"id": "pause_hover",
"label": "Pause on hover",
"default": true
},
{
"type": "checkbox",
"id": "shadow",
"label": "Show shadow",
"default": false
},
{
"type": "checkbox",
"id": "grayscale",
"label": "Grayscale logos",
"default": false
},
{
"type": "checkbox",
"id": "color_hover",
"label": "Color on hover",
"default": true
},
{
"type": "header",
"content": "Mobile"
},
{
"type": "range",
"id": "logo_height_mobile",
"min": 20,
"max": 100,
"step": 5,
"unit": "px",
"label": "Logo height",
"default": 30
},
{
"type": "range",
"id": "spacing_mobile",
"min": 0,
"max": 50,
"step": 5,
"unit": "px",
"label": "Logo spacing",
"default": 15
}
],
"blocks": [
{
"type": "brand",
"name": "Brand Logo",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Logo image"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "text",
"id": "alt",
"label": "Alt text"
}
]
}
],
"presets": [
{
"name": "Brand Logo Carousel",
"category": "Image",
"blocks": [
{
"type": "brand"
},
{
"type": "brand"
},
{
"type": "brand"
},
{
"type": "brand"
},
{
"type": "brand"
}
]
}
]
}
{% endschema %}
{% style %}
.brand-carousel-section {
background-color: {{ section.settings.background }};
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
{% if section.settings.full_width %}
width: 100vw;
margin-left: calc(-50vw + 50%);
{% endif %}
}
.brand-carousel-title {
color: {{ section.settings.title_color }};
font-size: {{ section.settings.title_size }}px;
margin-bottom: {{ section.settings.title_margin }}px;
text-align: {{ section.settings.title_align }};
{% if section.settings.title_align == 'left' %}
padding-left: 16px;
{% elsif section.settings.title_align == 'right' %}
padding-right: 16px;
{% endif %}
}
.brand-carousel-container {
overflow: hidden;
position: relative;
}
.brand-carousel-track {
display: flex;
align-items: center;
will-change: transform;
}
.brand-carousel-item {
flex: 0 0 auto;
padding: 0 {{ section.settings.spacing | divided_by: 2 }}px;
height: {{ section.settings.logo_height }}px;
}
.brand-carousel-image {
height: {{ section.settings.logo_height }}px;
width: auto;
max-width: {{ section.settings.logo_max_width }}px;
object-fit: contain;
{% if section.settings.shadow %}
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
{% endif %}
{% if section.settings.grayscale %}
filter: grayscale(100%);
transition: filter 0.25s ease;
{% endif %}
}
{% if section.settings.grayscale and section.settings.color_hover %}
.brand-carousel-item:hover .brand-carousel-image {
filter: grayscale(0%);
}
{% endif %}
.brand-carousel-link {
display: inline-flex;
height: 100%;
align-items: center;
}
@media screen and (max-width: 749px) {
.brand-carousel-section {
padding-top: {{ section.settings.padding_top | divided_by: 2 }}px;
padding-bottom: {{ section.settings.padding_bottom | divided_by: 2 }}px;
}
.brand-carousel-title {
font-size: {{ section.settings.title_size | times: 0.8 }}px;
margin-bottom: {{ section.settings.title_margin | divided_by: 2 }}px;
}
.brand-carousel-item {
height: {{ section.settings.logo_height_mobile }}px;
padding: 0 {{ section.settings.spacing_mobile | divided_by: 2 }}px;
}
.brand-carousel-image {
height: {{ section.settings.logo_height_mobile }}px;
}
}
{% endstyle %}
<div class="brand-carousel-section" data-section-id="{{ section.id }}">
{%- if section.settings.show_title and section.settings.title != blank -%}
<h2 class="brand-carousel-title">{{ section.settings.title }}</h2>
{%- endif -%}
<div class="brand-carousel-container"
data-speed="{{ section.settings.speed }}"
data-pause-hover="{{ section.settings.pause_hover }}"
>
<div class="brand-carousel-track">
{%- for block in section.blocks -%}
<div class="brand-carousel-item" {{ block.shopify_attributes }}>
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}" class="brand-carousel-link">
{%- endif -%}
{%- if block.settings.image != blank -%}
<img
src="{{ block.settings.image | img_url: '300x' }}"
alt="{{ block.settings.alt | default: block.settings.image.alt | escape }}"
class="brand-carousel-image"
loading="lazy"
width="{{ block.settings.image.width }}"
height="{{ block.settings.image.height }}"
>
{%- else -%}
<div class="brand-carousel-image">
{{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
</div>
{%- endfor -%}
{%- comment -%} Duplicate items for seamless looping {%- endcomment -%}
{%- for block in section.blocks -%}
<div class="brand-carousel-item">
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}" class="brand-carousel-link">
{%- endif -%}
{%- if block.settings.image != blank -%}
<img
src="{{ block.settings.image | img_url: '300x' }}"
alt="{{ block.settings.alt | default: block.settings.image.alt | escape }}"
class="brand-carousel-image"
loading="lazy"
width="{{ block.settings.image.width }}"
height="{{ block.settings.image.height }}"
>
{%- else -%}
<div class="brand-carousel-image">
{{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
</div>
{%- endfor -%}
</div>
</div>
</div>
<script>
(function() {
class BrandCarousel {
constructor(element) {
this.element = element;
this.track = element.querySelector('.brand-carousel-track');
this.items = Array.from(this.track.children);
this.speed = parseFloat(element.dataset.speed) || 5;
this.pauseOnHover = element.dataset.pauseHover === 'true';
this.animationId = null;
this.direction = -1;
this.position = 0;
this.init();
}
init() {
// Calculate total width needed
const itemWidth = this.items[0].getBoundingClientRect().width;
const totalWidth = itemWidth * this.items.length;
this.track.style.width = `${totalWidth}px`;
// Start animation
this.startAnimation();
// Handle hover events
if (this.pauseOnHover) {
this.element.addEventListener('mouseenter', () => this.stopAnimation());
this.element.addEventListener('mouseleave', () => this.startAnimation());
}
// Handle visibility changes
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
this.startAnimation();
} else {
this.stopAnimation();
}
});
}, { threshold: 0.1 });
observer.observe(this.element);
// Handle window resize
window.addEventListener('resize', () => {
this.stopAnimation();
const newItemWidth = this.items[0].getBoundingClientRect().width;
const newTotalWidth = newItemWidth * this.items.length;
this.track.style.width = `${newTotalWidth}px`;
this.startAnimation();
});
}
animate(timestamp) {
if (!this.startTime) this.startTime = timestamp;
const elapsed = (timestamp - this.startTime) / 1000;
const progress = (elapsed / this.speed) % 1;
this.position = progress * (this.items[0].getBoundingClientRect().width * this.items.length / 2) * this.direction;
this.track.style.transform = `translateX(${this.position}px)`;
this.animationId = requestAnimationFrame((t) => this.animate(t));
}
startAnimation() {
if (!this.animationId) {
this.startTime = null;
this.animationId = requestAnimationFrame((t) => this.animate(t));
}
}
stopAnimation() {
if (this.animationId) {
cancelAnimationFrame(this.animationId);
this.animationId = null;
}
}
}
document.addEventListener('DOMContentLoaded', function() {
const carousels = document.querySelectorAll('.brand-carousel-container');
carousels.forEach(carousel => new BrandCarousel(carousel));
});
})();
</script>
Step 3: Add the Section in the Theme Editor
- Open Online Store → Themes → Customize.
- Choose the Home page (or any template where you want to show the slider).
- Click Add section → Brand logo slider.
- Add your logo blocks, set a link for each brand (optional), and tweak Speed, Gap, Logo height, and Grayscale.
Tip: Add at least 6–8 logos for a smooth continuous scroll.
FAQs
Will this slow down my store?
No external libraries are used. Images load responsively and lazily.
Can I show static grid instead of scrolling?
Set Scroll duration very high (e.g., 60s) or use your theme’s block visibility settings to achieve a calm, almost static effect.
How do I change the heading style?
Edit the .logo-slider__heading styles inside the <style> tag or move the CSS to your global stylesheet if you prefer.
If you need an help just contact me via contact form or the WhatsApp button.
