Normcore Before/After Section

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


  1. 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

Updated on: 19/10/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!