--- title: Compare Image Slider Module Documentation description: Documentation for the HubSpot module Compare Image Slider Module by Awwal Design --- - [Home](https://awwaldesign.com) - [Testimonials](https://awwaldesign.com/testimonials) - [Hubspot Themes](https://awwaldesign.com/hubspot-themes) - [Awwal blog theme](https://awwaldesign.com/hubspot-themes/awwal-blog-theme) - [Nue blog theme](https://awwaldesign.com/hubspot-themes/nue-blog-theme) - Hubspot Modules - [Hello Bar](https://awwaldesign.com/modules/hello-bar) - [Compare Image Slider](https://awwaldesign.com/modules/compare-image-slider-module) - [Countdown Timer](https://awwaldesign.com/modules/countdown-timer-module) - [Interactive World Map](https://awwaldesign.com/modules/interactive-map-module-for-hubspot) - [Interactive USA Map](https://awwaldesign.com/modules/interactive-usa-state-map-module-for-hubspot) [Get in touch](https://awwaldesign.com/contact?hsLang=en) - GENERAL - [Home](https://awwaldesign.com) - [About](https://awwaldesign.com/about-awwal-design) - [Testimonial](https://awwaldesign.com/testimonials) - [Contact](https://awwaldesign.com/contact) - PRODUCTS - [HubSpot Themes](https://awwaldesign.com/hubspot-themes) - [HubSpot Modules](https://awwaldesign.com/hubspot-modules) - SUPPORT - [Documentation](https://awwaldesign.com/docs) - [Theme Support](https://awwaldesign.com/support) - BLOG - [Blog](https://awwaldesign.com/blog) - [HOME](https://awwaldesign.com) - [TESTIMONIALS](https://awwaldesign.com/testimonials) - [HUBSPOT THEMES](https://awwaldesign.com/hubspot-themes) - [Awwal blog theme](https://awwaldesign.com/hubspot-themes/awwal-blog-theme) - [Nue blog theme](https://awwaldesign.com/hubspot-themes/nue-blog-theme) - HUBSPOT MODULES - [Hello Bar](https://awwaldesign.com/modules/hello-bar) - [Compare Image Slider](https://awwaldesign.com/modules/compare-image-slider-module) - [Countdown Timer](https://awwaldesign.com/modules/countdown-timer-module) - [Interactive World Map](https://awwaldesign.com/modules/interactive-map-module-for-hubspot) - [Interactive USA Map](https://awwaldesign.com/modules/interactive-usa-state-map-module-for-hubspot) - [SUPPORT](https://awwaldesign.com/support) - [Documentation](https://awwaldesign.com/docs) - [Awwal Bog Theme Docs](https://documentation.awwaldesign.com/awwal-blog-theme) - [Nue Blog Docs](https://documentation.awwaldesign.com/nue-blog-theme) - [Hello Bar Docs](https://awwaldesign.com/docs/hello-bar) - [Compare Image Slider Docs](https://awwaldesign.com/docs/compare-image-slider-module) - [Countdown Timer](https://documentation.awwaldesign.com/countdown-timer-module) - [Interactive Map](https://documentation.awwaldesign.com/interactive-map-module) - [Theme Support](https://awwaldesign.com/support) - [ABOUT](https://awwaldesign.com/about-awwal-design) - [BLOG](https://awwaldesign.com/blog) [Get in touch](https://awwaldesign.com/contact?hsLang=en) # Getting Started Created By Awwal Team Thank you for choosing to purchase this module! After you've purchased and installed the module, it will automatically be added to your HubSpot account.  You should be able see it under the **Settings** > **Marketplace Downloads** ---   **For ease of reading, we've organized this documentation into three sections** 1. **Installation** 2. **Content options** 3. **Design and styling** Let's explore each of them individually   --- ### **1. Installation** Open any page where you like to display the Compare image module. On the left panel, search the module and simply drag and drop it onto the page. **![](https://awwaldesign.com/hs-fs/hubfs/image-png-Jul-23-2025-08-15-58-0084-PM.png?width=1200&height=656&name=image-png-Jul-23-2025-08-15-58-0084-PM.png)** **Great, you've just added the module, now let's personalize it.** ### **2. Content options** ##### ➤ Add 'Before' image ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Jul-23-2025-08-18-03-9465-PM.png?width=700&height=918&name=image-png-Jul-23-2025-08-18-03-9465-PM.png)   ##### ➤ Add 'After' Image ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Jul-23-2025-08-18-35-2866-PM.png?width=700&height=916&name=image-png-Jul-23-2025-08-18-35-2866-PM.png)   ##### ➤ Add alt texts for both images   ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Jul-23-2025-08-20-03-5662-PM.png?width=700&height=1242&name=image-png-Jul-23-2025-08-20-03-5662-PM.png) ##### ➤ Choose layout style ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Jul-23-2025-08-20-47-6596-PM.png?width=700&height=489&name=image-png-Jul-23-2025-08-20-47-6596-PM.png)   ##### ➤ Choose labels or captions ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Jul-23-2025-08-21-47-2948-PM.png?width=700&height=615&name=image-png-Jul-23-2025-08-21-47-2948-PM.png) Use captions to add descriptive text or context or choose labels when you just want to highlight visual differences. --- ### **3. Design and styling** Use preexisting color options or add your own custom colors. ##### **➤ Pre existing color options** **![](https://awwaldesign.com/hs-fs/hubfs/image-png-Jul-23-2025-08-28-49-3180-PM.png?width=700&height=626&name=image-png-Jul-23-2025-08-28-49-3180-PM.png)** ##### **➤ Custom colors for labels** **![](https://awwaldesign.com/hs-fs/hubfs/image-png-Jul-23-2025-08-26-18-3437-PM.png?width=700&height=860&name=image-png-Jul-23-2025-08-26-18-3437-PM.png)** ##### ➤ Add border to the container If your images are light or blend into the background, simply add a border to make the slider stand out. ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Jul-23-2025-08-34-20-7824-PM.png?width=1400&height=997&name=image-png-Jul-23-2025-08-34-20-7824-PM.png) You can control border thickness, color and style from the style panel. ![](https://awwaldesign.com/hs-fs/hubfs/image-png-Jul-23-2025-08-35-17-6156-PM.png?width=700&height=680&name=image-png-Jul-23-2025-08-35-17-6156-PM.png) - [See All Themes](https://awwaldesign.com/hubspot-themes) - [Theme Documentation](https://awwaldesign.com/docs) - [Theme Support](https://awwaldesign.com/support) [![awwaldesign_white_logo](https://awwaldesign.com/hubfs/Awwal_website_2024/awwaldesign_white_logo.svg "awwaldesign_white_logo")](https://awwaldesign.com/?hsLang=en) [Get in touch](https://awwaldesign.com/contact?hsLang=en) Copyright © 2026. All rights reserved by [Awwal Design](https://awwaldesign.com/?hsLang=en).  - - - - [Privacy Policy](https://awwaldesign.com/privacy-policy) - [Terms and Conditions](https://awwaldesign.com/terms) - [Refund Policy](https://awwaldesign.com/refund-policy)