Are you looking to enhance the visual appeal of your Shopify store with a before-after slider but struggling to find a free solution? Look no further! In this comprehensive guide, we’ll walk you through the process of adding a before-after slider to your Shopify theme, absolutely free of charge.
Step 1: Accessing Your Theme Editor
To kick things off, log in to your Shopify dashboard and navigate to the “Online Store” section. From there, select “Themes.” If you’re starting fresh, install a theme of your choice. For this demonstration, we’ll use the Dawn theme.
Step 2: Adding Custom Code
Once you’ve installed your theme, access the theme editor by clicking on the three dots next to your theme and selecting “Edit code.” Before proceeding, we’d appreciate it if you could subscribe to our channel and show some love by liking this video!
Step 3: Creating the Before-After Slider Section
Within the code editor, locate the “Sections” folder and click on “Add new section.” Name your section (e.g., “Before-After Slider”) and clear out any existing code. Now Update the code below:
{% assign unique_id = 'ba_slider_' | append: section.id %}
<main class="ba_main {{ unique_id }}">
<div class="container before_after">
<div class="image-container">
<div class="before_img">
<img
class="image-before slider-image"
src="{{ section.settings.bf_image | image_url }}"
alt="color photo"
>
<span
class="before_badge ba_badge"
style="{% unless section.settings.show_badge %}display: none;{% endunless %}"
>Before</span
>
</div>
<div class="after_img">
<img
class="image-after slider-image"
src="{{ section.settings.af_image | image_url }}"
alt="black and white"
>
<span class="after_badge ba_badge" style="{% unless section.settings.show_badge %}display: none;{% endunless %}"
>After</span
>
</div>
</div>
<!-- step="10" -->
<input
type="range"
min="0"
max="100"
value="50"
aria-label="Percentage of before photo shown"
class="ba-slider"
>
<div class="slider-line" aria-hidden="true"></div>
<div class="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="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="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>
<div
class="container before_after-content"
style="{% unless section.settings.show_content %}display: none;{% endunless %}"
>
<div class="before_after-heading">
<h3>{{ section.settings.ba_heading }}</h3>
</div>
<div class="before_after-paragraph">
<p>{{ section.settings.ba_content }}</p>
</div>
</div>
</main>
{% schema %}
{
"name": "Before / After Slider",
"settings": [
{
"type": "header",
"content": "Subscribe to our [channel](https://www.youtube.com/@websensepro?sub_confirmation=1)"
},
{
"id":"bf_image",
"type":"image_picker",
"label":"Before Image"
},
{
"id":"af_image",
"type":"image_picker",
"label":"After Image"
},
{
"type": "checkbox",
"id": "show_badge",
"label": "Show Badges",
"default": false
},
{
"type": "checkbox",
"id": "grayscale_before",
"label": "Grayscale for Before Image",
"default": false
},
{
"type": "checkbox",
"id": "show_content",
"label": "Show content",
"default": false
},
{
"id":"ba_heading",
"type":"text",
"label":"Heading"
},
{
"id":"ba_content",
"type":"richtext",
"label":"Content"
}
],
"presets":[
{
"name":"Before / After Slider"
}
]
}
{% endschema %}
{% javascript %}
{% endjavascript %}
<style>
{% if section.settings.show_content == true %}
.container{
width: calc(50% - 20px);
}
{% else %}
.container{
width: 50%;
margin: 0 auto;
}
{% endif %}
.ba_main {
display: flex;
place-items: center;
flex-wrap: wrap;
gap: 30px;
padding: 0 5rem;
max-width: 1200px;
width: 100%;
margin: 50px auto;
}
img {
display: block;
max-width: 100%;
}
.container {
display: grid;
/* place-content: center; */
position: relative;
overflow: hidden;
border-radius: 1rem;
--position: 50%;
}
.image-container {
max-width: 1200px;
}
.before_badge {
z-index: 99 !important;
position: absolute;
bottom: 15px;
left: 15px;
background: #fff;
padding: 0 5px;
border-radius: 5px;
color: #000;
}
.after_badge {
z-index: 99 !important;
position: absolute;
bottom: 15px;
right: 15px;
background: #fff;
padding: 0 5px;
border-radius: 5px;
color: #000;
}
.slider-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
max-height: 500px;
}
.image-before {
position: absolute;
inset: 0;
width: var(--position);
{% if section.settings.grayscale_before %}filter: grayscale(100%);{% endif %}
}
.ba-slider {
position: absolute;
inset: 0;
cursor: pointer;
opacity: 0;
/* for Firefox */
width: 100%;
height: 100%;
}
.ba-slider:focus-visible ~ .slider-button {
outline: 5px solid black;
outline-offset: 3px;
}
.slider-line {
position: absolute;
inset: 0;
width: .2rem;
height: 100%;
background-color: #fff;
/* z-index: 10; */
left: var(--position);
transform: translateX(-50%);
pointer-events: none;
}
.slider-button {
position: absolute;
background-color: #fff !important;
color: black;
padding: .5rem;
border-radius: 100vw;
display: grid;
place-items: center;
top: 50%;
left: var(--position);
transform: translate(-50%, -50%);
pointer-events: none;
/* z-index: 100; */
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}
@media only screen and (max-width: 768px)
{
.container{
width: 100%;
}
.ba_main{
padding: 0 20px;
}
}
</style>
<script>
function initializeBeforeAfterSlider(uniqueId) {
const container = document.querySelector(`.${uniqueId} .before_after`);
const slider = document.querySelector(`.${uniqueId} .ba-slider`);
slider.addEventListener('input', (e) => {
container.style.setProperty('--position', `${e.target.value}%`);
});
}
initializeBeforeAfterSlider('{{ unique_id }}');
</script>Step 4: Customizing Your Slider
After pasting the code, hit the save button. Now, head over to the “Customize” section by clicking on the three dots again and selecting “Customize theme.” In the customization panel, click on “Add section” and search for “before-after slider.” Select the option and proceed to choose your before and after images for the slider.
Step 5: Fine-Tuning Options
With your images selected, you have the flexibility to further customize your slider. You can enable grayscale mode for the before image, display badges, and add accompanying content. These options allow you to tailor the slider to match your store’s branding and style seamlessly.
Step 6: Mobile Optimization
Don’t forget to preview your changes on mobile devices to ensure optimal responsiveness. The before-after slider is designed to adapt to various screen sizes, guaranteeing a consistent user experience across all devices.
Step 7: Save and Publish
Once you’re satisfied with the setup, hit the save button to apply your changes. Your before-after slider is now live on your Shopify store, ready to captivate visitors and showcase your products or services in a dynamic and engaging manner.
Conclusion:
And there you have it! By following these simple steps, you’ve successfully integrated a before-after slider into your Shopify theme, elevating the visual storytelling capabilities of your online store. Remember to check out the link in the video description for the code and don’t hesitate to let us know your thoughts and suggestions for future tutorials. Until next time, happy customizing!
