How To Add Before And After Slider To Shopify?

Showcase your product’s transformative results with this engaging before-and-after slider. Customers can drag the slider handle to compare two images, creating an interactive experience that highlights improvements, transformations, or product benefits.

Why Use This Slider?

Visually Persuasive: Perfect for beauty, fitness, home improvement, or any product with visible results.
Easy to Customize: Upload your before/after images, adjust styling, and add optional text.
Mobile-Optimized: Works seamlessly on all devices for maximum engagement.
No Coding Needed: Simple Shopify settings with no technical skills required.

Ideal for before/after comparisons, product effectiveness proofs, and customer success stories. Increase trust and conversions with a dynamic visual demo! 🚀

Need help implementing this? Contact a Shopify developer for professional customization and integration services to make it work perfectly for your store.

Shopify Schema Code

				
					{% schema %}
{
  "name": "Before / After Slider",
  "settings": [
    {
      "type": "header",
      "content": "Slider Settings"
    },
    {
      "type": "text",
      "id": "banner_title",
      "label": "Banner Title",
      "default": "Clinically Proven Hair Growth"
    },
    {
      "type": "image_picker",
      "id": "bf_image",
      "label": "Before Image",
      "info": "Recommended size: 1200x800px"
    },
    {
      "type": "image_picker",
      "id": "af_image",
      "label": "After Image",
      "info": "Should match dimensions of Before Image"
    },
    {
      "type": "checkbox",
      "id": "show_badge",
      "label": "Show Badges",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "grayscale_before",
      "label": "Grayscale for Before Image",
      "default": false
    },
    {
      "type": "header",
      "content": "Content Settings"
    },
    {
      "type": "checkbox",
      "id": "show_content",
      "label": "Show Content",
      "default": false
    },
    {
      "type": "text",
      "id": "ba_heading",
      "label": "Heading",
      "default": "Transformation Results"
    },
    {
      "type": "richtext",
      "id": "ba_content",
      "label": "Content",
      "default": "<p>See the amazing results our customers have achieved with our product.</p>"
    }
  ],
  "presets": [
    {
      "name": "Before / After Slider",
      "category": "Image"
    }
  ]
}
{% endschema %}

Shopify Liquid Code

				
					{% assign unique_id = 'custom_ba_slider_' | append: section.id %}

<div class="page-width container">
  <main class="custom_ba_main {{ unique_id }}">
    {% if section.settings.banner_title != blank %}
      <h2 class="banner-title">{{ section.settings.banner_title }}</h2>
    {% endif %}
  
    <div class="custom_ba_container custom_before_after">     
      <div class="custom_image_container">    
        <div class="custom_before_img">
          {% if section.settings.bf_image != blank %}
            <img decoding="async"
              class="custom_image_before custom_slider_image"
              src="{{ section.settings.bf_image | image_url: width: 1200 }}"
              alt="{{ section.settings.bf_image.alt | escape }}"
              width="{{ section.settings.bf_image.width }}"
              height="{{ section.settings.bf_image.height }}"
              loading="lazy"
            >
          {% else %}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
          <span
            class="custom_before_badge custom_ba_badge"
            style="{% unless section.settings.show_badge %}display: none;{% endunless %}"
            >Before</span
          >
        </div>
        <div class="custom_after_img">
          {% if section.settings.af_image != blank %}
            <img decoding="async"
              class="custom_image_after custom_slider_image"
              src="{{ section.settings.af_image | image_url: width: 1200 }}"
              alt="{{ section.settings.af_image.alt | escape }}"
              width="{{ section.settings.af_image.width }}"
              height="{{ section.settings.af_image.height }}"
              loading="lazy"
            >
          {% else %}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
          <span class="custom_after_badge custom_ba_badge" style="{% unless section.settings.show_badge %}display: none;{% endunless %}"
            >After</span
          >
        </div>
      </div>
      <input
        type="range"
        min="0"
        max="100"
        value="50"
        aria-label="Percentage of before photo shown"
        class="custom_ba_slider"
      >
      <div class="custom_slider_line" aria-hidden="true"></div>
      <div class="custom_slider_button" aria-hidden="true">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="30"
          height="30"
          fill="currentColor"
          viewBox="0 0 256 256"
        >
          <rect width="256" height="256" fill="none"></rect>
          <line
            x1="128"
            y1="40"
            x2="128"
            y2="216"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          ></line>
          <line
            x1="96"
            y1="128"
            x2="16"
            y2="128"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          ></line>
          <polyline class="custom_before_arrow"
            points="48 160 16 128 48 96"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          ></polyline>
          <line
            x1="160"
            y1="128"
            x2="240"
            y2="128"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          ></line>
          <polyline class="custom_after_arrow"
            points="208 96 240 128 208 160"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          ></polyline>
        </svg>
      </div>
    </div>
    
    {% if section.settings.show_content %}
      <div class="custom_ba_container custom_before_after_content">
        {% if section.settings.ba_heading != blank %}
          <div class="custom_before_after_heading">
            <h3>{{ section.settings.ba_heading }}</h3>
          </div>
        {% endif %}
        {% if section.settings.ba_content != blank %}
          <div class="custom_before_after_paragraph">
            {{ section.settings.ba_content }}
          </div>
        {% endif %}
      </div>
    {% endif %}
  </main>
