Getting Started
Blog Builder
How To's
How To's
How To's
/
How to add before and after block to a blog post in Shopify?
How to add before and after block to a blog post in Shopify?
3 min read
The Before/After block places two images behind a slider. Readers drag the slider to compare them. It's perfect for product results, makeovers, photo edits, and transformations.
How to add a before and after block
Open your blog post in the vevy editor.
In the left sidebar, find Before/After under the Layout section.
Drag it into your post where you want it to appear.
Click the block to open its settings on the right.
How to customize your before and after block
Click the block, then use the Block settings panel on the right:
Before Image — Click Upload or pick from your Library, then add a label (for example,
Before).After Image — Click Upload or pick from your Library, then add a label (for example,
After).Orientation — Set the slider to horizontal or vertical.
Initial slider position — Choose where the slider starts (for example, 50%).
Corner radius — Round the image corners to match your style.
Show labels — Turn the Before and After labels on or off.
Supported image formats: JPG, PNG, GIF, WebP, and SVG.
Tips
Use two images that are the same size for a clean compare.
Keep both shots at the same angle so the change is clear.
Set the start position to 50% so readers see both sides first.
SEO tip: Add clear labels and a short caption nearby. This helps search engines and AI search understand what your images show.