--- title: Documentation --- [![681b0d97a2aa6735a63327b8\_brand-white-logo](https://hsmarketplace.shunyavkash.com/hubfs/Imported%20images/681b0d97a2aa6735a63327b8_brand-white-logo.svg "681b0d97a2aa6735a63327b8_brand-white-logo")](https://hsmarketplace.shunyavkash.com/home-1?hsLang=en) - [Examples](https://hsmarketplace.shunyavkash.com/modules/flexible-before-and-after?hsLang=en) - [How to use](https://hsmarketplace.shunyavkash.com/modules/flexible-before-and-after/how-to-use) [Install Now](https://ecosystem.hubspot.com/marketplace/modules/flexible-before-after-module-by-shunyavkash) # Flexible Before & After Documentation - [How to Use](https://hsmarketplace.shunyavkash.com/modules/flexible-before-and-after/how-to-use#how_to_use) - [Content Customization](https://hsmarketplace.shunyavkash.com/modules/flexible-before-and-after/how-to-use#content_customization) - [Style Customization](https://hsmarketplace.shunyavkash.com/modules/flexible-before-and-after/how-to-use#style_customization) ##### Supported Browsers Overview | ![safari-icon](https://hsmarketplace.shunyavkash.com/hubfs/safari-icon.svg) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 65 and above | ![chrome-img](https://hsmarketplace.shunyavkash.com/hubfs/chrome-img.svg) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 65 and above | ![firefox-icon](https://hsmarketplace.shunyavkash.com/hubfs/firefox-icon.svg) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 65 and above | ![edge-icon](https://hsmarketplace.shunyavkash.com/hubfs/edge-icon.svg) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 65 and above | ![brew](https://hsmarketplace.shunyavkash.com/hubfs/brew.svg) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 65 and above | ![opera\_6124994](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/opera_6124994.png?width=512&height=512&name=opera_6124994.png) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/right.svg) Version 65 and above | | --- | --- | --- | --- | --- | --- | ### How to Use **Installation**: Navigate to Marketing \> File & Templates \> Design Tools \> @marketplace \> Shunyavkash folder to find the Flexible Before & After Module. Install it. ![Screenshot 2026-01-07 at 11.30.49 AM](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/Screenshot%202026-01-07%20at%2011.30.49%20AM.png?width=287&height=565&name=Screenshot%202026-01-07%20at%2011.30.49%20AM.png) **Integration**: In the Marketing section, choose Website Menu \> Website Pages and add the "Before vs After Showcase" module to the page you want. ![Screenshot 2026-01-07 at 11.33.33 AM](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/Screenshot%202026-01-07%20at%2011.33.33%20AM.png?width=287&height=88&name=Screenshot%202026-01-07%20at%2011.33.33%20AM.png) ### Content Customization - **Before Image** : Decide whether to choose an Image from your systerm upload in hubspot - **After Image** : Decide whether to choose an Image from your systerm upload in hubspot - **Heading**: Enter the Section title here. - **Richtext**: Describe the service in this section. - **Tabs Label** : Enter the Tab Label here. ![Screenshot 2026-01-07 at 11.34.17 AM](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/Screenshot%202026-01-07%20at%2011.34.17%20AM.png?width=287&height=612&name=Screenshot%202026-01-07%20at%2011.34.17%20AM.png) **![Screenshot 2026-01-07 at 11.35.22 AM](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/Screenshot%202026-01-07%20at%2011.35.22%20AM.png?width=287&height=622&name=Screenshot%202026-01-07%20at%2011.35.22%20AM.png) ![Screenshot 2026-01-07 at 11.36.05 AM](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/Screenshot%202026-01-07%20at%2011.36.05%20AM.png?width=287&height=633&name=Screenshot%202026-01-07%20at%2011.36.05%20AM.png)** ### **Style Customization** Utilize the Style Group options to refine the Before vs After Showcase: ![Screenshot 2026-01-07 at 11.37.08 AM](https://hsmarketplace.shunyavkash.com/hs-fs/hubfs/Screenshot%202026-01-07%20at%2011.37.08%20AM.png?width=287&height=607&name=Screenshot%202026-01-07%20at%2011.37.08%20AM.png)   ### We’re Not Here to Sell, We’re Here to Solve Talk with strategic minds and developers, not just salespeople. Whether it’s your website, product, platform, or automation flow, let’s sketch the blueprint together. No fluff. Just meaningful collaboration. We reply same day. [Explore Together](https://www.shunyavkash.com/) ![Supported](https://hsmarketplace.shunyavkash.com/hubfs/raw_assets/public/shunyavkash-marketplace/images/brand-white-logo.svg) ![copyrights-logo](https://cdn.prod.website-files.com/67a2f77206cba07f5946da3d/6811cc6a38d66ca841fca6d9_copyrights-logo.svg) 2026 Shunyavkash — All rights reserved | [Privacy Policy](https://www.shunyavkash.com/privacy-policy) | [Cookie Policy](https://www.shunyavkash.com/cookie-policy) | Designed by [Shunyavkash](https://www.shunyavkash.com/) - - -