before-after-slider.liquid.<\/strong><\/p>\n\n\n\nCopy and paste the entire code below into the new file.<\/p>\n\n\n\n
{{ 'before-after.css' | asset_url | stylesheet_tag }}\n{{ 'before-after.js' | asset_url | script_tag }}\n\n<div class=\"before-after-slider-section\">\n <div class=\"before-after-container\">\n {% if section.settings.heading != blank %}\n <h2 class=\"section-heading\">{{ section.settings.heading }}<\/h2>\n {% endif %}\n {% if section.settings.description != blank %}\n <p class=\"section-description\">{{ section.settings.description }}<\/p>\n {% endif %}\n\n <div class=\"before-after-wrapper\">\n <div class=\"before-after-slider\">\n <div class=\"before-image-container\">\n {% if section.settings.before_image != blank %}\n <img src=\"{{ section.settings.before_image | img_url: '1000x' }}\" alt=\"Before\" class=\"before-image\">\n {% else %}\n {{ 'image' | placeholder_svg_tag: 'placeholder-image' }}\n {% endif %}\n <div class=\"before-label\">{{ section.settings.before_label }}<\/div>\n <\/div>\n <div class=\"after-image-container\">\n {% if section.settings.after_image != blank %}\n <img src=\"{{ section.settings.after_image | img_url: '1000x' }}\" alt=\"After\" class=\"after-image\">\n {% else %}\n {{ 'image' | placeholder_svg_tag: 'placeholder-image' }}\n {% endif %}\n <div class=\"after-label\">{{ section.settings.after_label }}<\/div>\n <\/div>\n <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" class=\"slider-range\">\n <div class=\"slider-handle\"><\/div>\n <\/div>\n <\/div>\n \n {% if section.settings.show_button and section.settings.button_text != blank and section.settings.button_link != blank %}\n <a href=\"{{ section.settings.button_link }}\" class=\"shop-now-button\">{{ section.settings.button_text }}<\/a>\n {% endif %}\n <\/div>\n<\/div>\n\n{% schema %}\n{\n \"name\": \"Before & After Slider\",\n \"settings\": [\n {\n \"type\": \"text\",\n \"id\": \"heading\",\n \"label\": \"Heading\",\n \"default\": \"Before \/ After\"\n },\n {\n \"type\": \"richtext\",\n \"id\": \"description\",\n \"label\": \"Description\",\n \"default\": \"<p>Showcase your product benefit by using before\/after image comparison.<\/p>\"\n },\n {\n \"type\": \"image_picker\",\n \"id\": \"before_image\",\n \"label\": \"Before Image\"\n },\n {\n \"type\": \"text\",\n \"id\": \"before_label\",\n \"label\": \"Before Label\",\n \"default\": \"Before\"\n },\n {\n \"type\": \"image_picker\",\n \"id\": \"after_image\",\n \"label\": \"After Image\"\n },\n {\n \"type\": \"text\",\n \"id\": \"after_label\",\n \"label\": \"After Label\",\n \"default\": \"After\"\n },\n {\n \"type\": \"checkbox\",\n \"id\": \"show_button\",\n \"label\": \"Show 'Shop now' button\",\n \"default\": true\n },\n {\n \"type\": \"text\",\n \"id\": \"button_text\",\n \"label\": \"Button text\",\n \"default\": \"Shop now\"\n },\n {\n \"type\": \"url\",\n \"id\": \"button_link\",\n \"label\": \"Button link\"\n }\n ],\n \"presets\": [\n {\n \"name\": \"Before & After Slider\"\n }\n ]\n}\n{% endschema %}\n<\/pre>\n\n\n\nStep 2: Create the CSS File<\/h3>\n\n\n\n This file handles all the styling. In your theme code editor, go to the Assets<\/strong> directory, add a new asset, and name the file before-after.css<\/strong>.<\/p>\n\n\n\nCopy and paste the entire CSS code below into the newly created file.<\/p>\n\n\n\n
.before-after-slider-section {\n padding: 40px 0;\n}\n\n.before-after-container {\n max-width: 1000px;\n margin: 0 auto;\n padding: 0 20px;\n text-align: center;\n}\n\n.section-heading {\n font-size: 2.5rem;\n font-weight: bold;\n margin-bottom: 10px;\n}\n\n.section-description {\n font-size: 1rem;\n color: #555;\n margin-bottom: 30px;\n}\n\n.before-after-wrapper {\n position: relative;\n width: 100%;\n border-radius: 8px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n overflow: hidden; \/* Ensures the images stay within the container *\/\n}\n\n.before-after-slider {\n position: relative;\n width: 100%;\n padding-bottom: 60%; \/* This creates a responsive 16:10 aspect ratio *\/\n overflow: hidden;\n cursor: ew-resize; \/* Cursor shows it's a slider *\/\n}\n\n.before-image-container,\n.after-image-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.after-image-container {\n width: 50%; \/* Initial width for the after image *\/\n}\n\n.before-image,\n.after-image {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.slider-handle {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 40px;\n height: 40px;\n background-color: #fff;\n border-radius: 50%;\n border: 2px solid #ccc;\n z-index: 10;\n pointer-events: none; \/* Prevents the handle from interfering with the range input *\/\n}\n\n.slider-handle::before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n height: 100%;\n width: 2px;\n background-color: #fff;\n transform: translateX(-50%);\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);\n}\n\n.slider-handle::after {\n content: '||';\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: #333;\n font-size: 1.2rem;\n font-weight: bold;\n}\n\n.slider-range {\n position: absolute;\n top: 50%;\n left: 0;\n width: 100%;\n transform: translateY(-50%);\n -webkit-appearance: none;\n appearance: none;\n background: transparent;\n cursor: ew-resize;\n z-index: 5;\n margin: 0;\n padding: 0;\n opacity: 0; \/* Hide the default range input *\/\n}\n\n.before-label,\n.after-label {\n position: absolute;\n bottom: 10px;\n padding: 5px 10px;\n background-color: rgba(0, 0, 0, 0.5);\n color: #fff;\n font-size: 0.9rem;\n border-radius: 4px;\n z-index: 11;\n}\n\n.before-label {\n left: 10px;\n}\n\n.after-label {\n right: 10px;\n}\n\n.shop-now-button {\n display: inline-block;\n margin-top: 30px;\n padding: 15px 30px;\n background-color: #000;\n color: #fff;\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 1px;\n border-radius: 5px;\n transition: background-color 0.3s ease;\n}\n\n.shop-now-button:hover {\n background-color: #333;\n}\n<\/pre>\n\n\n\nStep 3: Create the JavaScript File<\/h3>\n\n\n\n This file contains the logic that makes the slider interactive. Go to the Assets<\/strong> directory again, add a new asset, and name the file before-after.js<\/strong>.<\/p>\n\n\n\nCopy and paste the entire JavaScript code below into the newly created file.<\/p>\n\n\n\n
document.addEventListener('DOMContentLoaded', () => {\n \/\/ This listener ensures the script runs when the page loads.\n \/\/ It also handles re-initialization in the Shopify theme editor.\n function initSliders() {\n const sliderContainers = document.querySelectorAll('.before-after-slider');\n\n sliderContainers.forEach(container => {\n const slider = container.querySelector('.slider-range');\n const afterImageContainer = container.querySelector('.after-image-container');\n const handle = container.querySelector('.slider-handle');\n\n \/\/ Function to update the slider position\n function updateSlider(value) {\n const percentage = value + '%';\n afterImageContainer.style.width = percentage;\n handle.style.left = percentage;\n }\n\n \/\/ Sync the range input with the visual slider\n slider.addEventListener('input', (e) => {\n updateSlider(e.target.value);\n });\n\n \/\/ Dragging functionality for the handle\n let isDragging = false;\n\n function onPointerDown(e) {\n isDragging = true;\n container.style.cursor = 'grabbing';\n }\n\n function onPointerUp() {\n isDragging = false;\n container.style.cursor = 'ew-resize';\n }\n\n function onPointerMove(e) {\n if (!isDragging) return;\n\n \/\/ Get the touch or mouse event coordinates\n const clientX = e.touches ? e.touches[0].clientX : e.clientX;\n const containerRect = container.getBoundingClientRect();\n \n let newPosition = clientX - containerRect.left;\n\n \/\/ Clamp the position to stay within the container\n if (newPosition < 0) newPosition = 0;\n if (newPosition > containerRect.width) newPosition = containerRect.width;\n\n const percentage = (newPosition \/ containerRect.width) * 100;\n\n updateSlider(percentage);\n slider.value = percentage;\n }\n\n \/\/ Add event listeners for both mouse and touch\n container.addEventListener('mousedown', onPointerDown);\n container.addEventListener('touchstart', onPointerDown);\n \n document.addEventListener('mouseup', onPointerUp);\n document.addEventListener('touchend', onPointerUp);\n \n document.addEventListener('mousemove', onPointerMove);\n document.addEventListener('touchmove', onPointerMove);\n });\n }\n\n \/\/ Initial call to set up the sliders\n initSliders();\n\n \/\/ Re-initialize sliders when a section is loaded in the theme editor\n if (Shopify && Shopify.designMode) {\n document.addEventListener('shopify:section:load', () => {\n initSliders();\n });\n }\n});\n<\/pre>\n\n\n\nStep 4: Add the Section to the Theme Editor<\/h3>\n\n\n\n Now head to the theme editor, Online stores > Themes > Customize<\/strong><\/p>\n\n\n\nFrom here, click on the Add section. <\/strong>Search and select the section we created. <\/p>\n\n\n\n
Then you can add images for the before and after field from here, and you get minimal options to edit.<\/p>\n\n\n
\n
Once you\u2019re done making changes, save <\/strong>them. It will look basic and unorganized.<\/p>\n\n\n\nWhy Pick the Shopify App?<\/h2>\n\n\n\n Creating your store with MIT Pro Sections isn’t just about adding features; it’s about smart, fast design, without getting bogged down in manual coding.<\/p>\n\n\n\n
And it goes far beyond a simple before\/after slider. With more than 130 free and paid sections, such as banners, testimonials, FAQs, and more.<\/p>\n\n\n\n
This app will let you,<\/p>\n\n\n\n
![\"Preview](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/app-preview-1-700x351.png\")
<\/figure>\n<\/div>\n\n\n![\"shows](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/browse-section-8.png\")
<\/figure>\n<\/div>\n\n\n![\"A](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/try-for-free-7-700x309.png\")
<\/figure>\n<\/div>\n\n\n![\"click](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/app-add-section.png\")
<\/figure>\n<\/div>\n\n\n![\"The](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/app-edit-section-1-700x358.png\")
<\/figure>\n<\/div>\n\n\n![\"Customized](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/save-changes-4-700x387.png\")
<\/figure>\n<\/div>\n\n\n![\"click](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/add-section-10.png\")
<\/figure>\n<\/div>\n\n\n![\"edit](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/edit-section-7-700x358.png\")
<\/figure>\n<\/div>\n\n\n![\"MIT](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/mit-sections-pro.png\")
\r\n<\/div>\r\n<\/div>\n\n\n\n