Creating a Dynamic Sale Offer Text Slider in Shopify – Free & Without Any App - DevDesire - Free Shopify Sections & Features for Your Online Store

In this tutorial, I’ll show you how to create a special sale offer text slider in your Shopify store without using any external apps. This slider will display promotional offers with clickable links, and you can customize the colors and speed of the text slider animation. Best of all, this method is completely free and works across all Shopify themes.

Here’s the code snippet, and I’ll explain it section by section below:

{% assign _uniqnumber = section.id %}
<div class="{{_uniqnumber}}-slider-container">
    <div class="{{_uniqnumber}}-slider">
      {% if section.settings.text1 != blank %}
        <span><a href="{% if section.settings.url1 !=blank %}{{ section.settings.url1 }} {% else %} #{% endif %}">{{ section.settings.text1 }}</a> </span>
      {% endif %}
        
      {% if section.settings.text2 != blank %}
        <span><a href="{% if section.settings.url2 !=blank %}{{ section.settings.url2 }} {% else %} #{% endif %}">{{ section.settings.text2 }}</a> </span>
      {% endif %}
      
      {% if section.settings.text3 != blank %}
        <span><a href="{% if section.settings.url3 !=blank %}{{ section.settings.url3 }} {% else %} #{% endif %}">{{ section.settings.text3 }}</a> </span>
      {% endif %}
      
      {% if section.settings.text4 != blank %}
        <span><a href="{% if section.settings.url4 !=blank %}{{ section.settings.url4 }} {% else %} #{% endif %}">{{ section.settings.text4 }}</a> </span>
      {% endif %}
      
      {% if section.settings.text5 != blank %}
        <span><a href="{% if section.settings.url5 !=blank %}{{ section.settings.url5 }} {% else %} #{% endif %}">{{ section.settings.text5 }}</a> </span>
      {% endif %}
       
    </div>
</div>

{% if section.settings.color1 != blank %}
  {% assign color1 = section.settings.color1 %}
  {% else %}
  {% assign color1 = 'blue' %}
{% endif %}
{% if section.settings.color2 != blank %}
  {% assign color2 = section.settings.color2 %}
  {% else %}
  {% assign color2 = 'red' %}
{% endif %}

<style>
.{{_uniqnumber}}-slider-container {
    width: 100%;
    overflow: hidden;
    background: linear-gradient(to right, {{ color1 }}, {{color2}});
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.{{_uniqnumber}}-slider {
    display: flex;
    white-space: nowrap;
    animation: scroll linear infinite;
}

.{{_uniqnumber}}-slider span {
    font-size: 2.5em;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.{{_uniqnumber}}-slider span a {
    text-decoration: none;
    color: white;
}

@media (max-width: 768px) {
    .{{_uniqnumber}}-slider span {
        font-size: 20px;
    }
}

/* Keyframe for scrolling effect */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const slider = document.querySelector('.{{_uniqnumber}}-slider');
    const container = document.querySelector('.{{_uniqnumber}}-slider-container');
    
    // Clone the slider content to create an infinite effect
    const sliderContent = slider.innerHTML;
    slider.innerHTML += sliderContent;

    const totalWidth = slider.scrollWidth / 10; // Total width of the duplicated content
    const animationDuration = totalWidth / {{section.settings.speed}}; // Adjust speed (50px per second)

    slider.style.animationDuration = `${animationDuration}s`;

    // Pause the animation on hover
    container.addEventListener('mouseenter', () => {
        slider.style.animationPlayState = 'paused';
    });

    container.addEventListener('mouseleave', () => {
        slider.style.animationPlayState = 'running';
    });
});
</script>

{% schema %}
  {
    "name": "Sale Offer",
    "settings": [
      {
        "type": "range",
        "id": "speed",
        "label": "Text Speed",
        "min": 1,
        "max": 100,
        "default": 50,
        "unit": "Sec"
      },
      {
        "type": "text",
        "id": "text1",
        "label": "Offer 1",
        "default": "New Arrivals"
      },
      {
        "type": "url",
        "id": "url1",
        "label": "URL 1"
      },
      {
        "type": "text",
        "id": "text2",
        "label": "Offer 2",
        "default": "Hot Deals"
      },
      {
        "type": "url",
        "id": "url2",
        "label": "URL 2"
      },
      {
        "type": "text",
        "id": "text3",
        "label": "Offer 3",
        "default": "Limited Time Offer"
      },
      {
        "type": "url",
        "id": "url3",
        "label": "URL 3"
      },
      {
        "type": "text",
        "id": "text4",
        "label": "Offer 4",
        "default": "Special Discount"
      },
      {
        "type": "url",
        "id": "url4",
        "label": "URL 4"
      },
      {
        "type": "text",
        "id": "text5",
        "label": "Offer 5",
        "default": "Flash Sale"
      },
      {
        "type": "url",
        "id": "url5",
        "label": "URL 5"
      },
      {
        "type": "color",
        "id": "color1",
        "label": "Gradient Left Color"
      },
      {
        "type": "color",
        "id": "color2",
        "label": "Gradient Right Color"
      }
    ],
    "presets": [
      {
        "name": "Sale Offer"
      }
    ]
  }
{% endschema %}


Code Explanation:

Unique Section ID: The line {% assign _uniqnumber = section.id %} generates a unique identifier for each section using section.id. This allows the slider styles and script to be unique to each instance of the section, preventing conflicts.

Text Slider Content: The text slider is constructed using HTML within the <div class="{{_uniqnumber}}-slider">. The if statements check if the text settings (text1, text2, etc.) are not blank and display them inside a <span> element. Each text can be optionally linked to a URL provided by the admin.

Gradient Background: The background color of the slider is a gradient. The gradient colors are pulled from the Shopify theme settings (color1 and color2). If no colors are provided, the defaults are set to blue and red.

CSS Styles: The styles define the appearance of the slider, such as font size, white space, and animation behavior. The slider’s text continuously scrolls using a CSS keyframe animation named scroll.

JavaScript for Infinite Scrolling: The JavaScript listens for the DOM content to load and then duplicates the slider’s content to create an infinite scrolling effect. The speed of the scroll is determined by the width of the slider and the value from the speed setting.

Settings Schema: The {% schema %} section defines the settings for the slider in the Shopify theme editor. It includes:

Speed: A range input to control the scrolling speed of the text.
Text and URLs: Inputs for five offers with corresponding URLs.
Gradient Colors: Color pickers for customizing the left and right colors of the gradient background.

Post Views: 25

Creating a Dynamic Sale Offer Text Slider in Shopify – Free & Without Any App

Comments

Leave a Reply Cancel reply