</div>

CSS Code

				
					<style>
  .custom_ba_main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 0 1rem;
    max-width: 1325px;
    width: 100%;
    margin: 0 auto;
  }

  .banner-title {
    text-align: center;
    width: 100%;
  }

  .custom_ba_container {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    --position: 50%;
  }

  .custom_image_container {
    display: flex;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: {{ section.settings.bf_image.aspect_ratio | default: 1 }};
  }

  .custom_before_img,
  .custom_after_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .custom_before_img {
    width: var(--position);
    z-index: 2;
  }

  .custom_slider_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .custom_image_before {
    {% if section.settings.grayscale_before %}filter: grayscale(100%);{% endif %}
  }

  .custom_before_badge,
  .custom_after_badge {
    position: absolute;
    bottom: 15px;
    background: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    color: #000;
    z-index: 3;
    font-weight: bold;
  }

  .custom_before_badge {
    left: 15px;
  }

  .custom_after_badge {
    right: 15px;
  }

  .custom_ba_slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 4;
  }

  .custom_slider_line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--position);
    width: 2px;
    background-color: #fff;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
  }

  .custom_slider_button {
    position: absolute;
    top: 50%;
    left: var(--position);
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #000;
    padding: 8px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    z-index: 3;
    pointer-events: none;
  }

  .custom_slider_button svg {
    display: block;
  }

  .custom_before_after_content {
    text-align: center;
    padding: 20px 0;
  }

  @media (max-width: 768px) {
    .custom_ba_main {
      padding: 0 15px;
    }
    
    .custom_before_badge,
    .custom_after_badge {
      font-size: 12px;
      padding: 3px 6px;
    }
  }
</style>

Java Script Code

				
					<script>
document.addEventListener('DOMContentLoaded', function() {
  const sliders = document.querySelectorAll('.custom_before_after');
  
  sliders.forEach(slider => {
    const sliderInput = slider.querySelector('.custom_ba_slider');
    
    sliderInput.addEventListener('input', function(e) {
      slider.style.setProperty('--position', `${e.target.value}%`);
    });
    
    // Initialize position
    slider.style.setProperty('--position', '50%');
  });
});
</script>

Key Features:

Interactive Slider: Users can drag to compare before/after images.
Customizable: Add titles, badges (“Before”/”After”), and toggle grayscale for the “Before” image.
Responsive: Works on mobile and desktop with proper image scaling.
Optional Content: Add headings and descriptive text below the slider.
Styling: Clean design with a draggable handle and smooth transitions.

Author
Recent Posts

Shahrukh Miya

With 7+ years of experience in Shopify development, eCommerce solutions, and SEO, I have successfully delivered 100+ high-performing Shopify stores that drive conversions and enhance user experience.

Why Use This Slider?

Shopify Schema Code

Shopify Liquid Code

CSS Code

Java Script Code

Key Features:

Leave a Reply Cancel reply

OPTIMIZE YOUR MARKETING

Find Out Your Website's Ranking On Google

Services

Support

Quick Link

Contact