BETA— site is in trial. Features may change.
Live preview
Sample content from the Northwind shop. Your theme settings replace it.
Before and After are the two photographs on the band. A slide with no pictures of its own uses this pair. Until you upload, the sample room shows.
Each Slide sets a Headline, Stars, and Quote, and can carry its own Before and After. Previous and Next move through the stories. The counter reads 1 / 4.
From this and To this are the captions on the arrows. Color sets the band, the type, the stars, and those captions. Padding is the space above and below the band.
A slide with no photograph of its own uses these two. The sample room shows until you upload.
Before
Fills a slide that has no before photograph. Until you upload, a sample room shows.
After
Fills a slide that has no after photograph.
Before description
Read when the before photograph cannot be seen.
After description
Read when the after photograph cannot be seen.
From this
Caption on the arrow beside the first photograph.
To this
Caption on the arrow beside the second photograph.
Stars
A row under the headline. Each slide sets how many are filled.
Headline
Used when a slide headline is empty.
Quote
Used when a slide quote is empty.
Previous
Read by screen readers on the previous arrow.
Next
Read by screen readers on the next arrow.
Before
Leave empty to use the sample room for this slide.
{%- comment -%}
DotSection · Before / After
Online Store 2.0 section.
File: sections/before-after.liquid
{%- endcomment -%}
<style>
.ds-ba {
position: relative;
width: 100%;
background: var(--bg, #f6f1e8);
color: var(--ink, #1a1714);
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.ds-ba__rail {
width: min(1180px, 100%);
margin-inline: auto;
padding: var(--pad, 36px) 24px;The Liquid file appears here once this section is in your library.
Claim a free section now. A paid section opens after checkout.
No reviews yet.
After
Leave empty to use the sample room for this slide.
Headline
Stars
Filled stars, from 0 to 5. 0 hides the row on this slide.
Quote
Before description
Read when this slide’s before photograph cannot be seen. Replace it when you upload your own.
After description
Read when this slide’s after photograph cannot be seen. Replace it when you upload your own.
The band, the type, the stars, and the arrow captions.
Background
Ink
Headline and quote.
Star color
Filled stars.
Caption color
From this, To this, and the arrows.
Padding
Space above and below the band.