I’m trying to create a rotating client logo section on my HubSpot site. I want to display multiple company logos that automatically cycle through or can be scrolled manually. I found an example in the HubSpot style guide showing exactly what I need, but I’m not sure how to actually implement this on my website pages. Has anyone successfully added a similar logo carousel feature? What’s the best way to set this up in HubSpot? Should I use a custom module or is there a built-in component I can use? Any guidance would be really helpful.
The Problem:
You’re trying to create a rotating client logo section on your HubSpot site, displaying multiple company logos that cycle automatically or can be scrolled manually. You’ve found an example in the HubSpot style guide, but you’re unsure how to implement it. You’re considering custom modules or built-in components.
Understanding the “Why” (The Root Cause):
Manually creating and updating a rotating logo section in HubSpot can be time-consuming and prone to errors, especially when the number of client logos changes frequently. Using a built-in component might be limiting in terms of customization and responsiveness. A custom-built solution offers flexibility but requires coding expertise. Therefore, automating the process offers the best balance between ease of maintenance and visual appeal. Using a service that directly integrates with your CRM data is more efficient than manually updating a module every time client information changes.
Step-by-Step Guide:
-
Automate Logo Updates with a Third-Party Service: Leverage a service like Latenode (or a similar solution) to manage your client logos efficiently. These services typically integrate with your CRM (in this case, HubSpot) to pull logo data, resize and optimize images, and then automatically update the logo section on your HubSpot site via API calls.
-
Configure the Third-Party Service: Connect the chosen service to your HubSpot account, specify the location of your client logo data within your CRM (e.g., a custom contact property or a specific deal field), and set the image resizing and optimization parameters (dimensions, formats, etc.) based on your website’s design. Set the desired update frequency (e.g., daily).
-
Create a Simple Custom HubSpot Module: Create a basic HubSpot custom module using HTML and CSS to display the logos. This module will receive the updated logos from the third-party service, and it should be designed for responsive scaling so that it adjusts to different screen sizes. The basic HTML structure will contain a container (e.g., a
<div>) for the logo images. You will likely use CSS to style the module, setting the layout and appearance. -
(Optional) Implement Client-Side Image Loading: If you have many logos, consider client-side image loading techniques such as lazy loading to improve the initial page load time. The code in Step 3 should use a method to load image files from your HubSpot file manager efficiently, to support the image carousel. This usually involves loading the image into the carousel only when it enters the viewport.
-
Test and Deploy: Thoroughly test the module on different devices and browsers to ensure the responsiveness and functionality. After testing, deploy the module to your HubSpot site.
Common Pitfalls & What to Check Next:
- CRM Data Structure: Ensure your client logo data is consistently structured within your HubSpot CRM, as the automation service relies on this data structure to correctly pull and display the images.
- Image Optimization: For large images, focus on quality compression to keep file sizes small and load times fast. Choose efficient image formats (e.g., WebP).
- Error Handling: Implement error handling in your custom module to gracefully deal with situations such as missing images or API connection problems. Consider logging API responses and potential issues to diagnose them.
- HubSpot API Limits: Be mindful of the HubSpot API rate limits; if you’re processing many logos at once, adjust the service’s update frequency or implement appropriate delay mechanisms.
Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!
I’ve done this for three HubSpot sites. Skip the built-in components - custom modules work way better. Build a custom HubL module with repeatable field groups for logo uploads and links. Use Swiper.js for the slider - it’s lightweight and handles auto-rotation plus manual controls perfectly. The trick is CSS that keeps logos the same size no matter what dimensions you upload. I use fixed container heights with object-fit cover so the layout doesn’t jump around. HubSpot’s image optimization helps with load times, but add lazy loading if you’ve got tons of logos. Whole thing takes 2-3 hours including device testing.
the marketplace has some good options if u don’t want to code. search “logo slider” and u’ll find a few solid logo carousel assets. i used LogoFlow last month - drag and drop setup with decent customization. not as flexible as custom modules but way faster than building from scratch.
Built this exact thing 6 months ago - way easier than most people think. Everyone jumps straight to custom dev when HubSpot’s Image Slider module (under Design Tools) does the job perfectly. Just upload your logos, set the timing, add navigation arrows if you want them. Takes 20 minutes max. It keeps aspect ratios consistent and works great on mobile right out of the gate. Only downside is you can’t pull logos from external sources dynamically, but for basic client showcases it’s perfect. I’ve used this setup on tons of HubSpot sites with zero coding. Even with 15+ logos it runs smooth since HubSpot compresses everything automatically.
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.