GoodSection

Before / After slider

Interactive before/after slider. One centered slider by default, with an option to show several.

HEADER

TITLE

TITLE TEXT

SUBTITLE

SUBTITLE TEXT

HEADER ALIGNMENT

PUBLIC IMAGE BASE URL

E.g. /before-after-slider or https://goodsection.com/before-after-slider for Shopify export.

↔ Main slider

Main slider

Before image

Ex. /before-after-slider/c15.png

After image

Ex. /before-after-slider/c14.png

BEFORE LABEL

AFTER LABEL

CUSTOMER NAME

CUSTOMER INFO

USAGE TEXT

BEFORE ALT

AFTER ALT

🎨 Style & Layout

Enable multiple sliders

BLOCK ALIGNMENT

SLIDER MAX WIDTH — 420px

CARD STYLE

IMAGE RATIO

INITIAL POSITION — 50%

Labels Before After

Customer info

CARD BORDER

COLORS

SECTION BACKGROUND

TITLE

SUBTITLE

CARD BACKGROUND

CARD TEXT

Card border

LABEL BACKGROUND

LABEL TEXT

Divider

Handle

Icon Handle

SPACING

FONT

TITLEDESKTOP — 38px

TITLEMOBILE — 26px

SUBTITLE — 16px

VERTICAL PADDING — 64px

HORIZONTAL PADDING — 20px

CARD RADIUS — 16px

Radius images — 12px

BORDER WIDTH — 1px

Thickness Divider — 3px

Handle size — 44px

Section spacing

Top padding

64px

0px160px

Bottom padding

64px

0px160px

Visible results

Compare before and after by dragging the slider.

BeforeAfter

Verified customerResult shared after use

Ready to add to Shopify

Copy the code and paste it into a Custom Liquid section.

1Open Shopify
2Online store → Themes → Customize
3Click Add section
4Choose Custom Liquid
5Paste the code and save