> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://doc.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

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

[![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902564766/d893338d4cb0e85731147c50986f/AD_4nXfQxZkAgiNfQvbBucdkkH4cjySbasyF6bWyy9wIpDxv8aFA4rlo6GE27KTScS6aM5KfECWqK7q1QgQSBLhESHWm6Ss4tIXUBVzW4yEV4pUdRdjCF_vzs6z9VW4RyU-cdAkeyjhjuyK2Nr6QmV4MTAwpEdKSZ.png?expires=1792402200&signature=2331f7219f37e3612ef65c1d7a32d1ea49a90ff201eefe1114952a3eb8edf4d0&req=dSknFMx4mYZZX%2FMW1HO4zU9GScQhFEJwv3%2FEZWqfzEwm8XUfR%2BtrVFivgyA%2F%0AJNu0CzlG2%2BkAebNGb54%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/1/e/1/8/1e182a5ffd617500/c28c004c-0a4d-49df-953d-f180b2_1bb6d9n.png)

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

[![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902564793/62020ffe624efccf4d77db756f46/AD_4nXfXC-XVnR6D1t1cvVmJ7KbOHjT6rMA40ks3A70crNTWGWSPNOM2nAtqUvpv1-mSOFD0TmVaLoNN_ctOlwcld09qhDXKL-Qj4G_WRpJUDODKhBbsTL0qdtO8amyYmTQeKpYkeyjhjuyK2Nr6QmV4MTAwpEdKSZ.png?expires=1792402200&signature=8039f603ab2a8e9462b82b2bde61e9a0546fcce809bff7ebb97816d6df6948b4&req=dSknFMx4mYZWWvMW1HO4zWy6fCqaCi1iMk0l43blBom8TwxgCypK94oEbJqf%0AxuPT2xtMAIO7%2F9d%2FvK4%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/3/8/5/4/3854515beb9d3a00/dec61997-1195-4eb2-b1f0-7060df_1h7sxed.png)

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.

[![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902564807/6cc3189fdb64b05220fb51be53fa/AD_4nXdz17RTX0xhOK7aJc2KfIsujSprn942NhP_OZ8wftPQbatWKaz8_mdDxybbPG3Tjo6oPBjmTFuYzBTj4Ty3WCC-ZEvd4VfWX5nryL-Dl7okiNu8hd5hpb55gFDdBlVyFxMkeyjhjuyK2Nr6QmV4MTAwpEdKSZ.png?expires=1792402200&signature=91a361e724301d3621660963006ed0a24cd3ad325913524493c3a6a3fb1b0b9b&req=dSknFMx4mYlfXvMW1HO4zVcF%2BmNVz4kfI%2BZZ0Q8lrDzmTtAg4JBpHUJXR5R2%0ApVMuMSeApn3IxPQa3og%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/c/c/7/e/cc7e9bb65efab800/bfead720-dd0a-46ed-bc48-20c645_hpg86b.png)

## 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