--- title: Product Detailer Pro Documention description: Product Detailer Pro Documention --- [Skip to content](https://www.modfrybus.shop/product-detailer-pro-documention#main-content) [![Modfrybus-logo](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Modfrybus-logo.png?width=90&height=52&name=Modfrybus-logo.png)](https://www.modfrybus.shop/?hsLang=en) - [Home](https://www.modfrybus.shop/) - [About](https://www.modfrybus.shop/about-us) - [Services](https://www.modfrybus.shop/services) - [Pricing](https://www.modfrybus.shop/pricing) - [Blog](https://www.modfrybus.shop/modfrybus-blog) - [Contact](https://www.modfrybus.shop/contact-us) Open main navigation Close main navigation - [Home](https://www.modfrybus.shop/) - [About](https://www.modfrybus.shop/about-us) - [Services](https://www.modfrybus.shop/services) - [Pricing](https://www.modfrybus.shop/pricing) - [Blog](https://www.modfrybus.shop/modfrybus-blog) - [Contact](https://www.modfrybus.shop/contact-us) - [Marketplace Assests](https://app.hubspot.com/ecosystem/48318526/marketplace/modules?eco_providers=Modfrybus) [Marketplace Assests](https://app.hubspot.com/ecosystem/48318526/marketplace/modules?eco_providers=Modfrybus) #### Product Detailer Pro Documention ## 1. Introduction (Overview) The **Product Detailer Pro** module Showcase lets users switch between product variants and view updated images, pricing, and details instantly using a smooth image slider—without reloading the page.       ## 2. Key Features - **Variant-Based Product Display:** Show multiple product variants in a single section with clear labels and selection options. - **Dynamic Product Image Slider:** Display multiple images per variant with a large preview and thumbnail navigation. - **Instant Variant Switching:** Images, pricing, and stock status update instantly without page refresh. - **Flexible Purchase Links:** Each variant can connect to HubSpot Payments, internal pages, external URLs, or CTA popups. - **Real-Time Pricing & Availability:** Clearly display updated price and stock information for each selected variant. - **Optional Bottom Accordion Section:** Add expandable content below the product area for descriptions, specs, FAQs, or extra details. - **Full Customization:** Customize colors, fonts, sizes, and layout. - **Mobile-Friendly & Responsive:** Optimized for all screen sizes with a smooth user experience on mobile devices. ## 3. Installation – Downloading the Module from HubSpot Marketplace - Log in to your HubSpot account. - Go to the **Marketplace** from the main navigation menu. - Search for your module by name. - Find the module in the results and click **Install**. - If it’s a paid module, you can also click **Buy Now** to purchase and install directly. ## 4. How to Use – Adding the Module to Your Page - Open your HubSpot page editor. - Click on **Add Module**. - Search for your module by name. - Drag and drop the module into the desired section of your page. - The **Product Detailer Pro** module allows users to explore multiple product variants in one place. Each selection updates the product image slider, pricing, and availability instantly without page reloads, delivering a smooth, interactive, and conversion-focused experience across all devices. ## 5. Module Settings Guide **1. Content Tab**  - **Product Image Slider** Add a main image slider with a thumbnail slider for easy navigation. - **Category Tag & Product Title** Display a product category tag along with the product title. - **Multiple Variants** Add and manage multiple product variants with ease. - **Variant Details** Configure each variant with its own name, price, stock status, and availability. - **Variant-Specific Buttons** Add a unique action button for each variant. - **Accordion Section** Include an accordion section for additional product details or information. - **Spec Sheet Button** Add a spec sheet button linking to an external URL, internal page, file, or popup. - **HubSpot Payments Integration** Connect each variant’s button to HubSpot Payments, external links, files, or CTA popups. ![Group 1000002219](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Group%201000002219.png?width=1000&height=785&name=Group%201000002219.png)   **2. Style Tab** - **Module Width:** Choose between **Custom Width** or **Full Width** for the module. - **Module Spacing:** Adjust spacing (margin & padding) around the module. - **Category Tag & Heading Styles** Customize font family, font size, text color, and text transform (uppercase/lowercase). - **Variant Tabs Styling** Control label font size and color, price font color, border styles, and active state design. - **Variant Item Styles** Adjust font color, font size, and border color for variant items. - **Spec Sheet Styling** Customize text color, font size, icon color. - **Button Styling** Configure text color, background color, border, size, and spacing. - **Accordion Styling** Set font color, font size, and border color for accordion titles and content. - **Main & Thumbnail Slider Styles** Define height for main and thumbnail sliders on desktop, tablet, and mobile, including border radius. - **Lightbox Image Popup Styles** Customize border radius and box shadow for the image popup. ![Group 1000002213](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Group%201000002213.png?width=1000&height=753&name=Group%201000002213.png)   ## 6. Examples / Demo Preview View the module in action:[https://www.modfrybus.shop/product-detailer-pro](https://www.modfrybus.shop/product-detailer-pro?hsLang=en) ## 7. Support & Contact For questions or support, contact us at [productqueriemodfrybus@outlook.com](mailto:productqueriemodfrybus@outlook.com) We’re happy to help! [![Modfrybus-logo](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Modfrybus-logo.png?width=150&height=87&name=Modfrybus-logo.png "Modfrybus-logo")](https://www.modfrybus.shop/?hsLang=en) [Privacy Policy](https://www.modfrybus.shop/privacy-policy?hsLang=en) [Terms and Conditions](https://www.modfrybus.shop/terms-and-conditions?hsLang=en) [Refund Policy & Support](https://www.modfrybus.shop/modfrybus-refund-policy-support?hsLang=en) Copyright © 2025, Modfrybus