1. Create a new section ‘before-after’ and paste attached code
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{% if section.settings.image_shape == 'blob' %}
{{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
.beforeafter-block {
box-shadow: {{ section.settings.border_color }} 0 0 10px;
border-radius: 5px;
margin-right: 9px;
}
.beforeafter-title {
margin: 0;
font-weight: 600;
text-align: center;
}
.beforeafter-block p {
text-align: center;
margin: 2px 0px;
padding: 8px;
}
.beforeafter-image img {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.beforeafter-button {
position: relative;
bottom: 26px;
text-align: center;
display: grid;
grid-auto-flow: column;
align-items: center;
}
.beforeafter-button span {
font-weight: 600;
background: #333333;
width: 60%;
border-radius: 99px;
color: #fff;
margin: 0 auto;
}
.beforeafter-button span:last-child {
background: #FF2B68;
}
@media only screen and (max-width: 800px) {
.beforeafter-button span {
width: 65%;
}
.before-after-section .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item, .grid--peek .grid__item {
width: auto;
}
.before-after-section ul {
scrollbar-width: auto;
-webkit-overflow-scrolling: auto;
-webkit-overflow-scrolling: touch;
}
.before-after-section li {
}
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- liquid
assign products_to_display = section.blocks.size
if section.blocks.size > section.settings.products_to_show
assign products_to_display = section.settings.products_to_show
assign more_in_collection = true
endif
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and products_to_display > columns_mobile_int
assign show_mobile_slider = true
endif
assign show_desktop_slider = false
if section.settings.enable_desktop_slider and products_to_display > section.settings.columns_desktop
assign show_desktop_slider = true
endif
-%}
<div class="before-after-section color-{{ section.settings.color_scheme }} isolate gradient">
<div class="collection section-{{ section.id }}-padding{% if section.settings.full_width %} collection--full-width{% endif %}">
<div class="collection__title title-wrapper title-wrapper--no-top-margin page-width{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% endif %}{% if show_desktop_slider %} collection__title--desktop-slider{% endif %}">
{%- if section.settings.title != blank -%}
<h2 class="title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{{ section.settings.title }}
</h2>
{%- endif -%}
{%- if section.settings.description != blank
or section.settings.show_description
and section.settings.collection.description != empty
-%}
<div class="collection__description {{ section.settings.description_style }} rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{%- if section.settings.show_description -%}
{{ section.settings.collection.description }}
{%- else -%}
{{ section.settings.description -}}
{%- endif %}
</div>
{%- endif -%}
</div>
<slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<ul
id="Slider-{{ section.id }}"
class="grid product-grid contains-card contains-card--product{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}"
role="list"
aria-label="{{ 'general.slider.name' | t }}"
>
{% for block in section.blocks %}
{% assign product = all_products[block.settings.product_item] %}
<li
id="Slide-{{ section.id }}-{{ forloop.index }}"
class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
<div class="beforeafter-block">
<div class="beforeafter-image">
{% if block.settings.image != blank %}
<img class="multicolumn-card__image" src="{{ block.settings.image | image_url: width: 3200 }} " width="100%" height="100%">
{% endif %}
<div class="beforeafter-button">
<span>BEFORE</span>
<span>AFTER</span>
</div>
</div>
<h3 class="beforeafter-title">{{ block.settings.title }}</h3>
{{ block.settings.text }}
</div>
</li>
{%- else -%}
{%- for i in (1..section.settings.columns_desktop) -%}
<li
class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
<div class="beforeafter-block">
<div class="beforeafter-image">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | image_url: width: 3200 }}" width="100%" height="100%">
{% endif %}
<div class="beforeafter-button">
<span>BEFORE</span>
<span>AFTER</span>
</div>
</div>
<h3 class="beforeafter-title">{{ block.settings.title }}</h3>
{{ block.settings.text }}
</div>
</li>
{%- endfor -%}
{%- endfor -%}
</ul>
{%- if show_mobile_slider or show_desktop_slider -%}
<div class="slider-buttons no-js-hidden">
<button
type="button"
class="slider-button slider-button--prev"
name="previous"
aria-label="{{ 'general.slider.previous_slide' | t }}"
aria-controls="Slider-{{ section.id }}"
>
{% render 'icon-caret' %}
</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ products_to_display }}</span>
</div>
<button
type="button"
class="slider-button slider-button--next"
name="next"
aria-label="{{ 'general.slider.next_slide' | t }}"
aria-controls="Slider-{{ section.id }}"
>
{% render 'icon-caret' %}
</button>
</div>
{%- endif -%}
</slider-component>
{%- if section.settings.show_view_all and more_in_collection -%}
<div class="center collection__view-all{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<a
href="{{ section.settings.collection.url }}"
class="{% if section.settings.view_all_style == 'link' %}link underlined-link{% elsif section.settings.view_all_style == 'solid' %}button{% else %}button button--secondary{% endif %}"
aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title | escape }}"
>
{{ 'sections.featured_collection.view_all' | t }}
</a>
</div>
{%- endif -%}
{% if section.settings.image_shape == 'arch' %}
{% render 'mask-arch' %}
{%- endif -%}
</div>
</div>
{% schema %}
{
"name": "Before After Section",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "color",
"id": "border_color",
"label": "Border color",
"default": "#ff605f"
},
{
"type": "inline_richtext",
"id": "title",
"default": "Before After Section",
"label": "Before After Section"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "richtext",
"id": "description",
"label": "t:sections.featured-collection.settings.description.label"
},
{
"type": "checkbox",
"id": "show_description",
"label": "t:sections.featured-collection.settings.show_description.label",
"default": false
},
{
"type": "select",
"id": "description_style",
"label": "t:sections.featured-collection.settings.description_style.label",
"options": [
{
"value": "body",
"label": "t:sections.featured-collection.settings.description_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.featured-collection.settings.description_style.options__2.label"
},
{
"value": "uppercase",
"label": "t:sections.featured-collection.settings.description_style.options__3.label"
}
],
"default": "body"
},
{
"type": "collection",
"id": "collection",
"label": "t:sections.featured-collection.settings.collection.label"
},
{
"type": "range",
"id": "products_to_show",
"min": 2,
"max": 25,
"step": 1,
"default": 4,
"label": "t:sections.featured-collection.settings.products_to_show.label"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 4,
"label": "t:sections.featured-collection.settings.columns_desktop.label"
},
{
"type": "checkbox",
"id": "full_width",
"label": "t:sections.featured-collection.settings.full_width.label",
"default": false
},
{
"type": "checkbox",
"id": "show_view_all",
"default": true,
"label": "t:sections.featured-collection.settings.show_view_all.label"
},
{
"type": "select",
"id": "view_all_style",
"label": "t:sections.featured-collection.settings.view_all_style.label",
"options": [
{
"value": "link",
"label": "t:sections.featured-collection.settings.view_all_style.options__1.label"
},
{
"value": "outline",
"label": "t:sections.featured-collection.settings.view_all_style.options__2.label"
},
{
"value": "solid",
"label": "t:sections.featured-collection.settings.view_all_style.options__3.label"
}
],
"default": "solid"
},
{
"type": "checkbox",
"id": "enable_desktop_slider",
"label": "t:sections.featured-collection.settings.enable_desktop_slider.label",
"default": false
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info",
"default": "scheme-1"
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header.content"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.label"
},
{
"type": "select",
"id": "image_shape",
"options": [
{
"value": "default",
"label": "t:sections.all.image_shape.options__1.label"
},
{
"value": "arch",
"label": "t:sections.all.image_shape.options__2.label"
},
{
"value": "blob",
"label": "t:sections.all.image_shape.options__3.label"
},
{
"value": "chevronleft",
"label": "t:sections.all.image_shape.options__4.label"
},
{
"value": "chevronright",
"label": "t:sections.all.image_shape.options__5.label"
},
{
"value": "diamond",
"label": "t:sections.all.image_shape.options__6.label"
},
{
"value": "parallelogram",
"label": "t:sections.all.image_shape.options__7.label"
},
{
"value": "round",
"label": "t:sections.all.image_shape.options__8.label"
}
],
"default": "default",
"label": "t:sections.all.image_shape.label",
"info": "t:sections.all.image_shape.info"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.featured-collection.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.featured-collection.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.featured-collection.settings.show_rating.label",
"info": "t:sections.featured-collection.settings.show_rating.info"
},
{
"type": "checkbox",
"id": "enable_quick_add",
"default": false,
"label": "t:sections.featured-collection.settings.enable_quick_buy.label"
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.label",
"options": [
{
"value": "1",
"label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
}
]
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.featured-collection.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"name": "Item card",
"type": "card",
"settings": [
{
"type": "text",
"id": "title",
"default": "Ramzan",
"label": "Customer name"
},
{
"type": "richtext",
"id": "text",
"default": "<p>After 2 months of using this product daily, my skin is the best. My skin looking as healthy as it was in my early 20s. Worth every penny. I really recommend this to other people.</p>",
"label": "Description"
},
{
"type": "image_picker",
"id": "image",
"label": "First image"
},
{
"type": "checkbox",
"id": "enable_buttons",
"label": "Before after labels",
"info": "You can show or hide before after label buttons.",
"default": true
}
]
}
],
"presets": [
{
"name": "Before After Section",
"blocks": [
{
"type": "card"
},
{
"type": "card"
},
{
"type": "card"
},
{
"type": "card"
}
]
}
]
}
{% endschema %}Before & After Section in Shopify Store | Without App | Free Shopify Customization
Want to showcase your product results in a more attractive and professional way? In this tutorial, you’ll learn how to add a Before and After section to your Shopify store without installing any paid apps.
A Before and After section is a great way to visually demonstrate product transformations and help customers understand the benefits of what you’re selling. Whether you run a beauty, skincare, fitness, home improvement, or lifestyle store, this feature can make your product pages more engaging.
With a before-and-after image comparison, visitors can drag a slider to reveal the difference between two images. This interactive effect makes it easier for customers to compare results while exploring your products.
The best part is that you can create this section using custom HTML, CSS, JavaScript, and Shopify Liquid without paying for an additional app.
In this step-by-step tutorial, I’ll show you how to create the Before and After section, add it to your Shopify theme, and customize its images, colors, text, and slider settings to match your store’s design.
You can also adjust the section layout to make it look great on both desktop and mobile devices.
If you’re looking for a free way to make your Shopify store more interactive and visually appealing, this tutorial is for you!
Watch the tutorial and follow along to add this stylish Before and After image comparison section to your Shopify store.
Ready to become a better coder? Don’t miss this tutorial! Animation Direction in CSS