How to Add a Free Before & After Image Slider to Your Shopify Store (No Paid Apps Needed)
If you're running a Shopify store in a niche where visual transformations matter — skincare, hair care, fitness, home renovation, cleaning products — a before and after image slider can be one of the most powerful conversion tools on your product pages. The problem? Shopify doesn't include one natively, and most of the apps that offer this feature come with a monthly price tag. The good news is that you don't need to spend a single dollar to get a polished, functional before and after slider working on your store. In this guide, you'll learn exactly how to build one from scratch using custom Liquid code and the free Dawn theme — no paid apps, no third-party subscriptions, no shortcuts.
Why Shopify Doesn't Have a Built-In Before & After Slider (And Why Free Matters)
Shopify's core platform is intentionally lean. The default theme editor covers the essentials — product pages, collections, announcements, image banners — but specialized interactive components like comparison sliders simply aren't part of the standard toolkit. If you search the Shopify App Store for a before and after slider, you'll find a few options, but the reputable ones are almost universally paid. The Section Store, for example, offers slider functionality but sits behind a paywall, which puts it out of reach for smaller merchants or those just getting started.
This matters more than it might seem at first glance. Paid apps add recurring costs that compound quickly across a store, and they introduce third-party dependencies — if the app developer discontinues support or changes their pricing model, your feature breaks or becomes more expensive overnight. A custom-coded solution built directly into your theme, by contrast, costs nothing, loads faster because it isn't pulling in external scripts from another server, and stays completely under your control. You own the code. You can modify it, style it, and move it anywhere on your store without asking anyone's permission or paying anyone's subscription fee.
The approach covered in this guide uses Shopify's built-in Theme Code Editor to add a custom Liquid section — which means it integrates cleanly with your theme customizer just like any native section would. You'll be able to add it to any page, swap out images, adjust settings, and see live previews directly inside the Shopify editor. It behaves exactly like a feature that shipped with the theme.
Setting Up the Dawn Theme in Your Shopify Store
Before writing any code, you need a theme that plays well with custom Liquid sections, and Dawn is the best choice here. Dawn is Shopify's official free flagship theme — it's actively maintained by Shopify's own team, built on a clean and well-structured codebase, and fully compatible with the customizations you're about to make.
{%- comment -%} Assign: Preview section js fix {%- endcomment -%}
{%- assign section_id = section.id | replace: '+', '' -%}
{% comment %} Blocks: out of order (not within loop) {% endcomment %}
{% assign slider_block = section.blocks | where: 'type', 'slider_block' %}
{%- comment -%} Images: all placeholders {%- endcomment -%}
{%- assign placeholder_image_id = 'RbbdzZBKRDY' -%}
{%- assign placeholder_image_id_2 = 'DBtgQI-9XdM' -%}
{% comment %} Images: responsive image widths {% endcomment %}
{%- assign widths = '180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1950, 2100, 2260, 2450, 2700, 3000, 3350, 3750, 4100' -%}
{%- comment -%} Layout: has user entered measurement value into max-width field? {%- endcomment -%}
{%- if section.settings.max_width contains 'px' or section.settings.max_width contains '%' -%}
{%- assign max_width = section.settings.max_width -%}
{%- else -%}
{%- assign max_width = section.settings.max_width | append: 'px' -%}
{%- endif -%}
{%- comment -%} Text: custom font_picker values {%- endcomment -%}
{%- capture font_settings_list -%}
{{ section.settings.main_font | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}
{%- endcapture -%}
{%- assign font_array = font_settings_list | split: '~' -%}
{%- capture minify -%}
{%- comment -%} CSS {%- endcomment -%}
<style>
/*** Global styles ***/
[id^="DP--"] {
margin-left: auto;
margin-right: auto;
position: relative;
text-transform: unset;
letter-spacing: unset;
margin: unset;
padding: unset;
z-index: 1;
}
.wsp-section__section * {
box-sizing: border-box !important;
}
.wsp-section__section img {
max-width: 100%;
}
[class^="web_pack_-_fixed"] {
display: none;
}
.wsp-section__section h1,
.wsp-section__section h2,
.wsp-section__section h3,
.wsp-section__section h4,
.wsp-section__section h5,
.wsp-section__section h6 {
color: inherit;
text-transform: none;
letter-spacing: 0;
margin: 0;
padding: 0;
}
.wsp-section__rte,
.wsp-section__rte p,
.wsp-section__rte a,
.wsp-section__rte a:hover,
.wsp-section__rte a:visited,
.wsp-section__rte a:focus {
color: inherit;
text-transform: none;
letter-spacing: 0;
margin: 0;
padding: 0;
}
.wsp-section__rte a {
text-decoration: underline;
}
.wsp-section__rte p {
margin-bottom: 0.8em;
}
.wsp-section__rte p:last-of-type {
margin-bottom: 0;
}
.wsp-section__rte ul {
margin: 1em 0;
padding-left: 40px;
}
.wsp-section__rte li {
list-style: unset;
}
.wsp-section__absolute-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 2;
}
.wsp-section__relative {
position: relative;
}
h1.wsp-section__heading,
h2.wsp-section__heading,
h3.wsp-section__heading,
h4.wsp-section__heading,
h5.wsp-section__heading,
h6.wsp-section__heading {
margin-bottom: 1.2rem;
}
.wsp-section__text {
margin: 0;
color: inherit;
}
.wsp-section__button {
font-family: inherit;
cursor: pointer;
text-transform: unset;
-webkit-appearance: none;
}
.wsp-section__button::after {
display: none;
}
.wsp-section__section button,
.wsp-section__section input[type="text"],
.wsp-section__section input[type="email"] {
-webkit-appearance: none;
}
.wsp-section__sizer {
margin-left: auto;
margin-right: auto;
}
.wsp-section__height-sizer {
display: table;
}
.wsp-section__height--x-small {
height: 125px;
}
.wsp-section__height--small {
height: 300px;
}
.wsp-section__height--medium {
height: 475px;
}
.wsp-section__height--large {
height: 650px;
}
.wsp-section__height--x-large {
height: 775px;
}
@media only screen and (max-width: 767px) {
.wsp-section__height--x-small {
height: 94px;
}
.wsp-section__height--small {
height: 225px;
}
.wsp-section__height--medium {
height: 357px;
}
.wsp-section__height--large {
height: 488px;
}
.wsp-section__height--x-large {
height: 582px;
}
}
/*** Videos ***/
.wsp-section__video__wrapper video[loading=lazy],
.wsp-section__background-video[loading=lazy] {
opacity: 1;
}
/*** Images ***/
.wsp-section__image__wrapper {
display: grid;
position: relative;
margin: 0;
}
.wsp-section__image__wrapper svg {
display: block;
}
.wsp-section__image__wrapper:not(.wsp-section__image__wrapper--contain) svg {
width: inherit;
height: inherit;
}
.wsp-section__image__wrapper > * {
grid-area: 1 / 1 / 2 / 2;
}
.wsp-section__image__wrapper img,
.wsp-section__image__wrapper .wsp-section__placeholder {
object-fit: cover;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
.wsp-section__image__wrapper--contain img {
object-fit: contain;
}
.web_pck__image-link {
display: block;
overflow: hidden;
}
/*** Widths ***/
div.DP__widths {
display: inline-block !important;
vertical-align: top;
font-size: 0;
margin-left: auto;
margin-right: auto;
}
div.DP__widths * {
font-size: initial;
}
@media (max-width: 767px) {
div.DP__widths {
width: 100% !important;
}
}
/*** Flex ***/
.wsp-section__flex {
display: flex;
}
.wsp-section__flex-wrap {
flex-wrap: wrap;
}
.wsp-section__flex--1-per-row .wsp-section__flex-item {
flex-basis: 100%;
}
.wsp-section__flex--2-per-row .wsp-section__flex-item {
flex-basis: 50%;
}
.wsp-section__flex--3-per-row .wsp-section__flex-item {
flex-basis: 33.3333%;
}
.wsp-section__flex--4-per-row .wsp-section__flex-item {
flex-basis: 25%;
}
.wsp-section__flex--5-per-row .wsp-section__flex-item {
flex-basis: 20%;
}
.wsp-section__flex--6-per-row .wsp-section__flex-item {
flex-basis: 16.6666%;
}
.wsp-section__flex--7-per-row .wsp-section__flex-item {
flex-basis: 14.3%;
}
.wsp-section__flex--8-per-row .wsp-section__flex-item {
flex-basis: 12.5%;
}
.wsp-section__flex-row-reverse {
flex-direction: row-reverse;
}
.wsp-section__grid-row-reverse {
direction: rtl;
}
.wsp-section__grid-row-reverse * {
direction: ltr;
}
.wsp-section__justify-left {
justify-content: flex-start;
text-align: left;
}
.wsp-section__justify-center {
justify-content: center;
text-align: center;
}
.wsp-section__justify-right {
justify-content: flex-end;
text-align: right;
}
.wsp-section__justify-justify {
justify-content: space-between;
text-align: justify;
}
.wsp-section__align-top {
align-items: flex-start;
}
.wsp-section__align-center {
align-items: center;
}
.wsp-section__align-bottom {
align-items: flex-end;
}
/** Text alignment **/
.wsp-section__text-alignment-left {
text-align: left;
}
.wsp-section__text-alignment-center {
text-align: center;
}
.wsp-section__text-alignment-right {
text-align: right;
}
.wsp-section__text-alignment-justify {
text-align: justify;
}
/*** Grid ***/
.wsp-section__grid {
display: grid;
}
.wsp-section__grid--1-per-row {
grid-template-columns: 1fr;
}
.wsp-section__grid--2-per-row {
grid-template-columns: 1fr 1fr;
}
.wsp-section__grid--3-per-row {
grid-template-columns: 1fr 1fr 1fr;
}
.wsp-section__grid--4-per-row {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.wsp-section__grid--5-per-row {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.wsp-section__grid--6-per-row {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.wsp-section__grid--7-per-row {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.wsp-section__grid--8-per-row {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.wsp-section__grid-reverse {
direction: rtl;
}
.wsp-section__grid-reverse * {
direction: ltr;
}
/*** Helpers ***/
.wsp-section__unset {
font-family: unset;
font-size: unset;
letter-spacing: unset;
line-height: unset;
margin: unset;
padding: unset;
list-style: none;
}
.wsp-section__force-full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.wsp-section__visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.wsp-section__recaptcha-message {
margin-top: 0.8em;
font-size: 0.8em;
}
.wsp-section__recaptcha-message a,
.wsp-section__recaptcha-message a:hover,
.wsp-section__recaptcha-message a:focus {
font-style: italic;
color: inherit;
font-size: inherit;
}
/** Pages **/
.wsp-section__page-intro {
width: 100%;
}
/** Theme editor warnings **/
.wsp-section__no-app-warning {
position: relative;
overflow: hidden;
padding: 1em;
}
.wsp-section__no-app-warning-text {
position: relative;
background: #ff0;
font-weight: bold;
text-transform: uppercase;
padding: 10px;
max-width: 50%;
margin: 0 auto;
}
.wsp-section__no-app-warning-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 130%;
background: repeating-linear-gradient(-45deg, #ff0, #ff0 20px, #000 20px, #000 40px);
animation: wsp-section__warning-background 1s linear infinite;
}
@keyframes wsp-section__warning-background {
to {
transform: translateX(-56px);
}
}
/** Animations **/
[style*="--wsp-section-animate"] {
will-change: transform;
transform: translateZ(0);
opacity: 0;
}
.wsp-section__animation-applied {
overflow: hidden;
}
.wsp-section__animation-applied [style*="--wsp-section-animate"] {
--wsp-section-animation-multiplier: 0.3s;
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: calc(var(--wsp-section-animation-multiplier) * var(--wsp-section-animate));
}
@keyframes wsp-section__animation--fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes wsp-section__animation--fade-in-left {
0% {
opacity: 0;
transform: translateX(10%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes wsp-section__animation--fade-in-right {
0% {
opacity: 0;
transform: translateX(-10%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes wsp-section__animation--fade-in-down {
0% {
opacity: 0;
transform: translateY(-10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes wsp-section__animation--fade-in-up {
0% {
opacity: 0;
transform: translateY(10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/** Parallax **/
.wsp-section__parallax {
position: relative;
z-index: 1;
}
.wsp-section__parallax > .wsp-section__parallax-img {
position: absolute;
object-fit: cover;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
/** Responsive helpers **/
.wsp-section__desktop--visible {
display: inherit;
}
.wsp-section__desktop--hidden {
display: none !important;
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
.wsp-section__tablet--visible {
display: block !important;
}
.wsp-section__tablet--hidden {
display: none !important;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
.wsp-section__mobile--visible {
display: block !important;
}
.wsp-section__mobile--hidden {
display: none !important;
}
}
/** Theme specific **/
/* Dawn */
[class*="wsp-section"]:empty {
display: inherit;
}
/* Debut - offset margin from the header */
/* .main-content[id="MainContent"] .shopify-section[class*="DP__"]:first-child,
.main-content[id="MainContent"] [id*="DP__"] {
margin-top: -35px;
}
@media only screen and (min-width: 750px) {
.main-content[id="MainContent"] .shopify-section[class*="DP__"]:first-child,
.main-content[id="MainContent"] .DP__widths.DP__width--half:first-child,
.main-content[id="MainContent"] .DP__widths.DP__width--half:first-child + .DP__widths.DP__width--half,
.main-content[id="MainContent"] [id*="DP__"] {
margin-top: -55px;
}
} */
/* Brooklyn - prevent default margins (but leave them on theme sections) */
.index-sections [class*="DP__"] {
margin-top: 0;
}
.index-sections [class*="DP__"].shopify-section:first-child:not(.shopify-section--full-width) {
margin-top: 0;
}
/* Impulse - prevent default margins (but leave them on theme sections) */
.main-content [class*="DP__"] {
margin-top: 0;
margin-bottom: 0;
}
/* Cornerstone - override overflow: hidden */
[class*="DP__"].shopify-section {
overflow: unset;
}
{%- if slider_block.size > 0 -%}
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0;box-shadow: none;}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}
{%- endif -%}
{%- if section.settings.override_theme_font != blank -%}
{%- for font in font_array -%}
{%- unless font contains 'error' -%}{{ font }}{%- endunless -%}
{%- endfor -%}
#DP--{{ section_id }} {
--main-font: {{ section.settings.main_font.family }}, {{ section.settings.main_font.fallback_families }};
--main-font-weight: {{ section.settings.main_font.weight }};
--main-font-style: {{ section.settings.main_font.style }};
--heading-font: {{ section.settings.heading_font.family }}, {{ section.settings.heading_font.fallback_families }};
--heading-font-weight: {{ section.settings.heading_font.weight }};
--heading-font-style: {{ section.settings.heading_font.style }};
}
{%- endif -%}
#DP--{{ section_id }} {
margin-top: {{ section.settings.outer_margin }}px;
margin-bottom: {{ section.settings.outer_margin }}px;
}
#DP--{{ section_id }} .wsp-section__sizer {
padding-top: {{ section.settings.inner_padding }}px;
padding-bottom: {{ section.settings.inner_padding }}px;
width: {{ section.settings.base_width }}%;
max-width: {{ max_width }};
}
#DP--{{ section_id }} .wsp-section__background {
background: {{ section.settings.background_color }};
}
#DP--{{ section_id }} .wsp-section__background-image {
position: absolute;
object-fit: cover;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
#DP--{{ section_id }} .wsp-section__grid--main {
grid-template-columns: 1fr minmax(250px, {{ section.settings.text_width }}%);
}
#DP--{{ section_id }} .wsp-section__text p:last-of-type {
margin-bottom: 1.2rem;
}
{%- if section.settings.image_crop == 'match_text_box' -%}
#DP--{{ section_id }} .wsp-section__image__wrapper--main {
height: 100%;
overflow: hidden;
}
{%- endif -%}
{% comment %} COMPARISON SLIDER {% endcomment %}
#DP--{{ section_id }} .wsp-section__compare {
position: relative;
aspect-ratio: {{ section.settings.left_image.width | default: 1200 }} / {{ section.settings.left_image.height | default: 800 }};
}
#DP--{{ section_id }} .wsp-section__comparison__slider {
position: absolute;
z-index: 1;
width: 50px;
height: 50px;
cursor: grab;
display: block !important;
position: relative;
top: calc(50% - 25px);
left: calc(50% - 25px);
}
#DP--{{ section_id }} .wsp-section__comparison__slider:active {
cursor: grabbing;
}
#DP--{{ section_id }} .wsp-section__comparison__slider-handle {
background: {{ section.settings.handle_color }};
border: 4px solid {{ section.settings.border_color }};
border-radius: 50%;
transition: border-color 0.2s;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: flex;
}
#DP--{{ section_id }} .wsp-section__comparison__slider-handle svg {
width: 50%;
height: 50%;
margin: auto;
}
#DP--{{ section_id }} .wsp-section__comparison__slider-handle svg path {
fill: {{ section.settings.drag_color }};
}
#DP--{{ section_id }} .wsp-section__comparison__slider img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: -2px;
object-fit: cover;
}
#DP--{{ section_id }} .wsp-section__comparison__image {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
overflow: hidden;
user-select: none;
pointer-events: none;
}
#DP--{{ section_id }} .wsp-section__comparison__overlay {
border-right: 2px solid {{ section.settings.border_color }};
}
#DP--{{ section_id }} .wsp-section__comparison__overlay:after {
display: block;
content: '';
width: 2px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background: {{ section.settings.border_color }};
}
#DP--{{ section_id }} .wsp-section__comparison__image img {
width: 100%;
height: 100%;
object-fit: cover;
max-width: none;
}
#DP--{{ section_id }} .wsp-section__comparison__overlay img {
height: 100%;
width: auto;
}
#DP--{{ section_id }} .wsp-section__caption {
position: absolute;
display: block;
color: {{ section.settings.caption_text }};
left: 0;
top: 0;
width: max-content;
max-width: 200px;
margin: 10px;
padding: 0.3em 0.8em;
background-color: {{ section.settings.caption_background }};
line-height: var(--dp-g-body-line-height, var(--dp-body-line-height, calc(3px + 2.5ex + 3px)));
font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.008 }});
{%- if section.settings.override_theme_font != blank -%}
font-family: var(--main-font);
font-weight: var(--main-font-weight);
font-style: var(--main-font-style);
{%- endif -%}
}
#DP--{{ section_id }} .wsp-section__caption--right {
right: 0;
left: auto;
}
{% comment %} END COMPARISON SLIDER {% endcomment %}
#DP--{{ section_id }} .wsp-section__content {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
{%- if section.settings.override_theme_font != blank -%}
font-family: var(--main-font);
font-weight: var(--main-font-weight);
font-style: var(--main-font-style);
{%- endif -%}
background: {{ section.settings.text_background_color }};
}
#DP--{{ section_id }} .wsp-section__inner-content {
width: 100%;
max-width: min(600px, 80%);
margin: auto;
}
{% comment %} Block styling {% endcomment %}
#DP--{{ section_id }} .wsp-section__block .wsp-section__small-heading {
font-size: calc(var(--dp-g-small-heading-size, var(--dp-small-heading-size, 24px)) * {{ section.settings.text_size | times: 0.01 }});
{%- if section.settings.override_theme_font != blank -%}
font-family: var(--heading-font);
font-weight: var(--heading-font-weight);
font-style: var(--heading-font-style);
{%- endif -%}
}
#DP--{{ section_id }} .wsp-section__rte p,
#DP--{{ section_id }} .wsp-section__rte ul {
line-height: var(--dp-g-body-line-height, var(--dp-body-line-height, calc(3px + 2.5ex + 3px)));
color: {{ section.settings.text_color }};
font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.01 }});
{%- if section.settings.override_theme_font != blank -%}
font-family: var(--main-font);
font-weight: var(--main-font-weight);
font-style: var(--main-font-style);
{%- endif -%}
}
#DP--{{ section_id }} .wsp-section__small-text p,
#DP--{{ section_id }} .wsp-section__small-text ul {
font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.008 }});
}
{%- if section.settings.text_alignment == 'center' -%}
#DP--{{ section_id }} .wsp-section__rte ul {
display: table;
margin: 0 auto;
text-align: left;
}
{%- elsif section.settings.text_alignment == 'right' -%}
#DP--{{ section_id }} .wsp-section__rte ul {
display: table;
margin-left: auto;
text-align: left;
}
{%- endif -%}
#DP--{{ section_id }} .wsp-section__block {
color: {{ section.settings.text_color }};
}
#DP--{{ section_id }} .wsp-section__block + .wsp-section__block {
margin-top: 15px;
}
{% comment %} End block styling {% endcomment %}
/* Animation */
{%- if section.settings.animation != 'none' -%}
#DP--{{ section_id }}.wsp-section__animation-applied [style*="--wsp-section-animate"] {
animation-name: wsp-section__animation--{{ section.settings.animation }};
}
{%- else -%}
#DP--{{ section_id }} [style*="--wsp-section-animate"] {
opacity: 1;
}
{% endif %}
{%- if section.settings.custom_css != blank -%}
{%- assign custom_section_declarations = section.settings.custom_css | split: '}' -%}
{%- for declaration in custom_section_declarations -%}
{%- if declaration contains '{' -%}
#DP--{{ section_id }} {{ declaration }} }
{%- endif -%}
{%- endfor -%}
{%- endif -%}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
#DP--{{ section_id }} .wsp-section__grid--main {
grid-template-columns: repeat(1, minmax(250px, 1fr));
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
#DP--{{ section_id }} {
margin-top: {{ section.settings.outer_margin | times: 0.75 | round: 0 }}px;
margin-bottom: {{ section.settings.outer_margin | times: 0.75 | round: 0 }}px;
}
#DP--{{ section_id }} .wsp-section__sizer {
min-width: 70%;
padding-top: {{ section.settings.inner_padding | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.inner_padding | times: 0.75 | round: 0 }}px;
}
#DP--{{ section_id }} .wsp-section__inner-content {
max-width: min(400px, 100%);
}
{%- if section.settings.mobile_custom_css != blank -%}
{%- assign mobile_custom_declarations = section.settings.mobile_custom_css | split: '}' -%}
{%- for declaration in mobile_custom_declarations -%}
{%- if declaration contains '{' -%}
#DP--{{ section_id }} {{ declaration }} }
{%- endif -%}
{%- endfor -%}
{%- endif -%}
}
</style>
{%- comment -%} HTML {%- endcomment -%}
<section id="DP--{{ section_id }}" class="DP--{{ section_id }} wsp-section__main wsp-section__section">
{%- if section.settings.anchor_id != blank -%}
<div id="{{ section.settings.anchor_id | remove: '#' | handleize }}" class="wsp-section__anchor-id" style="height: 0; overflow: hidden;"></div>
{%- endif -%}
<div class="wsp-section__background">
{%- if section.settings.show_background_image -%}
{%- if section.settings.background_image != blank -%}
{{ section.settings.background_image | image_url: width: section.settings.background_image.width | image_tag: widths: widths, sizes: '100vw', class: 'wsp-section__background-image' }}
{%- else -%}
<img src="https://cdn.shopify.com/s/files/1/0577/7673/4361/files/{{ placeholder_image_id }}_1600x.jpg"
class="wsp-section__background-image"
alt=""
loading="lazy"
class="wsp-section__background-image"
width="1600"
height="1000">
{%- endif -%}
{%- endif -%}
<div class="wsp-section__sizer
wsp-section__grid
wsp-section__grid--main
{% if section.settings.image_position == 'right' -%}
wsp-section__grid-reverse
{%- endif -%}">
<div class="wsp-section__comparison-wrapper">
<div class="wsp-section__compare">
<div class="wsp-section__comparison__image wsp-section__comparison__image--right wsp-section__caption--right">
{%- if section.settings.right_image -%}
{%- capture sizes -%}
{{ section.settings.base_width }}vw
{%- endcapture -%}
{{ section.settings.right_image | image_url: width: 5000 | image_tag: widths: widths, sizes: sizes }}
{%- else -%}
<img src="https://cdn.shopify.com/s/files/1/0577/7673/4361/files/{{ placeholder_image_id }}_1200x.jpg"
alt=""
loading="lazy"
width="1200"
height="800">
{%- endif -%}
{%- if section.settings.right_caption != blank -%}
<span class="wsp-section__caption wsp-section__caption--right">{{ section.settings.right_caption }}</span>
{%- endif -%}
</div>
<div class="wsp-section__comparison__slider">
{%- if section.settings.handle_image -%}
{{ section.settings.handle_image | image_url: width: 800 | image_tag: loading: 'lazy' }}
{%- else -%}
<div class="wsp-section__comparison__slider-handle">
<svg viewBox="0 0 20 20" ><path d="M6 0a1 1 0 0 0-1 1v18a1 1 0 1 0 2 0v-18a1 1 0 0 0-1-1zm8 0a1 1 0 0 0-1 1v18a1 1 0 1 0 2 0v-18a1 1 0 0 0-1-1z"></path></svg>
</div>
{%- endif -%}
</div>
<div class="wsp-section__comparison__image wsp-section__comparison__overlay wsp-section__comparison__image--left">
{%- if section.settings.left_image -%}
{%- capture sizes -%}
{{ section.settings.base_width }}vw
{%- endcapture -%}
{{ section.settings.left_image | image_url: width: 5000 | image_tag: widths: widths, sizes: sizes }}
{%- else -%}
<img src="https://cdn.shopify.com/s/files/1/0577/7673/4361/files/{{ placeholder_image_id_2 }}.jpg"
alt=""
loading="lazy"
width="1200"
height="800">
{%- endif -%}
{%- if section.settings.left_caption != blank -%}
<span class="wsp-section__caption wsp-section__caption--left">{{ section.settings.left_caption }}</span>
{%- endif -%}
</div>
</div>
</div>
<!-- Blocks Loop -->
<div class="wsp-section__content wsp-section__flex wsp-section__justify-{{ section.settings.text_alignment }}" style="--wsp-section-animate: 1;">
<div class="wsp-section__inner-content">
{%- for block in section.blocks -%}
<div id="DP--{{ block.id }}" class="wsp-section__block wsp-section__block-id-{{ block.id }} wsp-section__block--{{ block.type }} wsp-section__block--{{ forloop.index }}" {{ block.shopify_attributes }} style="--wsp-section-animate: {{ forloop.index }};">
{%- case block.type -%}
{%- when 'slider_block' -%}
<style>
.wsp-section__block-id-{{ block.id }} {
--show-arrows: {{ block.settings.show_arrows | json }};
--autoplay: {{ block.settings.autoplay | times: 1000 | json }};
--slider-animation: {%- if block.settings.slider_animation == 'fade' -%}true{%- else -%}false{%- endif -%};
--page-dots: {{ block.settings.show_dots | json }};
--draggable: true;
--free-scroll-friction: {{ '0.075' | json }};
--selected-attraction: {{ '0.025' | json }};
--friction: {{ '0.28' | json }};
--drag-threshold: {{ '3' | json }};
}
.wsp-section__block-id-{{ block.id }} .wsp-section__slider-container {
display: flex;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__slider-block {
width: {{ block.settings.image_width }}%;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__slide {
width: 100%;
}
#DP--{{ section_id }} .wsp-section__block-id-{{ block.id }} .wsp-section__text {
margin-top: 10px;
text-align: center;
}
#DP--{{ section_id }} .wsp-section__block-id-{{ block.id }} .wsp-section__text p:last-of-type {
margin-bottom: 0;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__slide img {
width: 100%;
height: auto;
display: block;
margin: auto;
}
{%- if block.settings.show_dots == true -%}
.wsp-section__block-id-{{ block.id }} .wsp-section__slider-container {
margin-bottom: 30px;
}
.wsp-section__block-id-{{ block.id }} .flickity-page-dots {
bottom: -25px;
}
.wsp-section__block-id-{{ block.id }} .flickity-page-dots li:only-child {
display: none;
}
{%- endif -%}
{%- if block.settings.show_arrows == true -%}
.wsp-section__block-id-{{ block.id }} .flickity-prev-next-button {
width: 30px;
height: 30px;
}
{%- endif -%}
@media (max-width: 480px) {
.wsp-section__block-id-{{ block.id }} .wsp-section__slider-block {
width: {{ block.settings.mobile_image_width }}%;
}
}
</style>
<div class="wsp-section__slider-container wsp-section__justify-{{ section.settings.text_alignment }}">
<div class="wsp-section__slider-block">
{%- assign slider_count = 0 -%}
{%- for index in (1..4) -%}
{%- capture image -%}image_{{ forloop.index }}{%- endcapture -%}
{%- capture text -%}text_{{ forloop.index }}{%- endcapture -%}
{%- assign link = '' -%}
{%- if block.settings[text] contains 'href' -%}
{%- assign link_string = block.settings[text] | split: 'href="' | last -%}
{%- assign link = link_string | split: '"' | first -%}
{%- endif -%}
{%- if block.settings[image] != blank or block.settings[text] != blank -%}
{%- assign slider_count = slider_count | plus: 1 -%}
<div class="wsp-section__slide">
{%- if block.settings[link] != blank -%}
<a href="{{ link }}">
{%- endif -%}
{%- capture sizes -%}
(max-width: 480px) {{ block.settings.image_width }}, 50vw
{%- endcapture -%}
{%- if block.settings[image] != blank -%}
{{ block.settings[image] | image_url: width: block.settings[image].width | image_tag: widths: widths, sizes: sizes }}
{%- endif -%}
{%- if block.settings[text] != blank -%}
<div class="wsp-section__text wsp-section__rte">
{{ block.settings[text] }}
</div>
{%- endif -%}
{%- if link != blank -%}
</a>
{%- endif -%}
</div>
{%- endif -%}
{%- endfor -%}
{%- if slider_count == 0 -%}
<style>
.wsp-section__block-id-{{ block.id }} {
display: none;
}
</style>
{%- endif -%}
</div>
</div>
{% when 'feature_range' %}
<style>
.wsp-section__block-id-{{ block.id }} {
--dot-color: {{ block.settings.dot_color }};
--line-color: {{ block.settings.line_color }};
--dot-size: {{ block.settings.dot_size }}px;
--line-size: {{ block.settings.line_size }}px;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__feature-range {
display: grid;
grid-template-columns: 1fr 4fr 1fr;
gap: 12px;
align-items: center;
justify-content: center;
padding: 2rem 0;
}
.wsp-section__block-id-{{ block.id }} input[type=range] {
width: 100%;
appearance: none;
background: var(--line-color);
height: var(--line-size);
min-height: unset;
border: none;
}
.wsp-section__block-id-{{ block.id }} input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: var(--dot-size);
width: var(--dot-size);
border-radius: var(--dot-size);
background: var(--dot-color);
}
.wsp-section__block-id-{{ block.id }} input[type=range]::-moz-range-thumb {
-webkit-appearance: none;
height: var(--dot-size);
width: var(--dot-size);
border-radius: var(--dot-size);
background: var(--dot-color);
}
</style>
<div class="wsp-section__feature-range-container wsp-section__justify-{{ section.settings.text_alignment }}">
<div class="wsp-section__feature-range-title">
<h3 class="wsp-section__small-heading">{{ block.settings.title }}</h3>
</div>
<div class="wsp-section__feature-range">
<div class="wsp-section__text wsp-section__rte">
<p>{{ block.settings.low_range_label }}</p>
</div>
<input type="range" aria-hidden="true" disabled="" id="Flavor" readonly="" min="0" max="10" value="{{ block.settings.level }}">
<div class="wsp-section__text wsp-section__rte">
<p>{{ block.settings.high_range_label }}</p>
</div>
</div>
</div>
{%- when 'collapsible_content' -%}
{%- comment -%}Icons: SVG URI encoded icons{%- endcomment -%}
{%- capture closed_icon -%}
{%- case block.settings.icon_style -%}
{%- when 'plus_minus' -%}
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z' fill='{{ section.settings.text_color | replace: "#", "%23" }}'/%3E%3C/svg%3E")
{%- when 'caret' -%}
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z' fill='{{ section.settings.text_color | replace: "#", "%23" }}'/%3E%3C/svg%3E")
{%- when 'plus_minus_square' -%}
url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m21 3.998c0-.478-.379-1-1-1h-16c-.62 0-1 .519-1 1v16c0 .621.52 1 1 1h16c.478 0 1-.379 1-1zm-16.5.5h15v15h-15zm6.75 6.752h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z' fill-rule='nonzero' fill='{{ section.settings.text_color | replace: "#", "%23" }}'/%3E%3C/svg%3E")
{%- endcase -%}
{%- endcapture -%}
{%- capture open_icon -%}
{%- case block.settings.icon_style -%}
{%- when 'plus_minus' -%}
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 10h24v4h-24z' fill='{{ section.settings.text_color | replace: "#", "%23" }}'/%3E%3C/svg%3E")
{%- when 'caret' -%}
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z' fill='{{ section.settings.text_color | replace: "#", "%23" }}'/%3E%3C/svg%3E")
{%- when 'plus_minus_square' -%}
url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m21 4c0-.478-.379-1-1-1h-16c-.62 0-1 .519-1 1v16c0 .621.52 1 1 1h16c.478 0 1-.379 1-1zm-16.5.5h15v15h-15zm11.75 6.752h-8.5c-.414 0-.75.336-.75.75s.336.75.75.75h8.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75z' fill-rule='nonzero' fill='{{ section.settings.text_color | replace: "#", "%23" }}'/%3E%3C/svg%3E");
{%- endcase -%}
{%- endcapture -%}
<style>
#DP--{{ section_id }} .wsp-section__block--collapsible_content + .wsp-section__block--collapsible_content {
margin-top: 0;
}
#DP--{{ section_id }} .wsp-section__block--collapsible_content + .wsp-section__block--collapsible_content .wsp-section__accordion {
border-top: 0;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__accordion {
border-top: thin solid {{ section.settings.text_color }};
border-bottom: thin solid {{ section.settings.text_color }};
}
.wsp-section__block-id-{{ block.id }} .wsp-section__question {
position: relative;
cursor: pointer;
display: block;
{%- if section.settings.text_alignment == 'left' -%}padding: 10px 25px 10px 0;{%- else -%}padding: 10px 25px 10px 25px;{%- endif -%}
color: {{ section.settings.text_color }};
}
.wsp-section__block-id-{{ block.id }} .wsp-section__small-heading {
margin: 0;
font-size: calc(var(--dp-g-small-heading-size, var(--dp-small-heading-size, 24px)) * {{ section.settings.text_size | times: 0.008 }});
{%- if section.settings.override_theme_font != blank -%}
font-family: var(--heading-font);
font-weight: var(--heading-font-weight);
font-style: var(--heading-font-style);
{%- endif -%}
}
.wsp-section__block-id-{{ block.id }} .wsp-section__question::-webkit-details-marker {
display: none;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__accordion[open] > .wsp-section__question:after {
background-image: {{ open_icon }};
}
.wsp-section__block-id-{{ block.id }} .wsp-section__question:after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
height: 20px;
width: 20px;
background-image: {{ closed_icon }};
background-size: contain;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__answer {
padding-top: 10px;
margin-bottom: 0;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__inner-answer {
padding: 10px;
padding-top: 0;
}
</style>
<details class="wsp-section__accordion wsp-section__icon-style-{{ block.settings.icon_style }}" {%- if block.settings.show_open == true -%} open {%- endif -%}>
<summary class="wsp-section__question">
<h3 class="wsp-section__small-heading">{{ block.settings.title }}</h3>
</summary>
<div class="wsp-section__answer">
<div class="wsp-section__inner-answer wsp-section__text wsp-section__rte">
{{ block.settings.text }}
</div>
</div>
</details>
{%- when 'fancy_heading' -%}
<style>
{%- if block.settings.highlight_enable_custom_font != blank -%}
{{ block.settings.highlight_custom_font | font_face: font_display: 'swap' }}
{{ block.settings.highlight_custom_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}
{{ block.settings.highlight_custom_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}
{{ block.settings.highlight_custom_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}
.wsp-section__block-id-{{ block.id }} {
--highlight-custom-font: {{ block.settings.highlight_custom_font.family }}, {{ block.settings.highlight_custom_font.fallback_families }};
--highlight-custom-font-weight: {{ block.settings.highlight_custom_font.weight }};
--highlight-custom-font-style: {{ block.settings.highlight_custom_font.style }};
}
{% endif %}
{%- assign highlight_background_text_color_alpha = block.settings.highlight_background_color | color_extract: 'alpha' -%}
{%- assign highlight_text_color_alpha = block.settings.highlight_text_color | color_extract: 'alpha' -%}
{%- assign block_heading_alpha = block.settings.block_heading_color | color_extract: 'alpha' -%}
.wsp-section__block-id-{{ block.id }} .wsp-section__heading {
margin: 0;
line-height: var(--dp-g-heading-line-height, var(--dp-heading-line-height, calc(3px + 2ex + 3px)));
{%- if block_heading_alpha != 0 -%}
color: {{ block.settings.block_heading_color }};
{%- endif -%}
{%- if block.settings.block_heading_size != blank -%}
font-size: calc({{ block.settings.block_heading_size }} * {{ section.settings.text_size | times: 0.01 }});
{%- else -%}
font-size: calc(var(--dp-g-heading-size, var(--dp-heading-size, 35px)) * {{ section.settings.text_size | times: 0.01 }});
{%- endif -%}
{%- if section.settings.override_theme_font != blank -%}
font-family: var(--heading-font);
font-weight: var(--heading-font-weight);
font-style: var(--heading-font-style);
{%- endif -%}
}
.wsp-section__block-id-{{ block.id }} .wsp-section__fancy {
position: relative;
{%- if block.settings.highlight_heading_size != blank -%}
font-size: calc({{ block.settings.highlight_heading_size }} * {{ section.settings.text_size | times: 0.01 }});
{%- else -%}
font-size: calc(var(--dp-g-heading-size, var(--dp-heading-size, 35px)) * {{ section.settings.text_size | times: 0.01 }});
{%- endif -%}
{%- if block.settings.highlight_enable_custom_font -%}
font-family: var(--highlight-custom-font);
font-weight: var(--highlight-custom-font-weight);
font-style: var(--highlight-custom-font-style);
{%- elsif section.settings.override_theme_font != blank -%}
font-family: var(--heading-font);
font-weight: var(--heading-font-weight);
font-style: var(--heading-font-style);
{%- endif -%}
background-color: {%- if highlight_background_text_color_alpha != 0 -%}
{{ block.settings.highlight_background_color }}
{%- endif -%};
color: {%- if highlight_text_color_alpha != 0 -%}
{{ block.settings.highlight_text_color }}
{%- endif -%};
}
{%- if block.settings.custom_css != blank -%}
{%- assign custom_block_declarations = block.settings.custom_css | split: '}' -%}
{%- for declaration in custom_block_declarations -%}
{%- if declaration contains '{' -%}
.wsp-section__block-id-{{ block.id }} {{ declaration }} }
{%- endif -%}
{%- endfor -%}
{%- endif -%}
@media (max-width: 480px) {
.wsp-section__block-id-{{ block.id }} .wsp-section__heading {
{%- if block.settings.block_heading_size != blank -%}
font-size: min({{ block.settings.block_heading_size }}, 50px);
{%- endif -%}
}
}
</style>
{%- if block.settings.title != blank -%}
<{{- block.settings.heading_level }} class="wsp-section__heading">
{{ block.settings.title | replace: '[', '<span class="wsp-section__fancy">' | replace: ']', '</span>' }}
</{{- block.settings.heading_level -}}>
{%- endif -%}
{%- when 'video' -%}
<style>
.wsp-section__block-id-{{ block.id }} video {
width: 100% !important;
height: auto !important;
}
</style>
<div class="wsp-section__video__wrapper">
{%- assign video = block.settings.video -%}
<video width="{{ video.aspect_ratio | times: 100 }}" height="100"
{% if block.settings.autoplay %}autoplay muted{% endif %} playsinline
{% if block.settings.loop %}loop{% endif %}
{% if block.settings.show_controls %}controls controlsList="nodownload"{% endif %}
loading="lazy" poster="{{ video.preview_image | image_url: width: 2800 }}">
{%- for source in video.sources -%}
{%- if source.format == 'mp4' or source.format == 'mov' -%}<source src="{{ source.url }}">{%- endif -%}
{%- endfor -%}
</video>
</div>
{%- when 'newsletter' -%}
<style>
{%- assign button_alpha = block.settings.button_background_color | color_extract: 'alpha' -%}
.wsp-section__block-id-{{ block.id }} .wsp-section__form {
--form-gap: 5px;
width: 100%;
display: flex;
flex-wrap: wrap;
gap: calc(var(--form-gap) * 2);
}
.wsp-section__block-id-{{ block.id }} .wsp-section__form-text {
color: inherit;
font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.01 }});
}
.wsp-section__block-id-{{ block.id }} .wsp-section__form input {
margin: unset;
padding: 0.8em;
font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.01 }});
}
.wsp-section__block-id-{{ block.id }} .wsp-section__form input[type="text"],
.wsp-section__block-id-{{ block.id }} .wsp-section__form input[type="email"] {
padding: 0.8em;
background: transparent;
border: thin solid {{ section.settings.text_color }};
color: {{ section.settings.text_color }};
{%- if section.settings.override_theme_font != blank -%}
font-family: var(--main-font);
font-weight: var(--main-font-weight);
font-style: var(--main-font-style);
{%- endif -%}
}
.wsp-section__form--{{ block.id }} input {
width: 100%;
}
{%- if block.settings.show_first_name and block.settings.show_last_name -%}
.wsp-section__form--{{ block.id }}-compact .wsp-section__newsletter_first-name,
.wsp-section__form--{{ block.id }}-compact .wsp-section__newsletter_last-name {
width: calc(50% - var(--form-gap));
}
{%- endif -%}
.wsp-section__form--{{ block.id }}-compact .wsp-section__newsletter_email {
width: calc(70% - var(--form-gap));
}
.wsp-section__form--{{ block.id }}-compact .wsp-section__button {
width: calc(30% - var(--form-gap));
}
.wsp-section__block-id-{{ block.id }} input::placeholder {
opacity: 0.6;
color: {{ section.settings.text_color }};
{%- if section.settings.override_theme_font != blank -%}
font-family: var(--main-font);
font-weight: var(--main-font-weight);
font-style: var(--main-font-style);
{%- endif -%}
}
.wsp-section__block-id-{{ block.id }} .wsp-section__button {
justify-content: center;
text-align: center;
transition: all 0.3s ease-in-out;
border: thin solid;
border-radius: {{ block.settings.button_radius }}px;
color: {{ block.settings.button_label_color }};
font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.01 }});
border-color: {%- if button_alpha != 0 -%}{{ block.settings.button_background_color }}{%- else -%}{{ block.settings.button_label_color }}{%- endif -%};
background-color: {{ block.settings.button_background_color }};
{%- if section.settings.override_theme_font != blank -%}
font-family: var(--main-font);
font-weight: var(--main-font-weight);
font-style: var(--main-font-style);
{%- endif -%}
}
.wsp-section__block-id-{{ block.id }} .wsp-section__button:hover {
opacity: 1;
{%- if button_alpha != 0 -%}
background-color: {{ block.settings.button_background_color | color_darken: 10 }};
border-color: transparent;
{%- else -%}
background-color: {{ block.settings.button_label_color | color_modify: 'alpha', 0.1 }}
{%- endif -%};
}
</style>
{%- capture form_id -%}wsp-section__form-{{ section_id }}{%- endcapture -%}
{%- form 'customer', id: form_id -%}
{%- comment -%} Error and success messages for submitted form {%- endcomment -%}
<div class="wsp-section__form-response wsp-section__text">
{%- if form.posted_successfully? -%}
<p class="wsp-section__form-reply--success">{{ 'success' | t }}</p>
{%- elsif form.errors -%}
{%- for field in form.errors -%}
<p class="wsp-section__form-reply--error">{{ field }} - {{ form.errors.messages[field] }}</p>
{%- endfor -%}
{%- endif -%}
</div>
{%- comment -%} Hidden newsletter fields {%- endcomment -%}
<input type="hidden" name="contact[tags]" value="newsletter"/>
<input type="hidden" name="challenge" value="false" />
<div class="wsp-section__form wsp-section__form--{{ block.id }} wsp-section__form--{{ block.id }}-{{ block.settings.layout }}">
{%- if block.settings.show_first_name -%}
<label class="wsp-section__visually-hidden" for="first-name-{{ block.id }}">{{ block.settings.first_name_label }}</label>
<input class="wsp-section__newsletter_first-name" type="text" name="contact[first_name]" id="first-name-{{ block.id }}" placeholder="{{ block.settings.first_name_label }}" />
{%- endif -%}
{%- if block.settings.show_last_name -%}
<label class="wsp-section__visually-hidden" for="last-name-{{ block.id }}">{{ block.settings.last_name_label }}</label>
<input class="wsp-section__newsletter_last-name" type="text" name="contact[last_name]" id="last-name-{{ block.id }}" placeholder="{{ block.settings.last_name_label }}" />
{%- endif -%}
<label class="wsp-section__visually-hidden" for="email-{{ block.id }}">{{ block.settings.email_label }}</label>
<input class="wsp-section__newsletter_email" type="email" name="contact[email]" required id="email-{{ block.id }}" placeholder="{{ block.settings.email_label }}" />
<input class="wsp-section__button" type="submit" value="{{ block.settings.submit_label }}" />
</div>
{%- endform -%}
{%- when 'list' -%}
<style>
.wsp-section__block-id-{{ block.id }} .wsp-section__list {
margin: 0;
{%- case block.settings.list_style -%}
{%- when 'decimal' -%}
list-style: decimal;
{%- when 'square' -%}
list-style: square;
{%- when 'circle' -%}
list-style: circle;
{%- else -%}
list-style: inherit;
{%- endcase -%}
}
</style>
{%- assign list = block.settings.text | split: '**' -%}
<div class="wsp-section__list-wrapper wsp-section__text wsp-section__rte">
<ul class="wsp-section__list wsp-section__text-alignment-left">
{%- for list_item in list -%}
{%- if forloop.first == false -%}
<li>{{ list_item }}</li>
{%- endif -%}
{%- endfor -%}
</ul>
</div>
{%- when 'icons' -%}
<style>
.wsp-section__block-id-{{ block.id }} .wsp-section__icons {
--flex-gap: {{ block.settings.gap }}px;
gap: var(--flex-gap);
flex-wrap: wrap;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__icon {
--flex-items: {{ 100.00 | divided_by: block.settings.icon_width }};
text-align: center;
flex: 0 1 calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
}
.wsp-section__block-id-{{ block.id }} .wsp-section__image__wrapper {
position: relative;
width: {{ block.settings.image_size }}%;
height: auto;
display: inline-block;
font-size: 0;
}
.wsp-section__block-id-{{ block.id }} svg.wsp-section__svg-sizer {
width: 100%;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__small-heading + .wsp-section__icon-text {
margin-top: 5px;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__icon a,
.wsp-section__block-id-{{ block.id }} .wsp-section__icon p {
color: {{ section.settings.text_color }};
line-height: 1.2;
margin: 0;
text-decoration: none;
}
{%- if block.settings.icon_layout == 'left' -%}
.wsp-section__block-id-{{ block.id }} .wsp-section__icon {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__image__wrapper {
flex: 0 0 {{block.settings.image_size }}%;
max-width: {{block.settings.image_size }}%;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__icon-content {
flex: 1 1 auto;
text-align: left;
}
{%- elsif block.settings.icon_layout == 'top' -%}
.wsp-section__block-id-{{ block.id }} .wsp-section__icon {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__icon-content {
text-align: center;
}
{%- endif -%}
@media (max-width: 767px) {
.wsp-section__block-id-{{ block.id }} .wsp-section__icon {
--flex-items: {{ 100.00 | divided_by: block.settings.mobile_icon_width }};
}
{%- if block.settings.mobile_icon_layout == 'left' -%}
.wsp-section__block-id-{{ block.id }} .wsp-section__icon {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__image__wrapper {
flex: 0 0 {{block.settings.image_size }}%;
max-width: {{block.settings.image_size }}%;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__icon-content {
flex: 1 1 auto;
text-align: left;
}
{%- elsif block.settings.mobile_icon_layout == 'top' -%}
.wsp-section__block-id-{{ block.id }} .wsp-section__icon {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__icon-content {
text-align: center;
}
{%- endif -%}
}
</style>
<div class="wsp-section__flex wsp-section__icons {% if block.settings.icon_alignment == 'default' %}wsp-section__justify-{{ section.settings.text_alignment }}{% else %}wsp-section__justify-{{ block.settings.icon_alignment }}{% endif %}">
{%- for index in (1..6) -%}
{%- capture icon -%}icon_{{ forloop.index }}{%- endcapture -%}
{%- capture heading -%}heading_{{ forloop.index }}{%- endcapture -%}
{%- capture text -%}text_{{ forloop.index }}{%- endcapture -%}
{%- capture link -%}link_{{ forloop.index }}{%- endcapture -%}
{%- if block.settings[icon] != blank -%}
<div class="wsp-section__flex-item wsp-section__icon wsp-section__rte">
<a {% if block.settings[link] != blank %}href="{{ block.settings[link] }}"{% endif %} class="wsp-section__image__wrapper">
<svg class="wsp-section__svg-sizer" viewBox="0 0 {{ block.settings[icon].width }} {{ block.settings[icon].height }}"></svg>
{%- capture sizes -%}
(max-width: 480px) calc(100vw / {{ block.settings.icon_width }}), calc({{ section.settings.text_width | default: 50 }}vw / {{ block.settings.icon_width }})
{%- endcapture -%}
{{ block.settings[icon] | image_url: width: block.settings[icon].width | image_tag: widths: widths, sizes: sizes }}
</a>
{%- if block.settings[heading] != blank or block.settings[text] != blank -%}
<div class="wsp-section__icon-content">
{%- if block.settings[heading] != blank -%}
<h4 class="wsp-section__icon-heading wsp-section__small-heading">
{%- if block.settings[link] != blank -%}
<a href="{{ block.settings[link] }}">
{%- endif -%}
{{ block.settings[heading] }}
{%- if block.settings[link] != blank -%}
</a>
{%- endif -%}
</h4>
{%- endif -%}
{%- if block.settings[text] != blank -%}
<p class="wsp-section__icon-text wsp-section__rte">
{{ block.settings[text] }}
</p>
{%- endif -%}
</div>
{%- endif -%}
</div>
{%- endif -%}
{%- endfor -%}
</div>
{%- when 'text_columns' -%}
<style>
.wsp-section__block-id-{{ block.id }} .wsp-section__columns {
gap: {{ block.settings.gap }}px;
}
</style>
<div class="wsp-section__flex wsp-section__columns wsp-section__flex--2-per-row wsp-section__justify-{{ block.settings.text_alignment }}">
{%- for index in (1..2) -%}
{%- capture heading -%}heading_{{ forloop.index }}{%- endcapture -%}
{%- capture column -%}column_{{ forloop.index }}{%- endcapture -%}
<div class="wsp-section__flex-item">
{%- if block.settings[heading] != blank -%}
<h3 class="wsp-section__small-heading wsp-section__column-heading">{{ block.settings[heading] }}</h3>
{%- endif -%}
{%- if block.settings[column] != blank -%}
<div class="wsp-section__text wsp-section__rte">
{{ block.settings[column] }}
</div>
{%- endif -%}
</div>
{%- endfor -%}
</div>
{%- when 'countdown_timer' -%}
{%- comment -%} Schedule: timezone value {%- endcomment -%}
{%- assign timezone = block.settings.timezone | split: '~' | first | strip -%}
<style>
.wsp-section__block-id-{{ block.id }} .wsp-section__clock-wrap {
max-width: 450px;
flex: 1 0 auto;
margin: 0 auto;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__clock {
grid-template-columns: repeat(4, minmax(0, 1fr));
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
{%- if section.settings.override_theme_font != blank -%}
font-family: var(--main-font);
font-weight: var(--main-font-weight);
font-style: var(--main-font-style);
{%- endif -%}
color: {{ section.settings.text_color }};
border: thin solid {{ section.settings.text_color }};
font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.01 }});
}
.wsp-section__block-id-{{ block.id }} .wsp-section__measurement {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 20px;
border-left: thin solid {{ section.settings.text_color }};
}
{% comment %} Style options {% endcomment %}
.wsp-section__block-id-{{ block.id }} .wsp-section__clock.wsp-section__clock--style_1 {
border: none;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__clock--style_1 .wsp-section__measurement {
border-left: none;
}
/*---*/
.wsp-section__block-id-{{ block.id }} .wsp-section__clock.wsp-section__clock--style_2 {
border: none;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__clock--style_2 .wsp-section__measurement {
border-left: thin solid {{ section.settings.text_color }};
}
/*---*/
.wsp-section__block-id-{{ block.id }} .wsp-section__clock.wsp-section__clock--style_3 {
border: none;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__clock--style_3 .wsp-section__measurement {
border-left: none;
padding: 8px 16px;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__clock--style_3 .wsp-section__measurement .wsp-section__number {
border-bottom: thin solid {{ section.settings.text_color }};
margin-bottom: 12px;
}
/*---*/
.wsp-section__block-id-{{ block.id }} .wsp-section__clock.wsp-section__clock--style_4 {
border: thin solid {{ section.settings.text_color }};
}
.wsp-section__block-id-{{ block.id }} .wsp-section__clock--style_4 .wsp-section__measurement {
border-left: thin solid {{ section.settings.text_color }};
}
{% comment %} end Style options {% endcomment %}
.wsp-section__block-id-{{ block.id }} .wsp-section__measurement:first-child {
border-left: none;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__number {
width: 100%;
text-align: center;
font-weight: bold;
padding: 5px 0;
font-size: 1.5em;
min-height: 2em;
display: flex;
justify-content: center;
align-items: center;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__label {
font-size: clamp(9px, 0.5em, 45px);
width: max-content;
padding: 0.5em 0.8em;
}
</style>
<div class="wsp-section__clock-wrap"
data-timer-start="{{ block.settings.start_month }} {{ block.settings.start_day }} {{ block.settings.start_year }} {{ block.settings.start_time }} {{ timezone }}"
data-timer-end="{{ block.settings.end_month }} {{ block.settings.end_day }} {{ block.settings.end_year }} {{ block.settings.end_time }} {{ timezone }}">
<div class="wsp-section__clock wsp-section__grid wsp-section__clock--{{ block.settings.style_option }}">
<div class="wsp-section__measurement wsp-section__days">
<span class="wsp-section__number">--</span>
<span class="wsp-section__label">{{ 'days' | t }}</span>
</div>
<div class="wsp-section__measurement wsp-section__hours">
<span class="wsp-section__number">--</span>
<span class="wsp-section__label">{{ 'hours' | t }}</span>
</div>
<div class="wsp-section__measurement wsp-section__minutes">
<span class="wsp-section__number">--</span>
<span class="wsp-section__label">{{ 'minutes' | t }}</span>
</div>
<div class="wsp-section__measurement wsp-section__seconds">
<span class="wsp-section__number">--</span>
<span class="wsp-section__label wsp-section__seconds-text">{{ 'seconds' | t }}</span>
</div>
</div>
</div>
{%- when 'small_text' -%}
{%- if block.settings.small_text != blank -%}
<div class="wsp-section__small-text wsp-section__rte">
{{ block.settings.small_text }}
</div>
{%- endif -%}
{%- when 'heading' -%}
<style>
{%- if block.settings.enable_custom_font != blank -%}
{{ block.settings.custom_font | font_face: font_display: 'swap' }}
{{ block.settings.custom_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}
{{ block.settings.custom_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}
{{ block.settings.custom_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}
.wsp-section__block-id-{{ block.id }} {
--custom-font: {{ block.settings.custom_font.family }}, {{ block.settings.custom_font.fallback_families }};
--custom-font-weight: {{ block.settings.custom_font.weight }};
--custom-font-style: {{ block.settings.custom_font.style }};
}
{% endif %}
{%- assign block_heading_alpha = block.settings.block_heading_color | color_extract: 'alpha' -%}
.wsp-section__block-id-{{ block.id }} .wsp-section__heading {
margin: 0;
line-height: var(--dp-g-heading-line-height, var(--dp-heading-line-height, calc(3px + 2ex + 3px)));
{%- if block_heading_alpha != 0 -%}
color: {{ block.settings.block_heading_color }};
{%- endif -%}
{%- if block.settings.block_heading_size != blank -%}
font-size: calc({{ block.settings.block_heading_size }} * {{ section.settings.text_size | times: 0.01 }});
{%- else -%}
font-size: calc(var(--dp-g-heading-size, var(--dp-heading-size, 35px)) * {{ section.settings.text_size | times: 0.01 }});
{%- endif -%}
{%- if block.settings.enable_custom_font != blank -%}
font-family: var(--custom-font);
font-weight: var(--custom-font-weight);
font-style: var(--custom-font-style);
{%- elsif section.settings.override_theme_font != blank -%}
font-family: var(--heading-font);
font-weight: var(--heading-font-weight);
font-style: var(--heading-font-style);
{%- endif -%}
}
@media (max-width: 480px) {
.wsp-section__block-id-{{ block.id }} .wsp-section__heading {
{%- if block.settings.block_heading_size != blank -%}
font-size: min({{ block.settings.block_heading_size }}, 50px);
{%- endif -%}
}
}
</style>
{%- if block.settings.title != blank -%}
<{{- block.settings.heading_level }} class="wsp-section__heading">
{{ block.settings.title | newline_to_br }}
</{{- block.settings.heading_level -}}>
{%- endif -%}
{%- when 'text' -%}
{%- if block.settings.text != blank -%}
<div class="wsp-section__text wsp-section__rte">
{{ block.settings.text }}
</div>
{%- endif -%}
{%- when 'buttons' -%}
<style>
{%- assign button_alpha_primary = block.settings.button_background_color_primary | color_extract: 'alpha' -%}
{%- assign button_alpha_secondary = block.settings.button_background_color_secondary | color_extract: 'alpha' -%}
.wsp-section__block-id-{{ block.id }} .wsp-section__button-area {
display: grid;
grid-gap: 1.3em;
{%- if section.settings.text_alignment == 'center' -%}
margin: 0 auto;
{%- elsif section.settings.text_alignment == 'right' -%}
margin: 0 0 0 auto;
{%- endif -%}
{%- if block.settings.button_label_primary != blank and block.settings.button_label_secondary != blank -%}
grid-template-columns: repeat(2, 1fr);
{%- else -%}
grid-template-columns: 1fr;
max-width: 200px;
{%- endif -%}
max-width: 100%;
width: fit-content;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__button {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
text-decoration: none;
padding: var(--dp-button-padding, 0.5em 1.2em);
margin-top: 0;
border: thin solid;
transition: all 0.3s ease-in-out;
border-radius: {{ block.settings.button_radius }}px;
line-height: var(--dp-g-button-line-height, var(--dp-button-line-height, calc(3px + 2ex + 3px)));
font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.01 }});
{%- if section.settings.override_theme_font != blank -%}
font-family: var(--main-font);
font-weight: var(--main-font-weight);
font-style: var(--main-font-style);
{%- endif -%}
}
.wsp-section__block-id-{{ block.id }} .wsp-section__button-primary {
color: {{ block.settings.button_label_color_primary }};
border-color: {%- if button_alpha_primary != 0 -%}{{ block.settings.button_background_color_primary }}{%- else -%}{{ block.settings.button_label_color_primary }}{%- endif -%};
background-color: {{ block.settings.button_background_color_primary }};
}
.wsp-section__block-id-{{ block.id }} .wsp-section__button-secondary {
color: {{ block.settings.button_label_color_secondary }};
border-color: {%- if button_alpha_secondary != 0 -%}{{ block.settings.button_background_color_secondary }}{%- else -%}{{ block.settings.button_label_color_secondary }}{%- endif -%};
background-color: {{ block.settings.button_background_color_secondary }};
}
.wsp-section__block-id-{{ block.id }} .wsp-section__button-primary:hover {
opacity: 1;
{%- if button_alpha_primary != 0 -%}
background-color: {{ block.settings.button_background_color_primary | color_darken: 10 }};
border-color: transparent;
{%- else -%}
background-color: {{ block.settings.button_label_color_primary | color_modify: 'alpha', 0.1 }}
{%- endif -%};
}
.wsp-section__block-id-{{ block.id }} .wsp-section__button-secondary:hover {
opacity: 1;
{%- if button_alpha_secondary != 0 -%}
background-color: {{ block.settings.button_background_color_secondary | color_darken: 10 }};
border-color: transparent;
{%- else -%}
background-color: {{ block.settings.button_label_color_secondary | color_modify: 'alpha', 0.1 }}
{%- endif -%};
}
@media (max-width: 480px) {
.wsp-section__block-id-{{ block.id }} div.wsp-section__button-area {
grid-template-columns: 1fr;
width: 100%;
gap: 10px;
}
}
</style>
<div class="wsp-section__button-area">
{%- if block.settings.button_label_primary != blank -%}
<a class="wsp-section__button wsp-section__button-primary" {%- if block.settings.link_primary != blank -%} href="{{ block.settings.link_primary }}" {%- endif -%} {% if block.settings.external_link_primary %}target="_blank"{% endif %}>{{ block.settings.button_label_primary }}</a>
{%- endif -%}
{%- if block.settings.button_label_secondary != blank -%}
<a class="wsp-section__button wsp-section__button-secondary" {%- if block.settings.link_secondary != blank -%}href="{{ block.settings.link_secondary }}"{%- endif -%} {% if block.settings.external_link_secondary %}target="_blank"{% endif %}>{{ block.settings.button_label_secondary }}</a>
{%- endif -%}
</div>
{%- when 'inset_image' -%}
<style>
.wsp-section__block-id-{{ block.id }} .wsp-section__image__wrapper {
width: {{ block.settings.inset_image_size }}%;
display: inline-block;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__image__wrapper svg {
width: 100%;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__image__wrapper path {
fill: {{ section.settings.text_color }};
}
.wsp-section__block-id-{{ block.id }} .wsp-section__item img {
width: 100%;
object-fit: contain;
}
</style>
{%- capture placeholder_image -%}
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15.651 12.851c-2.13 1.94-5.17 2.91-9.07 2.91-.91 0-1.87-.04-2.88-.17-.38.86-.6 1.71-.6 2.51 0 .55-.45 1-1 1s-1-.45-1-1c0-.24.01-.48.04-.72.02-.13.03-.26.06-.39.18-1.13.64-2.27 1.29-3.39 2.32-4.02 9.3-8.68 12.61-9.5-4.76-.03-12 3-13.91 6.93 0-2.89 2.3-6.42 5.46-8.38 4.54-2.82 10.47-1.14 12.06 0 .23.16.37.42.38.7.08 2.31-.25 6.62-3.44 9.5z" fill="#5C5F62"/></svg>
{%- endcapture -%}
<div class="wsp-section__inset-image wsp-section__flex wsp-section__justify-{%- if block.settings.image_alignment != 'default' -%}{{ block.settings.image_alignment }}{%- else -%}{{ section.settings.text_alignment }}{%- endif -%}">
{%- if block.settings.inset_image != blank -%}
<div class="wsp-section__image__wrapper">
<svg viewBox="0 0 {{ block.settings.inset_image.width }} {{ block.settings.inset_image.height }}"></svg>
{%- capture sizes -%}
(max-width: 480px) {{ block.settings.inset_image_size }}vw,(max-width: 767px) {{ block.settings.inset_image_size }}vw, {{ 0.5 | times: block.settings.inset_image_size | divided_by: 100.0 | times: 100.0 | round }}vw
{%- endcapture -%}
{{ block.settings.inset_image | image_url: width: 1000 | image_tag: widths: widths, sizes: sizes }}
</div>
{%- else -%}
<div class="wsp-section__image__wrapper">
{{ placeholder_image | strip }}
</div>
{%- endif -%}
</div>
{%- when 'divider' -%}
<style>
.wsp-section__block-id-{{ block.id }} {
padding-top: {{ block.settings.padding_top }}px;
padding-bottom: {{ block.settings.padding_bottom }}px;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__divider {
height: 0;
border: none;
background: transparent;
{%- if section.settings.text_alignment == 'left' -%}
margin: 0;
{%- elsif section.settings.text_alignment == 'right' -%}
margin: 0 0 0 auto;
{%- else -%}
margin: 0 auto;
{%- endif -%}
width: {{ block.settings.base_width }}%;
border-top: {{ block.settings.thickness }}px {{ block.settings.style }} {{ block.settings.divider_color }};
}
</style>
<hr class="wsp-section__divider" aria-hidden="true">
{%- when 'liquid' -%}
{{ block.settings.liquid }}
{%- when '@app' -%}
{% render block %}
{%- when 'spacer' -%}
<style>
#shopify-section-{{ section_id }} #DP--{{ section_id }} .wsp-section__block-id-{{ block.id }},
#shopify-section-{{ section_id }} #DP--{{ section_id }} .wsp-section__block-id-{{ block.id }} + .wsp-section__block {
margin-top: 0;
}
.wsp-section__block-id-{{ block.id }} .wsp-section__spacer {
height: {{ block.settings.size }}px;
display: block !important;
}
@media (max-width: 480px) {
.wsp-section__block-id-{{ block.id }} .wsp-section__spacer {
height: {{ block.settings.size | times: 0.75 | round: 0 }}px;
}
}
</style>
<div class="wsp-section__spacer" aria-hidden="true"></div>
{%- endcase -%}
</div>
{%- endfor -%}
</div>
</div>
<!-- END Blocks Loop -->
</div>
</div>
</section>
{%- endcapture -%}
{{ minify | strip_newlines }}
{% schema %}
{
"name": "Comparison slider text",
"class": "DP__comparison-slider-text",
"blocks": [
{
"type": "heading",
"name": "Heading",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Attention-grabbing headline"
},
{
"type": "color",
"id": "block_heading_color",
"label": "Heading color"
},
{
"type": "text",
"id": "block_heading_size",
"label": "Base text size",
"info": "Set custom base size for heading. Leave empty to default to base size of 35px. Base size is affected by section text size setting."
},
{
"type": "checkbox",
"id": "enable_custom_font",
"label": "Enable custom font",
"default": false
},
{
"type": "font_picker",
"id": "custom_font",
"label": "Custom font",
"default": "abel_n4"
},
{
"type": "header",
"content": "Advanced"
},
{
"type": "select",
"id": "heading_level",
"label": "Heading level",
"options": [
{
"value": "h1",
"label": "h1"
},
{
"value": "h2",
"label": "h2"
},
{
"value": "h3",
"label": "h3"
},
{
"value": "h4",
"label": "h4"
},
{
"value": "h5",
"label": "h5"
},
{
"value": "h6",
"label": "h6"
}
],
"default": "h2",
"info": "The most important heading has the rank 1 (<h1>) and the least important heading has rank 6 (<h6>). Only use one h1 on a page."
}
]
},
{
"type": "fancy_heading",
"name": "Fancy heading",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "[Attention-grabbing] headline"
},
{
"type": "color",
"id": "block_heading_color",
"label": "Heading color"
},
{
"type": "text",
"id": "block_heading_size",
"label": "Base text size",
"info": "Leave empty to default to base size of 35px."
},
{
"type": "header",
"content": "Fancy text"
},
{
"type": "paragraph",
"content": "Use square brackets [] around text that you would like to target."
},
{
"type": "color",
"id": "highlight_text_color",
"label": "Text",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "highlight_background_color",
"label": "Background",
"default": "#000000"
},
{
"type": "text",
"id": "highlight_heading_size",
"label": "Base text size",
"placeholder": "eg. 40px",
"info": "Set custom size for text in square brackets."
},
{
"type": "checkbox",
"id": "highlight_enable_custom_font",
"label": "Enable custom font on selected text",
"default": false
},
{
"type": "font_picker",
"id": "highlight_custom_font",
"label": "Custom font",
"default": "abel_n4"
},
{
"type": "header",
"content": "Advanced"
},
{
"type": "select",
"id": "heading_level",
"label": "Heading level",
"options": [
{
"value": "h1",
"label": "h1"
},
{
"value": "h2",
"label": "h2"
},
{
"value": "h3",
"label": "h3"
},
{
"value": "h4",
"label": "h4"
},
{
"value": "h5",
"label": "h5"
},
{
"value": "h6",
"label": "h6"
}
],
"default": "h2",
"info": "The most important heading has the rank 1 (<h1>) and the least important heading has rank 6 (<h6>). Only use one h1 on a page."
},
{
"type": "html",
"id": "custom_css",
"label": "CSS",
"info": "Target the text in the square brackets with the class .wsp-section__fancy"
}
]
},
{
"type": "spacer",
"name": "Spacer",
"settings": [
{
"type": "range",
"id": "size",
"label": "Spacing height",
"min": 0,
"max": 100,
"default": 40,
"unit": "px"
}
]
},
{
"type": "divider",
"name": "Divider",
"settings": [
{
"type": "range",
"id": "base_width",
"label": "Width",
"min": 20,
"max": 100,
"step": 5,
"default": 50,
"unit": "%"
},
{
"type": "range",
"id": "thickness",
"label": "Thickness",
"min": 0,
"max": 10,
"default": 1,
"unit": "px"
},
{
"type": "select",
"id": "style",
"label": "Style",
"default": "solid",
"options": [
{
"value": "solid",
"label": "Solid line"
},
{
"value": "dotted",
"label": "Dotted line"
},
{
"value": "dashed",
"label": "Dashed line"
},
{
"value": "double",
"label": "Double line"
}
]
},
{
"type": "header",
"content": "Design"
},
{
"type": "color",
"id": "divider_color",
"label": "Color",
"default": "#FFFFFF"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "range",
"id": "padding_top",
"label": "Padding - top",
"min": 0,
"max": 100,
"default": 40,
"step": 5,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Padding - bottom",
"min": 0,
"max": 100,
"default": 40,
"step": 5,
"unit": "px"
}
]
},
{
"type": "text",
"name": "Regular text",
"settings": [
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Drag and drop block options like heading, text, buttons, dividers, and more.</p>"
}
]
},
{
"type": "collapsible_content",
"name": "Collapsible content",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Shipping information"
},
{
"type": "richtext",
"id": "text",
"label": "Collapsed content",
"default": "<p>Lorem ipsum dolor.</p>"
},
{
"type": "select",
"id": "icon_style",
"label": "Icon style",
"options": [
{
"value": "plus_minus",
"label": "Plus and minus"
},
{
"value": "plus_minus_square",
"label": "Plus and minus buttons"
},
{
"value": "caret",
"label": "Carets"
}
],
"default": "plus_minus_square"
},
{
"type": "checkbox",
"id": "show_open",
"label": "Show open by default",
"default": false
}
]
},
{
"type": "small_text",
"name": "Small text",
"settings": [
{
"type": "richtext",
"id": "small_text",
"label": "Small text",
"default": "<p>New arrivals</p>"
}
]
},
{
"type": "list",
"name": "List",
"settings": [
{
"type": "richtext",
"id": "text",
"label": "List items",
"default": "<p>** Important point number one</p><p>** Next point in the list</p>",
"info": "Use two asterisks (**) to create a new list item"
},
{
"type": "select",
"id": "list_style",
"label": "Style",
"options": [
{
"value": "decimal",
"label": "Numbered"
},
{
"value": "square",
"label": "Square"
},
{
"value": "circle",
"label": "Circle outline"
},
{
"value": "inherit",
"label": "Disc (default)"
}
],
"default": "inherit"
}
]
},
{
"type": "buttons",
"name": "Buttons",
"settings": [
{
"type": "range",
"id": "button_radius",
"label": "Button border radius",
"min": 0,
"max": 50,
"default": 0,
"unit": "px"
},
{
"type": "header",
"content": "Primary button"
},
{
"type": "text",
"id": "button_label_primary",
"label": "Primary button",
"default": "Learn more"
},
{
"type": "url",
"id": "link_primary",
"label": "Primary link"
},
{
"type": "checkbox",
"id": "external_link_primary",
"label": "Open primary link in a new window"
},
{
"type": "color",
"id": "button_label_color_primary",
"label": "Primary button label",
"default": "#121212"
},
{
"type": "color",
"id": "button_background_color_primary",
"label": "Primary button background",
"default": "rgba(0,0,0,0)"
},
{
"type": "header",
"content": "Secondary button"
},
{
"type": "text",
"id": "button_label_secondary",
"label": "Secondary button",
"default": "Shop now"
},
{
"type": "url",
"id": "link_secondary",
"label": "Secondary link"
},
{
"type": "checkbox",
"id": "external_link_secondary",
"label": "Open secondary link in a new window"
},
{
"type": "color",
"id": "button_label_color_secondary",
"label": "Secondary button label",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "button_background_color_secondary",
"label": "Secondary button background",
"default": "#121212"
}
]
},
{
"type": "icons",
"name": "Icons",
"settings": [
{
"type": "range",
"id": "icon_width",
"label": "Icon width",
"default": 50,
"min": 10,
"max": 100,
"unit": "%"
},
{
"type": "range",
"id": "gap",
"min": 0,
"max": 40,
"label": "Spacing gap",
"unit": "px",
"default": 20
},
{
"type": "range",
"id": "image_size",
"min": 10,
"max": 100,
"label": "Image size",
"default": 40,
"unit": "%"
},
{
"type": "select",
"id": "icon_layout",
"label": "Icon layout",
"default": "top",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "left",
"label": "Left"
}
]
},
{
"type": "select",
"id": "icon_alignment",
"label": "Icon alignment",
"default": "default",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
},
{
"value": "default",
"label": "Default"
}
]
},
{
"type": "header",
"content": "Mobile"
},
{
"type": "range",
"id": "mobile_icon_width",
"label": "Icon width",
"default": 50,
"min": 10,
"max": 100,
"unit": "%"
},
{
"type": "select",
"id": "mobile_icon_layout",
"label": "Icon layout",
"default": "top",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "left",
"label": "Left"
}
]
},
{
"type": "header",
"content": "Icon 1"
},
{
"type": "image_picker",
"id": "icon_1",
"label": "Icon 1"
},
{
"type": "text",
"id": "heading_1",
"label": "Heading 1"
},
{
"type": "inline_richtext",
"id": "text_1",
"label": "Text 1"
},
{
"type": "url",
"id": "link_1",
"label": "Link 1"
},
{
"type": "header",
"content": "Icon 2"
},
{
"type": "image_picker",
"id": "icon_2",
"label": "Icon 2"
},
{
"type": "text",
"id": "heading_2",
"label": "Heading 2"
},
{
"type": "inline_richtext",
"id": "text_2",
"label": "Text 2"
},
{
"type": "url",
"id": "link_2",
"label": "Link 2"
},
{
"type": "header",
"content": "Icon 3"
},
{
"type": "image_picker",
"id": "icon_3",
"label": "Icon 3"
},
{
"type": "text",
"id": "heading_3",
"label": "Heading 3"
},
{
"type": "inline_richtext",
"id": "text_3",
"label": "Text 3"
},
{
"type": "url",
"id": "link_3",
"label": "Link 3"
},
{
"type": "header",
"content": "Icon 4"
},
{
"type": "image_picker",
"id": "icon_4",
"label": "Icon 4"
},
{
"type": "text",
"id": "heading_4",
"label": "Heading 4"
},
{
"type": "inline_richtext",
"id": "text_4",
"label": "Text 4"
},
{
"type": "url",
"id": "link_4",
"label": "Link 4"
},
{
"type": "header",
"content": "Icon 5"
},
{
"type": "image_picker",
"id": "icon_5",
"label": "Icon 5"
},
{
"type": "text",
"id": "heading_5",
"label": "Heading 5"
},
{
"type": "inline_richtext",
"id": "text_5",
"label": "Text 5"
},
{
"type": "url",
"id": "link_5",
"label": "Link 5"
},
{
"type": "header",
"content": "Icon 6"
},
{
"type": "image_picker",
"id": "icon_6",
"label": "Icon 6"
},
{
"type": "text",
"id": "heading_6",
"label": "Heading 6"
},
{
"type": "inline_richtext",
"id": "text_6",
"label": "Text 6"
},
{
"type": "url",
"id": "link_6",
"label": "Link 6"
}
]
},
{
"type": "text_columns",
"name": "Text columns",
"settings": [
{
"type": "range",
"id": "gap",
"min": 0,
"max": 40,
"label": "Spacing gap",
"unit": "px",
"default": 10
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"default": "center",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
},
{
"value": "justify",
"label": "Justify"
}
]
},
{
"type": "header",
"content": "Column 1"
},
{
"type": "text",
"id": "heading_1",
"label": "Heading"
},
{
"type": "richtext",
"id": "column_1",
"label": "Text",
"default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero. Curabitur id nulla ut nunc aliquam sodales.</p>"
},
{
"type": "header",
"content": "Column 2"
},
{
"type": "text",
"id": "heading_2",
"label": "Heading"
},
{
"type": "richtext",
"id": "column_2",
"label": "Text",
"default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero. Curabitur id nulla ut nunc aliquam sodales.</p>"
}
]
},
{
"type": "inset_image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "inset_image",
"label": "Image"
},
{
"type": "range",
"id": "inset_image_size",
"label": "Image size",
"default": 10,
"min": 5,
"max": 100,
"step": 5,
"unit": "%"
},
{
"type": "select",
"id": "image_alignment",
"label": "Image alignment",
"default": "default",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
},
{
"value": "default",
"label": "Default"
}
]
}
]
},
{
"type": "newsletter",
"name": "Newsletter form",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Any customers who sign up will have an account created for them in Shopify. [View customers](/admin/customers?query=&accepts_marketing=1)"
},
{
"type": "select",
"id": "layout",
"label": "Layout",
"options": [
{
"value": "stacked",
"label": "Stacked"
},
{
"value": "compact",
"label": "Compact"
}
],
"default": "compact"
},
{
"type": "text",
"id": "email_label",
"label": "Email label",
"default": "Email address"
},
{
"type": "text",
"id": "submit_label",
"label": "Submit label",
"default": "Submit"
},
{
"type": "header",
"content": "First name"
},
{
"type": "checkbox",
"id": "show_first_name",
"label": "Show first name",
"default": false
},
{
"type": "text",
"id": "first_name_label",
"label": "First name label",
"default": "First name"
},
{
"type": "header",
"content": "Last name"
},
{
"type": "checkbox",
"id": "show_last_name",
"label": "Show last name",
"default": false
},
{
"type": "text",
"id": "last_name_label",
"label": "Last name label",
"default": "Last name"
},
{
"type": "header",
"content": "Design"
},
{
"type": "color",
"id": "button_label_color",
"label": "Button label",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "button_background_color",
"label": "Button background",
"default": "#283144"
},
{
"type": "range",
"id": "button_radius",
"label": "Button border radius",
"min": 0,
"max": 50,
"default": 0,
"unit": "px"
}
]
},
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "video",
"id": "video",
"label": "Video"
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Autoplay",
"info": "Video will be muted.",
"default": false
},
{
"type": "checkbox",
"id": "loop",
"label": "Loop video",
"default": false
},
{
"type": "checkbox",
"id": "show_controls",
"label": "Show controls",
"default": true
}
]
},
{
"type": "feature_range",
"name": "Feature range",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Heading"
},
{
"type": "text",
"id": "low_range_label",
"label": "Low range label",
"default": "Mild"
},
{
"type": "text",
"id": "high_range_label",
"label": "High range label",
"default": "Spicy"
},
{
"type": "range",
"id": "level",
"label": "Level",
"default": 5,
"min": 0,
"max": 10,
"step": 0.1
},
{
"type": "header",
"content": "Design"
},
{
"type": "color",
"id": "line_color",
"label": "Line",
"default": "#283144"
},
{
"type": "color",
"id": "dot_color",
"label": "Dot",
"default": "#283144"
},
{
"type": "range",
"id": "line_size",
"label": "Line size",
"default": 1,
"min": 1,
"max": 8
},
{
"type": "range",
"id": "dot_size",
"label": "Dot size",
"default": 18,
"min": 10,
"max": 40
}
]
},
{
"type": "countdown_timer",
"name": "Countdown timer",
"limit": 1,
"settings": [
{
"type": "select",
"id": "style_option",
"label": "Style option",
"default": "style_1",
"options": [
{
"value": "style_1",
"label": "Style 1"
},
{
"value": "style_2",
"label": "Style 2"
},
{
"value": "style_3",
"label": "Style 3"
},
{
"value": "style_4",
"label": "Style 4"
}
]
},
{
"type": "select",
"id": "timezone",
"label": "Timezone",
"default": "-05:00 ~ (GMT-05:00) Eastern Time (US & Canada)",
"options": [
{
"value": "-11:00 ~ (GMT-11:00) International Date Line West",
"label": "(GMT-11:00) International Date Line West"
},
{
"value": "-11:00 ~ (GMT-11:00) Midway Island",
"label": "(GMT-11:00) Midway Island"
},
{
"value": "-11:00 ~ (GMT-11:00) American Samoa",
"label": "(GMT-11:00) American Samoa"
},
{
"value": "-10:00 ~ (GMT-10:00) Hawaii",
"label": "(GMT-10:00) Hawaii"
},
{
"value": "-09:00 ~ (GMT-09:00) Alaska",
"label": "(GMT-09:00) Alaska"
},
{
"value": "-08:00 ~ (GMT-08:00) Pacific Time (US & Canada)",
"label": "(GMT-08:00) Pacific Time (US & Canada)"
},
{
"value": "-08:00 ~ (GMT-08:00) Tijuana",
"label": "(GMT-08:00) Tijuana"
},
{
"value": "-07:00 ~ (GMT-07:00) Mountain Time (US & Canada)",
"label": "(GMT-07:00) Mountain Time (US & Canada)"
},
{
"value": "-07:00 ~ (GMT-07:00) Arizona",
"label": "(GMT-07:00) Arizona"
},
{
"value": "-07:00 ~ (GMT-07:00) Chihuahua",
"label": "(GMT-07:00) Chihuahua"
},
{
"value": "-06:00 ~ (GMT-06:00) Central Time (US & Canada)",
"label": "(GMT-06:00) Central Time (US & Canada)"
},
{
"value": "-06:00 ~ (GMT-06:00) Saskatchewan",
"label": "(GMT-06:00) Saskatchewan"
},
{
"value": "-06:00 ~ (GMT-06:00) Monterrey",
"label": "(GMT-06:00) Monterrey"
},
{
"value": "-05:00 ~ (GMT-05:00) Eastern Time (US & Canada)",
"label": "(GMT-05:00) Eastern Time (US & Canada)"
},
{
"value": "-05:00 ~ (GMT-05:00) Indiana (East)",
"label": "(GMT-05:00) Indiana (East)"
},
{
"value": "-05:00 ~ (GMT-05:00) Bogota",
"label": "(GMT-05:00) Bogota"
},
{
"value": "-05:00 ~ (GMT-05:00) Lima",
"label": "(GMT-05:00) Lima"
},
{
"value": "-05:00 ~ (GMT-05:00) Quito",
"label": "(GMT-05:00) Quito"
},
{
"value": "-04:00 ~ (GMT-04:00) Atlantic Time (Canada)",
"label": "(GMT-04:00) Atlantic Time (Canada)"
},
{
"value": "-04:30 ~ (GMT-04:30) Caracas",
"label": "(GMT-04:30) Caracas"
},
{
"value": "-04:00 ~ (GMT-04:00) La Paz",
"label": "(GMT-04:00) La Paz"
},
{
"value": "-04:00 ~ (GMT-04:00) Santiago",
"label": "(GMT-04:00) Santiago"
},
{
"value": "-03:30 ~ (GMT-03:30) Newfoundland",
"label": "(GMT-03:30) Newfoundland"
},
{
"value": "-03:00 ~ (GMT-03:00) Brasilia",
"label": "(GMT-03:00) Brasilia"
},
{
"value": "-03:00 ~ (GMT-03:00) Buenos Aires",
"label": "(GMT-03:00) Buenos Aires"
},
{
"value": "-04:00 ~ (GMT-04:00) Georgetown",
"label": "(GMT-04:00) Georgetown"
},
{
"value": "-03:00 ~ (GMT-03:00) Greenland",
"label": "(GMT-03:00) Greenland"
},
{
"value": "-01:00 ~ (GMT-01:00) Azores",
"label": "(GMT-01:00) Azores"
},
{
"value": "-01:00 ~ (GMT-01:00) Cape Verde Is.",
"label": "(GMT-01:00) Cape Verde Is."
},
{
"value": "+00:00 ~ (GMT+00:00) Dublin",
"label": "(GMT+00:00) Dublin"
},
{
"value": "+00:00 ~ (GMT+00:00) Edinburgh",
"label": "(GMT+00:00) Edinburgh"
},
{
"value": "+00:00 ~ (GMT+00:00) Lisbon",
"label": "(GMT+00:00) Lisbon"
},
{
"value": "+00:00 ~ (GMT+00:00) Casablanca",
"label": "(GMT+00:00) Casablanca"
},
{
"value": "+00:00 ~ (GMT+00:00) Monrovia",
"label": "(GMT+00:00) Monrovia"
},
{
"value": "+00:00 ~ (GMT+00:00) UTC",
"label": "(GMT+00:00) UTC"
},
{
"value": "+01:00 ~ (GMT+01:00) Belgrade",
"label": "(GMT+01:00) Belgrade"
},
{
"value": "+01:00 ~ (GMT+01:00) Bratislava",
"label": "(GMT+01:00) Bratislava"
},
{
"value": "+01:00 ~ (GMT+01:00) Budapest",
"label": "(GMT+01:00) Budapest"
},
{
"value": "+01:00 ~ (GMT+01:00) Ljubljana",
"label": "(GMT+01:00) Ljubljana"
},
{
"value": "+01:00 ~ (GMT+01:00) Prague",
"label": "(GMT+01:00) Prague"
},
{
"value": "+01:00 ~ (GMT+01:00) Sarajevo",
"label": "(GMT+01:00) Sarajevo"
},
{
"value": "+01:00 ~ (GMT+01:00) Skopje",
"label": "(GMT+01:00) Skopje"
},
{
"value": "+01:00 ~ (GMT+01:00) Warsaw",
"label": "(GMT+01:00) Warsaw"
},
{
"value": "+01:00 ~ (GMT+01:00) Zagreb",
"label": "(GMT+01:00) Zagreb"
},
{
"value": "+01:00 ~ (GMT+01:00) Brussels",
"label": "(GMT+01:00) Brussels"
},
{
"value": "+01:00 ~ (GMT+01:00) Copenhagen",
"label": "(GMT+01:00) Copenhagen"
},
{
"value": "+01:00 ~ (GMT+01:00) Madrid",
"label": "(GMT+01:00) Madrid"
},
{
"value": "+01:00 ~ (GMT+01:00) Paris",
"label": "(GMT+01:00) Paris"
},
{
"value": "+01:00 ~ (GMT+01:00) Amsterdam",
"label": "(GMT+01:00) Amsterdam"
},
{
"value": "+01:00 ~ (GMT+01:00) Berlin",
"label": "(GMT+01:00) Berlin"
},
{
"value": "+01:00 ~ (GMT+01:00) Bern",
"label": "(GMT+01:00) Bern"
},
{
"value": "+01:00 ~ (GMT+01:00) Rome",
"label": "(GMT+01:00) Rome"
},
{
"value": "+01:00 ~ (GMT+01:00) Stockholm",
"label": "(GMT+01:00) Stockholm"
},
{
"value": "+01:00 ~ (GMT+01:00) Vienna",
"label": "(GMT+01:00) Vienna"
},
{
"value": "+01:00 ~ (GMT+01:00) West Central Africa",
"label": "(GMT+01:00) West Central Africa"
},
{
"value": "+02:00 ~ (GMT+02:00) Bucharest",
"label": "(GMT+02:00) Bucharest"
},
{
"value": "+02:00 ~ (GMT+02:00) Cairo",
"label": "(GMT+02:00) Cairo"
},
{
"value": "+02:00 ~ (GMT+02:00) Helsinki",
"label": "(GMT+02:00) Helsinki"
},
{
"value": "+02:00 ~ (GMT+02:00) Kyiv",
"label": "(GMT+02:00) Kyiv"
},
{
"value": "+02:00 ~ (GMT+02:00) Riga",
"label": "(GMT+02:00) Riga"
},
{
"value": "+02:00 ~ (GMT+02:00) Sofia",
"label": "(GMT+02:00) Sofia"
},
{
"value": "+02:00 ~ (GMT+02:00) Tallinn",
"label": "(GMT+02:00) Tallinn"
},
{
"value": "+02:00 ~ (GMT+02:00) Vilnius",
"label": "(GMT+02:00) Vilnius"
},
{
"value": "+02:00 ~ (GMT+02:00) Athens",
"label": "(GMT+02:00) Athens"
},
{
"value": "+02:00 ~ (GMT+02:00) Istanbul",
"label": "(GMT+02:00) Istanbul"
},
{
"value": "+03:00 ~ (GMT+03:00) Minsk",
"label": "(GMT+03:00) Minsk"
},
{
"value": "+02:00 ~ (GMT+02:00) Jerusalem",
"label": "(GMT+02:00) Jerusalem"
},
{
"value": "+02:00 ~ (GMT+02:00) Harare",
"label": "(GMT+02:00) Harare"
},
{
"value": "+02:00 ~ (GMT+02:00) Pretoria",
"label": "(GMT+02:00) Pretoria"
},
{
"value": "+04:00 ~ (GMT+04:00) Moscow",
"label": "(GMT+04:00) Moscow"
},
{
"value": "+04:00 ~ (GMT+04:00) Volgograd",
"label": "(GMT+04:00) Volgograd"
},
{
"value": "+03:00 ~ (GMT+03:00) Kuwait",
"label": "(GMT+03:00) Kuwait"
},
{
"value": "+03:00 ~ (GMT+03:00) Riyadh",
"label": "(GMT+03:00) Riyadh"
},
{
"value": "+03:00 ~ (GMT+03:00) Nairobi",
"label": "(GMT+03:00) Nairobi"
},
{
"value": "+03:00 ~ (GMT+03:00) Baghdad",
"label": "(GMT+03:00) Baghdad"
},
{
"value": "+03:30 ~ (GMT+03:30) Tehran",
"label": "(GMT+03:30) Tehran"
},
{
"value": "+04:00 ~ (GMT+04:00) Abu Dhabi",
"label": "(GMT+04:00) Abu Dhabi"
},
{
"value": "+04:00 ~ (GMT+04:00) Muscat",
"label": "(GMT+04:00) Muscat"
},
{
"value": "+04:00 ~ (GMT+04:00) Baku",
"label": "(GMT+04:00) Baku"
},
{
"value": "+04:00 ~ (GMT+04:00) Tbilisi",
"label": "(GMT+04:00) Tbilisi"
},
{
"value": "+04:00 ~ (GMT+04:00) Yerevan",
"label": "(GMT+04:00) Yerevan"
},
{
"value": "+04:30 ~ (GMT+04:30) Kabul",
"label": "(GMT+04:30) Kabul"
},
{
"value": "+06:00 ~ (GMT+06:00) Ekaterinburg",
"label": "(GMT+06:00) Ekaterinburg"
},
{
"value": "+05:00 ~ (GMT+05:00) Islamabad",
"label": "(GMT+05:00) Islamabad"
},
{
"value": "+05:00 ~ (GMT+05:00) Karachi",
"label": "(GMT+05:00) Karachi"
},
{
"value": "+05:00 ~ (GMT+05:00) Tashkent",
"label": "(GMT+05:00) Tashkent"
},
{
"value": "+05:30 ~ (GMT+05:30) Chennai",
"label": "(GMT+05:30) Chennai"
},
{
"value": "+05:30 ~ (GMT+05:30) Kolkata",
"label": "(GMT+05:30) Kolkata"
},
{
"value": "+05:45 ~ (GMT+05:45) Kathmandu",
"label": "(GMT+05:45) Kathmandu"
},
{
"value": "+06:00 ~ (GMT+06:00) Astana",
"label": "(GMT+06:00) Astana"
},
{
"value": "+06:00 ~ (GMT+06:00) Dhaka",
"label": "(GMT+06:00) Dhaka"
},
{
"value": "+05:30 ~ (GMT+05:30) Sri Jayawardenepura",
"label": "(GMT+05:30) Sri Jayawardenepura"
},
{
"value": "+06:00 ~ (GMT+06:00) Almaty",
"label": "(GMT+06:00) Almaty"
},
{
"value": "+07:00 ~ (GMT+07:00) Novosibirsk",
"label": "(GMT+07:00) Novosibirsk"
},
{
"value": "+06:30 ~ (GMT+06:30) Rangoon",
"label": "(GMT+06:30) Rangoon"
},
{
"value": "+07:00 ~ (GMT+07:00) Bangkok",
"label": "(GMT+07:00) Bangkok"
},
{
"value": "+07:00 ~ (GMT+07:00) Hanoi",
"label": "(GMT+07:00) Hanoi"
},
{
"value": "+07:00 ~ (GMT+07:00) Jakarta",
"label": "(GMT+07:00) Jakarta"
},
{
"value": "+08:00 ~ (GMT+08:00) Krasnoyarsk",
"label": "(GMT+08:00) Krasnoyarsk"
},
{
"value": "+08:00 ~ (GMT+08:00) Beijing",
"label": "(GMT+08:00) Beijing"
},
{
"value": "+08:00 ~ (GMT+08:00) Chongqing",
"label": "(GMT+08:00) Chongqing"
},
{
"value": "+08:00 ~ (GMT+08:00) Hong Kong",
"label": "(GMT+08:00) Hong Kong"
},
{
"value": "+08:00 ~ (GMT+08:00) Urumqi",
"label": "(GMT+08:00) Urumqi"
},
{
"value": "+08:00 ~ (GMT+08:00) Kuala Lumpur",
"label": "(GMT+08:00) Kuala Lumpur"
},
{
"value": "+08:00 ~ (GMT+08:00) Singapore",
"label": "(GMT+08:00) Singapore"
},
{
"value": "+08:00 ~ (GMT+08:00) Taipei",
"label": "(GMT+08:00) Taipei"
},
{
"value": "+08:00 ~ (GMT+08:00) Perth",
"label": "(GMT+08:00) Perth"
},
{
"value": "+09:00 ~ (GMT+09:00) Irkutsk",
"label": "(GMT+09:00) Irkutsk"
},
{
"value": "+08:00 ~ (GMT+08:00) Ulaan Bataar",
"label": "(GMT+08:00) Ulaan Bataar"
},
{
"value": "+09:00 ~ (GMT+09:00) Seoul",
"label": "(GMT+09:00) Seoul"
},
{
"value": "+09:00 ~ (GMT+09:00) Osaka",
"label": "(GMT+09:00) Osaka"
},
{
"value": "+10:00 ~ (GMT+10:00) Yakutsk",
"label": "(GMT+10:00) Yakutsk"
},
{
"value": "+09:30 ~ (GMT+09:30) Darwin",
"label": "(GMT+09:30) Darwin"
},
{
"value": "+09:30 ~ (GMT+09:30) Adelaide",
"label": "(GMT+09:30) Adelaide"
},
{
"value": "+10:00 ~ (GMT+10:00) Canberra",
"label": "(GMT+10:00) Canberra"
},
{
"value": "+10:00 ~ (GMT+10:00) Melbourne",
"label": "(GMT+10:00) Melbourne"
},
{
"value": "+10:00 ~ (GMT+10:00) Sydney",
"label": "(GMT+10:00) Sydney"
},
{
"value": "+10:00 ~ (GMT+10:00) Brisbane",
"label": "(GMT+10:00) Brisbane"
},
{
"value": "+10:00 ~ (GMT+10:00) Hobart",
"label": "(GMT+10:00) Hobart"
},
{
"value": "+11:00 ~ (GMT+11:00) Vladivostok",
"label": "(GMT+11:00) Vladivostok"
},
{
"value": "+10:00 ~ (GMT+10:00) Guam",
"label": "(GMT+10:00) Guam"
},
{
"value": "+10:00 ~ (GMT+10:00) Port Moresby",
"label": "(GMT+10:00) Port Moresby"
},
{
"value": "+12:00 ~ (GMT+12:00) Magadan",
"label": "(GMT+12:00) Magadan"
},
{
"value": "+12:00 ~ (GMT+12:00) Solomon Is.",
"label": "(GMT+12:00) Solomon Is."
},
{
"value": "+12:00 ~ (GMT+12:00) Fiji",
"label": "(GMT+12:00) Fiji"
},
{
"value": "+12:00 ~ (GMT+12:00) Kamchatka",
"label": "(GMT+12:00) Kamchatka"
},
{
"value": "+12:00 ~ (GMT+12:00) Marshall Is.",
"label": "(GMT+12:00) Marshall Is."
},
{
"value": "+12:00 ~ (GMT+12:00) Auckland",
"label": "(GMT+12:00) Auckland"
},
{
"value": "+13:00 ~ (GMT+13:00) Nuku'alofa",
"label": "(GMT+13:00) Nuku'alofa"
},
{
"value": "+13:00 ~ (GMT+13:00) Tokelau Is.",
"label": "(GMT+13:00) Tokelau Is."
},
{
"value": "+13:00 ~ (GMT+13:00) Samoa",
"label": "(GMT+13:00) Samoa"
}
]
},
{
"type": "header",
"content": "Start"
},
{
"type": "select",
"id": "start_month",
"label": "Month",
"default": "January",
"options": [
{
"value": "January",
"label": "January"
},
{
"value": "February",
"label": "February"
},
{
"value": "March",
"label": "March"
},
{
"value": "April",
"label": "April"
},
{
"value": "May",
"label": "May"
},
{
"value": "June",
"label": "June"
},
{
"value": "July",
"label": "July"
},
{
"value": "August",
"label": "August"
},
{
"value": "September",
"label": "September"
},
{
"value": "October",
"label": "October"
},
{
"value": "November",
"label": "November"
},
{
"value": "December",
"label": "December"
}
]
},
{
"type": "range",
"id": "start_day",
"label": "Day",
"min": 1,
"max": 31,
"step": 1,
"default": 1
},
{
"type": "text",
"id": "start_year",
"label": "Year",
"default": "2021"
},
{
"type": "select",
"id": "start_time",
"label": "Start time",
"default": "23:30:00",
"options": [
{
"value": "00:00:00",
"label": "12:00 am (0:00)"
},
{
"value": "00:30:00",
"label": "12:30 am (0:30)"
},
{
"value": "01:00:00",
"label": "1:00 am (1:00)"
},
{
"value": "01:30:00",
"label": "1:30 am (1:30)"
},
{
"value": "02:00:00",
"label": "2:00 am (2:00)"
},
{
"value": "02:30:00",
"label": "2:30 am (2:30)"
},
{
"value": "03:00:00",
"label": "3:00 am (3:00)"
},
{
"value": "03:30:00",
"label": "3:30 am (3:30)"
},
{
"value": "04:00:00",
"label": "4:00 am (4:00)"
},
{
"value": "04:30:00",
"label": "4:30 am (4:30)"
},
{
"value": "05:00:00",
"label": "5:00 am (5:00)"
},
{
"value": "05:30:00",
"label": "5:30 am (5:30)"
},
{
"value": "06:00:00",
"label": "6:00 am (6:00)"
},
{
"value": "06:30:00",
"label": "6:30 am (6:30)"
},
{
"value": "07:00:00",
"label": "7:00 am (7:00)"
},
{
"value": "07:30:00",
"label": "7:30 am (7:30)"
},
{
"value": "08:00:00",
"label": "8:00 am (8:00)"
},
{
"value": "08:30:00",
"label": "8:30 am (8:30)"
},
{
"value": "09:00:00",
"label": "9:00 am (9:00)"
},
{
"value": "09:30:00",
"label": "9:30 am (9:30)"
},
{
"value": "10:00:00",
"label": "10:00 am (10:00)"
},
{
"value": "10:30:00",
"label": "10:30 am (10:30)"
},
{
"value": "11:00:00",
"label": "11:00 am (11:00)"
},
{
"value": "11:30:00",
"label": "11:30 am (11:30)"
},
{
"value": "12:00:00",
"label": "12:00 pm (12:00)"
},
{
"value": "12:30:00",
"label": "12:30 pm (12:30)"
},
{
"value": "13:00:00",
"label": "1:00 pm (13:00)"
},
{
"value": "13:30:00",
"label": "1:30 pm (13:30)"
},
{
"value": "14:00:00",
"label": "2:00 pm (14:00)"
},
{
"value": "14:30:00",
"label": "2:30 pm (14:30)"
},
{
"value": "15:00:00",
"label": "3:00 pm (15:00)"
},
{
"value": "15:30:00",
"label": "3:30 pm (15:30)"
},
{
"value": "16:00:00",
"label": "4:00 pm (16:00)"
},
{
"value": "16:30:00",
"label": "4:30 pm (16:30)"
},
{
"value": "17:00:00",
"label": "5:00 pm (17:00)"
},
{
"value": "17:30:00",
"label": "5:30 pm (17:30)"
},
{
"value": "18:00:00",
"label": "6:00 pm (18:00)"
},
{
"value": "18:30:00",
"label": "6:30 pm (18:30)"
},
{
"value": "19:00:00",
"label": "7:00 pm (19:00)"
},
{
"value": "19:30:00",
"label": "7:30 pm (19:30)"
},
{
"value": "20:00:00",
"label": "8:00 pm (20:00)"
},
{
"value": "20:30:00",
"label": "8:30 pm (20:30)"
},
{
"value": "21:00:00",
"label": "9:00 pm (21:00)"
},
{
"value": "21:30:00",
"label": "9:30 pm (21:30)"
},
{
"value": "22:00:00",
"label": "10:00 pm (22:00)"
},
{
"value": "22:30:00",
"label": "10:30 pm (22:30)"
},
{
"value": "23:00:00",
"label": "11:00 pm (23:00)"
},
{
"value": "23:30:00",
"label": "11:30 pm (23:30)"
}
]
},
{
"type": "header",
"content": "End"
},
{
"type": "select",
"id": "end_month",
"label": "Month",
"default": "December",
"options": [
{
"value": "January",
"label": "January"
},
{
"value": "February",
"label": "February"
},
{
"value": "March",
"label": "March"
},
{
"value": "April",
"label": "April"
},
{
"value": "May",
"label": "May"
},
{
"value": "June",
"label": "June"
},
{
"value": "July",
"label": "July"
},
{
"value": "August",
"label": "August"
},
{
"value": "September",
"label": "September"
},
{
"value": "October",
"label": "October"
},
{
"value": "November",
"label": "November"
},
{
"value": "December",
"label": "December"
}
]
},
{
"type": "range",
"id": "end_day",
"label": "Day",
"min": 1,
"max": 31,
"step": 1,
"default": 1
},
{
"type": "text",
"id": "end_year",
"label": "Year",
"default": "2024"
},
{
"type": "select",
"id": "end_time",
"label": "End time",
"default": "23:30:00",
"options": [
{
"value": "00:00:00",
"label": "12:00 am (0:00)"
},
{
"value": "00:30:00",
"label": "12:30 am (0:30)"
},
{
"value": "01:00:00",
"label": "1:00 am (1:00)"
},
{
"value": "01:30:00",
"label": "1:30 am (1:30)"
},
{
"value": "02:00:00",
"label": "2:00 am (2:00)"
},
{
"value": "02:30:00",
"label": "2:30 am (2:30)"
},
{
"value": "03:00:00",
"label": "3:00 am (3:00)"
},
{
"value": "03:30:00",
"label": "3:30 am (3:30)"
},
{
"value": "04:00:00",
"label": "4:00 am (4:00)"
},
{
"value": "04:30:00",
"label": "4:30 am (4:30)"
},
{
"value": "05:00:00",
"label": "5:00 am (5:00)"
},
{
"value": "05:30:00",
"label": "5:30 am (5:30)"
},
{
"value": "06:00:00",
"label": "6:00 am (6:00)"
},
{
"value": "06:30:00",
"label": "6:30 am (6:30)"
},
{
"value": "07:00:00",
"label": "7:00 am (7:00)"
},
{
"value": "07:30:00",
"label": "7:30 am (7:30)"
},
{
"value": "08:00:00",
"label": "8:00 am (8:00)"
},
{
"value": "08:30:00",
"label": "8:30 am (8:30)"
},
{
"value": "09:00:00",
"label": "9:00 am (9:00)"
},
{
"value": "09:30:00",
"label": "9:30 am (9:30)"
},
{
"value": "10:00:00",
"label": "10:00 am (10:00)"
},
{
"value": "10:30:00",
"label": "10:30 am (10:30)"
},
{
"value": "11:00:00",
"label": "11:00 am (11:00)"
},
{
"value": "11:30:00",
"label": "11:30 am (11:30)"
},
{
"value": "12:00:00",
"label": "12:00 pm (12:00)"
},
{
"value": "12:30:00",
"label": "12:30 pm (12:30)"
},
{
"value": "13:00:00",
"label": "1:00 pm (13:00)"
},
{
"value": "13:30:00",
"label": "1:30 pm (13:30)"
},
{
"value": "14:00:00",
"label": "2:00 pm (14:00)"
},
{
"value": "14:30:00",
"label": "2:30 pm (14:30)"
},
{
"value": "15:00:00",
"label": "3:00 pm (15:00)"
},
{
"value": "15:30:00",
"label": "3:30 pm (15:30)"
},
{
"value": "16:00:00",
"label": "4:00 pm (16:00)"
},
{
"value": "16:30:00",
"label": "4:30 pm (16:30)"
},
{
"value": "17:00:00",
"label": "5:00 pm (17:00)"
},
{
"value": "17:30:00",
"label": "5:30 pm (17:30)"
},
{
"value": "18:00:00",
"label": "6:00 pm (18:00)"
},
{
"value": "18:30:00",
"label": "6:30 pm (18:30)"
},
{
"value": "19:00:00",
"label": "7:00 pm (19:00)"
},
{
"value": "19:30:00",
"label": "7:30 pm (19:30)"
},
{
"value": "20:00:00",
"label": "8:00 pm (20:00)"
},
{
"value": "20:30:00",
"label": "8:30 pm (20:30)"
},
{
"value": "21:00:00",
"label": "9:00 pm (21:00)"
},
{
"value": "21:30:00",
"label": "9:30 pm (21:30)"
},
{
"value": "22:00:00",
"label": "10:00 pm (22:00)"
},
{
"value": "22:30:00",
"label": "10:30 pm (22:30)"
},
{
"value": "23:00:00",
"label": "11:00 pm (23:00)"
},
{
"value": "23:30:00",
"label": "11:30 pm (23:30)"
}
]
}
]
},
{
"type": "liquid",
"name": "Liquid/HTML",
"settings": [
{
"type": "paragraph",
"content": "Copy and paste your custom code."
},
{
"type": "liquid",
"id": "liquid",
"label": "Liquid and/or HTML"
}
]
},
{
"type": "@app"
}
],
"settings": [
{
"type": "image_picker",
"id": "left_image",
"label": "Left image"
},
{
"type": "text",
"id": "left_caption",
"label": "Left caption (optional)"
},
{
"type": "image_picker",
"id": "right_image",
"label": "Right image"
},
{
"type": "text",
"id": "right_caption",
"label": "Right caption (optional)"
},
{
"type": "image_picker",
"id": "handle_image",
"label": "Handle image (optional)"
},
{
"type": "select",
"id": "image_position",
"label": "Slider position",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "header",
"content": "Text appearance"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "range",
"id": "text_size",
"label": "Text size",
"min": 80,
"max": 150,
"step": 5,
"default": 100,
"unit": "%"
},
{
"type": "range",
"id": "text_width",
"label": "Text box width",
"min": 30,
"max": 70,
"default": 50,
"unit": "%"
},
{
"type": "header",
"content": "Design"
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "#121212"
},
{
"type": "color_background",
"id": "text_background_color",
"label": "Text background"
},
{
"type": "color",
"id": "border_color",
"label": "Border",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "drag_color",
"label": "Handle icon",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "handle_color",
"label": "Handle background",
"default": "#121212"
},
{
"type": "color",
"id": "caption_text",
"label": "Caption text",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "caption_background",
"label": "Caption background",
"default": "#121212"
},
{
"type": "color_background",
"id": "background_color",
"label": "Background"
},
{
"type": "checkbox",
"id": "show_background_image",
"label": "Show background image",
"default": false
},
{
"type": "image_picker",
"id": "background_image",
"label": "Background image"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "fade-in",
"label": "Fade-in"
},
{
"value": "fade-in-left",
"label": "Fade-in left"
},
{
"value": "fade-in-right",
"label": "Fade-in right"
},
{
"value": "fade-in-up",
"label": "Fade-in up"
},
{
"value": "fade-in-down",
"label": "Fade-in down"
},
{
"value": "none",
"label": "None"
}
]
},
{
"type": "header",
"content": "Layout"
},
{
"type": "range",
"id": "base_width",
"label": "Size",
"min": 60,
"max": 100,
"step": 5,
"default": 90,
"unit": "%"
},
{
"type": "text",
"id": "max_width",
"label": "Maximum width",
"placeholder": "eg. 1200px",
"info": "Sets width constraint for content."
},
{
"type": "range",
"id": "inner_padding",
"label": "Inner padding",
"info": "Only applies to top and bottom.",
"min": 0,
"max": 100,
"default": 60,
"step": 5,
"unit": "px"
},
{
"type": "range",
"id": "outer_margin",
"label": "Outer margin",
"info": "Only applies to top and bottom.",
"min": 0,
"max": 100,
"default": 0,
"step": 5,
"unit": "px"
},
{
"type": "header",
"content": "Advanced"
},
{
"type": "liquid",
"id": "custom_css",
"label": "CSS"
},
{
"type": "liquid",
"id": "mobile_custom_css",
"label": "Mobile CSS",
"info": "Applied on screens less than 480px."
},
{
"type": "text",
"id": "anchor_id",
"label": "Link anchor id",
"placeholder": "#web-pack-section",
"info": "Enter a unique value to jump to this section from same page using a link or button. Eg. #web-pack-section"
},
{
"type": "checkbox",
"id": "override_theme_font",
"label": "Override default theme font",
"default": false
},
{
"type": "font_picker",
"id": "heading_font",
"label": "Heading",
"default": "serif"
},
{
"type": "font_picker",
"id": "main_font",
"label": "Text",
"default": "sans-serif"
}
],
"presets": [
{
"name": "Before After Slider",
"settings": {
},
"blocks": [
{
"type": "inset_image"
},
{
"type": "small_text"
},
{
"type": "heading"
},
{
"type": "text"
}
]
}
],
"locales": {
"en": {
"success": "Thanks for contacting us. We'll get back to you as soon as possible.",
"days": "Days",
"hours": "Hours",
"minutes": "Minutes",
"seconds": "Seconds"
}
}
}
{% endschema %}
{%- comment -%} JSON Settings {%- endcomment -%}
<script type="application/json" data-wsp-section="{{ section_id }}">
{
"id": {{ section_id | json }},
"animation": {{ section.settings.animation | json }}
}
</script>
{%- if slider_block.size > 0 and slider_count != 0 -%}
<script
data-wsp-section-external-js="{{ section_id }}"
src="https://cdn.shopify.com/s/files/1/0577/7673/4361/files/flickity-2.3.0.pkgd.min.js?v=1671485005"
defer
></script>
<script
data-wsp-section-external-js="{{ section_id }}"
src="https://cdn.shopify.com/s/files/1/0577/7673/4361/files/flickity-fade-1.0.0.min.js?v=1659560790"
defer
></script>
{%- endif -%}
{%- comment -%} JavaScript {%- endcomment -%}
<script
data-wsp-section-js="{{ section_id }}"
type="module"
defer
>
(function(){
const webPack = {
settings: {},
animateSection: function(entries, observer){
// Target the first entry available.
let observedSection = entries[0];
if (observedSection.isIntersecting) {
observedSection.target.classList.add('wsp-section__animation-applied');
}
},
enableSliderBlock: function(section){
const sliderBlocks = section.querySelectorAll(`.wsp-section__slider-block`);
sliderBlocks.forEach(elem => {
webPack.flkty = new Flickity( elem, {
cellAlign: 'left',
contain: true,
wrapAround: true,
adaptiveHeight: true,
imagesLoaded: true,
prevNextButtons: JSON.parse(getComputedStyle(elem).getPropertyValue('--show-arrows')),
autoPlay: JSON.parse(getComputedStyle(elem).getPropertyValue('--autoplay')),
fade: JSON.parse(getComputedStyle(elem).getPropertyValue('--slider-animation')),
pageDots: JSON.parse(getComputedStyle(elem).getPropertyValue('--page-dots')),
draggable: JSON.parse(getComputedStyle(elem).getPropertyValue('--draggable')),
freeScrollFriction: JSON.parse(getComputedStyle(elem).getPropertyValue('--free-scroll-friction')),
selectedAttraction: JSON.parse(getComputedStyle(elem).getPropertyValue('--selected-attraction')),
friction: JSON.parse(getComputedStyle(elem).getPropertyValue('--friction')),
dragThreshold: JSON.parse(getComputedStyle(elem).getPropertyValue('--drag-threshold'))
});
});
},
initializeAndEnableClock(section) {
const clockSelector = '.wsp-section__clock';
const startDate = section.querySelector('[data-timer-start]').dataset.timerStart;
const endDate = section.querySelector('[data-timer-end]').dataset.timerEnd;
const startMs = Date.parse(startDate);
const endMs = Date.parse(endDate);
const currentMs = Date.parse(new Date());
if (endMs <= currentMs || currentMs < startMs) {
section.querySelector(`.wsp-section__clock-wrap`).style.display = 'none';
return;
}
const clock = section.querySelector(clockSelector);
function updateClock() {
const total = Date.parse(endDate) - Date.parse(new Date());
const days = Math.floor(total / (1000 * 60 * 60 * 24));
const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
const minutes = Math.floor((total / 1000 / 60) % 60);
const seconds = Math.floor((total / 1000) % 60);
const daysSpan = clock.querySelector('.wsp-section__days .wsp-section__number');
const hoursSpan = clock.querySelector('.wsp-section__hours .wsp-section__number');
const minutesSpan = clock.querySelector('.wsp-section__minutes .wsp-section__number');
const secondsSpan = clock.querySelector('.wsp-section__seconds .wsp-section__number');
if (daysSpan.innerHTML != days) daysSpan.innerHTML = days;
if (hoursSpan.innerHTML != hours) hoursSpan.innerHTML = ('0' + hours).slice(-2);
if (minutesSpan.innerHTML != minutes) minutesSpan.innerHTML = ('0' + minutes).slice(-2);
if (secondsSpan.innerHTML != seconds) secondsSpan.innerHTML = ('0' + seconds).slice(-2);
if (total <= 0) clearInterval(timeinterval);
}
updateClock();
const timeinterval = setInterval(updateClock, 1000);
},
load: function(section){
let isClicked = false;
const image = section.querySelector('.wsp-section__comparison__overlay');
const slider = section.querySelector('.wsp-section__comparison__slider');
const fullImage = section.querySelector('.wsp-section__compare');
const width = fullImage.offsetWidth;
const height = fullImage.offsetHeight;
function compare() {
slider.style.top = height / 2 - slider.offsetHeight / 2 + 'px';
slider.style.left = width / 2 - slider.offsetWidth / 2 + 'px';
image.style.width = '50%';
slider.addEventListener('mousedown', onSlideStart);
slider.addEventListener('touchstart', onSlideStart);
section.addEventListener('mouseup', () => (isClicked = false));
section.addEventListener('touchstop', () => (isClicked = false));
section.addEventListener('mousemove', onSlideMove);
section.addEventListener('touchmove', onSlideMove);
}
function doSlide(x) {
image.style.width = x + 'px';
slider.style.left = image.offsetWidth - slider.offsetWidth / 2 + 'px';
}
function onSlideStart(event) {
event.preventDefault();
isClicked = true;
}
function onSlideMove(event) {
if (!isClicked) return;
doSlide(currentPosition(event));
}
function currentPosition(event = window.event) {
let pageX = event.pageX;
let hasTouchScreen = null;
if ("maxTouchPoints" in navigator && /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
hasTouchScreen = navigator.maxTouchPoints > 0;
}
if (typeof hasTouchScreen != 'undefined' && hasTouchScreen != null) {
pageX = event.changedTouches[0].pageX
}
let xImage = image.getBoundingClientRect();
let x = 0;
x = pageX - xImage.left;
if (x < 0) x = 0;
if (x > width) x = width;
return x;
}
compare();
if (this.settings.animation !== 'none'){
const options = {
root: null,
rootMargin: '0px',
threshold: [0, 0.25, 0.5, 0.75, 1]
};
// Construct Intersection Observer.
const observer = new IntersectionObserver( this.animateSection, options );
// Observe if element is present.
if (section) {
observer.observe(section);
}
}
const countdownTimer = section.querySelector('.wsp-section__clock');
if (typeof countdownTimer !== 'undefined' && countdownTimer !== null){
webPack.initializeAndEnableClock(section);
}
const sliderBlock = section.querySelector('.wsp-section__slider-block');
if (typeof sliderBlock !== 'undefined' && sliderBlock !== null){
webPack.enableSliderBlock(section);
}
},
unload: function(section){
section.classList.remove('wsp-section__animation-applied')
}
}
window.addEventListener('shopify:section:unload', function (e) {
const settings = document.querySelector(`[data-wsp-section="${e.detail.sectionId}"]`);
const sectionId = e.detail.sectionId;
const section = document.querySelector(`#DP--${e.detail.sectionId}`);
if (sectionId == webPack.settings.id){
webPack.unload(section);
}
});
webPack.settings = JSON.parse(document.querySelector('[data-wsp-section="{{ section_id }}"]').innerHTML);
const sectionId = {{ section.id | json }};
const section = document.querySelector(`#DP--${sectionId}`);
if (sectionId == webPack.settings.id){
webPack.load(section);
}
})()
</script>
To get started, go to your Shopify admin dashboard and navigate to Online Store, then Themes. From the theme library, use the search bar to find Dawn and click "Try Theme." Shopify will take a few seconds to prepare a copy of the theme for your store. You don't need to publish it as your live theme yet — you can do all the development and testing in the background before making it your active storefront. Once Dawn appears in your theme list, you're ready to move into the code editor.
If you're already running Dawn as your current theme, you can work directly in that theme. If you're on a different theme entirely, it's worth noting that the method described here will work on most modern Shopify themes, but Dawn is recommended for this tutorial since that's the environment where this has been tested and confirmed to work cleanly.
Adding a Custom Liquid Section via the Theme Code Editor
With Dawn installed, click the three-dot menu next to the theme and select "Edit Code." This opens Shopify's built-in code editor, where you can see and modify every file that makes up your theme.
In the left-hand file panel, locate the "Sections" folder and click the dropdown to expand it. At the top of that list you'll see an option to "Add a new section." Click it, make sure the file type is set to Liquid, and give your new section a memorable name. For this example, use something like "beforeafter" — keep in mind that Shopify does not allow hyphens in section file names, so stick to letters and numbers only. Click Done and your new file will be created and opened automatically in the editor.
You'll see some placeholder boilerplate code in the new file. Select
Configuring Your Before & After Slider with Images and Settings
Once you've saved your new `beforeafter.liquid` section file, head back to the theme editor by clicking the three dots next to your Dawn theme and selecting Customize. This is where the visual setup happens, and it's more straightforward than you might expect.
Inside the theme customizer, navigate to the page or section of your store where you want the slider to appear — your homepage is usually the most impactful spot, since visitors will see your results immediately. In the left-hand panel, scroll down and look for the Add section button. Click it, and you should now see your newly created "Before After" section listed among the available options. Select it to add it to your page.
With the section added to your layout, you'll see the configuration panel appear on the left side. This is where you upload your two key images: the **before** image and the **after** image. Click each image placeholder and upload your photos directly from your device or choose from your existing Shopify media library. For best results, make sure both images are the same dimensions — this keeps the slider looking clean and professional rather than awkward or misaligned.
Beyond the images themselves, you'll typically have a few additional settings to customize. Look for options to adjust the **slider handle position**, which controls where the divider starts when a visitor first lands on the section. Setting it somewhere around the center (50%) gives users an immediate sense of both sides. You may also find fields for adding a **section heading or label**, which is a great opportunity to insert a keyword-rich phrase like "See the Results" or "Real Customer Transformations" — both of which reinforce your value proposition and support your on-page SEO.
Take a moment to review how the slider looks on both desktop and mobile views using the device toggle at the top of the customizer. Mobile shoppers make up a significant share of Shopify traffic, so confirming that the slider is responsive and easy to drag on a touchscreen is essential before you go live.
Publishing and Testing Your Before & After Slider on Your Store
Once you're satisfied with how everything looks inside the customizer, hit **Save** in the top right corner. If you've been working on the Dawn theme as a preview rather than your live theme, now is the time to make it your active theme. Go back to **Online Store → Themes**, find your Dawn theme, click the three dots, and select **Publish**. Confirm the prompt, and your store is now running on the updated theme with your new slider section included.
After publishing, open your storefront in a fresh browser tab — ideally in an incognito window to avoid cached versions — and navigate to the page where you placed the slider. Test it thoroughly: drag the handle left and right, check that both images load cleanly, and make sure the section heading displays correctly. Try it on your phone as well, swiping the divider with your finger to confirm the touch interaction works smoothly.
If something looks off, don't panic. Head back into the theme editor and double-check your image uploads and settings. Common issues include mismatched image sizes creating a layout shift, or the section appearing in the wrong position on the page. Both are easy fixes within the customizer. You can drag sections up or down in the left panel to reorder them until the placement feels natural within your page flow.
For an added SEO benefit, make sure your before and after images have descriptive **alt text** applied. Shopify lets you add alt text when you upload or select images, and using relevant phrases like "before and after [your product name] results" helps search engines understand your visual content and can drive additional traffic through Google Image Search.
Conclusion
Adding a before and after image slider to your Shopify store doesn't have to mean paying for yet another monthly app subscription. By creating a custom Liquid section inside the Dawn theme, you get a fully functional, visually compelling slider at zero cost — one that you own and control completely.
This kind of social proof can be genuinely powerful for conversion rates. Shoppers who can see a clear, visual demonstration of what your product does are far more likely to trust your brand and follow through with a purchase. Whether you're selling skincare, cleaning products, home improvement tools, or anything else with visible results, a well-placed before and after slider earns its spot on your store. Set it up once, keep your images updated as new results come in, and let the visuals do the selling for you.
&media=https://digitaldiyguide.com/storage/add-a-before-after-image-slider-to-your-shopify-store-in-minutes.png){kind=link}