> For the complete documentation index, see [llms.txt](https://nestable-studio.gitbook.io/test/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nestable-studio.gitbook.io/test/theme-sections/before-and-after.md).

# Before & After

The Custom Liquid module allows merchants to add Liquid code to implement more custom functions, such as custom logic, dynamic content, or advanced features through code insertion.

### Before & After

* **Page width**: There are three options: Page Container, Stretched, and Full Width. Choosing different widths will present different visual effects.
* **Color scheme**: Select or edit a color scheme to define the color styles of all elements on the page, including background color, text color, etc.

#### Section Header

* **Subheading**: Set a subheading.
* **Title**: Set a main title.
* **Title size**: Set the size of the title (Small, Medium, Large, Extra Large, Maximum).
* **Description**: Add descriptive text to further explain relevant information.
* **Text alignment**: There are three text alignment options: Left-aligned, Center-aligned, Right-aligned.

### (I) Settings

* **Image placement**: You can choose to place the image in three modes: Bottom, Left, Right.

### (II) Section Padding

* **Top**: Manually drag the slider to adjust the top margin, with a minimum of 0px and a maximum of 100px.
* **Bottom**: Manually drag the slider to adjust the bottom margin, with a minimum of 0px and a maximum of 100px.

### (III) Image Settings

* **Image settings**: Manually drag the slider to adjust the display height of the image, with a minimum of 300px and a maximum of 800px.
* **Before image**: Upload and modify the image.
* **Before text**: Add a title for the "Before" image, such as "Before".
* **After image**: Upload and modify the image.
* **After text**:Add a title for the "After" image, such as "After".