GoodSection

Before / After carousel

Dual marquee rails: Before images on the left, After on the right, fixed center divider. HTML + CSS export.

HEADER

TITLE

TITLE TEXT

SUBTITLE

SUBTITLE TEXT

HEADER ALIGNMENT

PUBLIC IMAGE BASE URL

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

↔ Pairs (2/8)

Pair 1

BEFORE IMAGE

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

AFTER IMAGE

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

BEFORE ALT

AFTER ALT

Pair 2

BEFORE IMAGE

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

AFTER IMAGE

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

BEFORE ALT

AFTER ALT

🏷 Labels Stage

Labels Before After

BEFORE LABEL

AFTER LABEL

Separator Central

Glow Separator

▶ Scroll

Autoplay

Animation speed — 18s

Direction Scroll

RAIL DIRECTION

Pause on hover

STYLE

Visual style

COLORS

SECTION BACKGROUND

TITLE

SUBTITLE

BACKGROUND STAGE

LABEL TEXT

LABEL BACKGROUND

Separator

⬡ Dimensions

FONT

TITLEDESKTOP — 38px

TITLEMOBILE — 28px

SUBTITLE — 16px

VERTICAL PADDING — 64px

HORIZONTAL PADDING — 20px

MAX WIDTH — 1000px

STAGE HEIGHT — 280px

MOBILE STAGE HEIGHT — 220px

IMAGE WIDTH — 168px

MOBILE WIDTH — 120px

IMAGE HEIGHT — 224px

HEIGHT MOBILE — 160px

IMAGE GAP — 14px

Radius images — 12px

Width Separator — 2px

Section spacing

Top padding

64px

0px160px

Bottom padding

64px

0px160px

Before / After

Discover transformations shared by our customers.

BeforeAfter

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