Articles on: Theme Sections

Before/After image

The ' Before/After image section' is a powerful and visual way to demonstrate the effectiveness of your products or services. By displaying clear comparison images, you can easily show customers the difference and significant improvements. This is a great tool for building trust and convincing customers of the real value you provide.


1. How to access Before/After image section?


Step 01: From Shopify Admin, click on Online Store > Select Theme > In the Current theme section, click the Customize button.



Step 02: In the theme editor (Customize), click the Sections button > Click the Add Section button or hover below another section until the (➕) icon appears > In the Sections tab, scroll through the list or use the search bar to find and select Before/After image section



2. How to customize Before/After image section?


2.1. Before/After image


Once you add the Before/After image section, you can customize its settings in the left or right sidebar (depending on your screen size)


  1. General


  • Direction: Select the display direction for the before and after images (horizontal or vertical), customizing how the images are compared.
  • Reveal on scroll: Enable animations for the before/after image section when it becomes visible while scrolling, enhancing interactivity and attracting attention.
  • Color scheme: Selects the color palette for the section, ensuring harmony with the overall website design and creating a unified visual experience.



  1. Drag cursor


  • Background & line: Select the background and line color for the element, customizing the visual appearance.
  • Icon: Select the color for the displayed icon, customizing the appearance and ensuring consistency with the overall design.
  • Start position: Define the initial position of an effect or element



  1. Image caption


  • Background: Select the background color for the element, customizing the visual appearance and creating emphasis.
  • Text: Select the color for the text displayed within the element, ensuring contrast and readability.



  1. Section padding


  • Top padding (Desktop/Mobile): Creates space above the content within an element, separating it from elements above and improving visual layout.
  • Bottom padding (Desktop/Mobile): Creates space below the content within an element, separating it from elements below and improving visual layout.



  1. Theme Settings


In the Before/After image > click open Theme Settings tab


  • Reveal section on scroll: Activates animations when the section becomes visible while scrolling, enhancing engagement and interactivity.
  • Page width: Defines the maximum width of the page content, controlling layout and ensuring optimal display across devices.



  1. Custom CSS


Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.


Add custom styles to this section only.


To add custom styles to your entire online store, go to Theme settings


2.2. Section header


Choose a heading that aligns with your brand’s tone and message to build trust and engagement.



Clicking on the Section header title under Before/After image section, you can customize that section's settings in the left or right sidebar (depending on your screen size)


  • Use custom maximum width: Allows you to set a custom maximum width for the section content
  • Maximum width: Defines the maximum width of the section content, ensuring content displays proportionally and doesn't stretch excessively on large screens.
  • Alignment: Adjusts the alignment of content within the section (left, right, center), controlling the layout and creating visual balance.



2.2.1. Heading block


To add Heading block to the Section header, click the Add item button (plus icon ➕) under the Section header.

Once the Heading block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)


  • Heading: Enter the title text for the section, providing a clear and attention-grabbing title for viewers.
  • Heading size: Adjust the font size of the heading, creating emphasis and visual hierarchy for the content
  • Heading tag (Will affect SEO): Select the HTML tag for the heading (eg: H1, H2, H3), affecting SEO structure and content hierarchy.
  • Uppercase: Convert the heading text to uppercase, creating emphasis and prominence.



2.2.2. Sub heading block


To add Sub heading block to the Section header, click the Add item button (plus icon ➕) under the Section header.

Once the Sub heading block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)


  • Text: Enter the text content for the element, conveying information or messages to users
  • Font: Select the font style for the text, choose between font for body content and font for heading.
  • Size: Adjust the font size of the text (small, medium), controlling the displayed text size.
  • Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.
  • Uppercase: Convert the text to uppercase, creating emphasis and highlighting the content.



2.2.3. Text block


To add Text block to the Section header, click the Add item button (plus icon ➕) under the Section header.

Once the Text block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)


  • Text: Enter the text content you want to display, allowing customization of the message and information conveyed.
  • Color: Select the color for the text, distinguishing between primary and secondary colors to match the design
  • Size: Adjust the font size of the text, ensuring readability and compatibility with the website layout (eg: Small, Medium, Large,...)
  • Hide on mobile: Hides or shows the text on mobile devices, optimizing the user experience on different screen sizes.



2.2.4. Caption block


To add Caption block to the Section heading, click the Add item button (plus icon ➕) under the Section heading.

Once the Caption block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)


  • Text: Enter the text content for the element, conveying information or messages to users.
  • Font: Select the font style for the text, choose between font for body content and font for heading.
  • Size: Adjust the font size of the text (small, medium), controlling the displayed text size
  • Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.
  • Uppercase: Convert the text to uppercase, creating emphasis and highlighting the content.



2.2.5. Spacer block


To add Spacer block to the Section heading, click the Add item button (plus icon ➕) under the Section heading.

Once the Spacer block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)


  • Space: Setting space between elements creates clear separation.
  • Tablet space: Optimizes the spacing between elements on tablet screens, ensuring content is displayed balanced and easy to interact with on medium-sized screen devices.
  • Mobile space: Adjusts the spacing between elements on mobile phone screens, optimizing the user experience on small screens



2.2.6. Icon block


To add Icon block to the Section heading, click the Add item button (plus icon ➕) under the Section heading.

Once the Icon block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)


If all three options - Icon, Custom image icon and Custom SVG icon - are added, the priority order will be: Custom SVG icon > Custom image icon > Icon


  • Icon: Select an icon from the available library to display, enhancing visual appeal and conveying messages quickly.
  • Custom image icon: Upload your own custom image icon, enabling personalization and brand alignment.
  • Custom SVG icon: Use SVG icons from libraries like Remixicon or Tabler Icons, ensuring sharp image quality and scalability.
  • Icon height: Adjust the icon height on desktop screens, controlling the display size.
  • Tablet icon height: Adjust the icon height on tablet screens, optimizing display for this device.
  • Mobile icon height: Adjust the icon height on mobile phone screens, ensuring the icon displays appropriately on small screens.
  • Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.



How to get an SVG icon?


Step 1: Click the link Get a svg remixicon or tabler icons under Custom SVG icon option

Step 2: Search icon you want > Click the icon > click Copy SVG button

Step 3: Go back to theme customize and paste SVG icon into the field


2.3. Image block


Clicking on the Image title under Before/After image section, you can customize that section's settings in the left or right sidebar (depending on your screen size)


  • Image: Upload the main image to display in the section, providing the primary visual element for the content.
  • Mobile image: Upload a separate image optimized for mobile devices. If none is provided, the desktop image will be used.
  • Caption: Enter a brief caption for the image, providing additional information or context for the visual.


Updated on: 15/08/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!