About Before/After Section
The Before/After section is a powerful tool for showcasing product transformations, demonstrating changes, or highlighting improvements in your store. It enables you to display two comparative images side by side, ideal for:
Product transformations
Service results
Renovation projects
Design changes
Product customizations
The section stands out for its ability to present visual comparisons effectively while maintaining full customization control for both desktop and mobile displays.
How to Access Before/After Section
From any page in your Normcore Admin Dashboard, click the "Add section" button, search for "Before/After" and select it.
After adding the Before/After section, customize its appearance and functionality using the available settings.
Basic Components
The Before/After section only has one component: Before/After.
To begin customizing, click the Before/After section to access its settings.
General
Within General settings, you can configure:
Color scheme
Section heading
Text size
Section description
Image Settings
Before Image
Upload main image or use "Explore free images"
Recommended size: 2000 x 1200px .jpg
Optional mobile-specific image
Supports "Explore free images" option
After Image
Upload main image or use "Explore free images"
Using the same ratio image as Before image is recommended
Note: Using a different image may make After image cropped
Optional mobile-specific image with same recommendations
Text Configuration
Customize "Before" text label
Customize "After" text label
Layout Options
Configure two types of screen resolutions:
Desktop layout: Heading alignment
Mobile layout: Heading alignment
Custom CSS
Custom CSS options available for advanced customization
Common Cases and FAQs
1. How to ensure the best image quality for Before/After comparisons?
When uploading images for the Before/After section, follow these recommendations:
For desktop: Use 2000 x 1200px .jpg images
For mobile: Use 1200 x 1200px .jpg images
Maintain the same aspect ratio between Before and After images to prevent cropping
Use high-quality, well-lit images for the best comparison results
2. Why should I use separate mobile images?
Consider using separate mobile images when:
Your desktop images don't display well on smaller screens
The comparison details are hard to see on mobile devices
You want to optimize loading times for mobile users
The aspect ratio needs adjustment for better mobile viewing
3. How can I ensure my Before/After section is responsive?
The Before/After section offers independent desktop and mobile layout settings:
Configure separate heading alignments for desktop and mobile
Use dedicated mobile images when needed
Text adjusts automatically for different screen sizes
Layout automatically optimizes for mobile viewing
4. What's the best way to use the text customization options?
For effective text customization:
Keep labels clear and concise ("Before"/"After" are recommended defaults)
Use the section heading to provide context
Utilize the section description to add necessary details
Consider your color scheme for optimal text visibility
5. When should I use Custom CSS?
Custom CSS is beneficial when:
You need specific brand styling beyond the default options
You want to adjust spacing or alignment precisely
You're creating a unique layout for special promotions
You need to match existing store design elements