A responsive product showcase page built with Bootstrap v5 and vanilla JavaScript. It is designed for product listings that need a clean card layout and a simple image-switching interaction based on color swatches.
This demo focuses on a practical UI pattern:
- 3 columns per row on desktop
- 1 column per row on mobile
- Click color swatches to switch the main product image
- No third-party slider library required
- HTML5
- CSS3
- Bootstrap v5
- Vanilla JavaScript
This project keeps the implementation lightweight and easy to maintain:
- Bootstrap handles the responsive grid system and spacing.
- Vanilla JavaScript is used for image switching, avoiding unnecessary dependencies.
- The code is simple enough to adapt into static websites, landing pages, CMS templates, and WordPress page modules.
This layout is suitable for many product presentation scenarios, such as:
- Aluminum railings and fencing products
- Building materials and home improvement catalogs
- Outdoor furniture or garden product listings
- Product landing pages with multiple color or finish options
- Small business websites that need a lightweight product showcase section
It is especially useful when each product has:
- A main visual image
- Several color or finish options
- A short list of selling points
- A responsive layout requirement for both desktop and mobile devices
The layout uses Bootstrap 5 responsive columns to achieve:
- Desktop: 3 product cards per row
- Tablet: adaptive multi-column layout
- Mobile: 1 product card per row
Each product card contains its own independent image-switching logic. When a user clicks a swatch:
- the main image updates instantly
- the active swatch state changes
- the selected color label is updated
This project intentionally avoids slider libraries for a simpler use case. If the requirement is only click-to-switch image behavior, native JavaScript is often a better choice than a full carousel solution.
The HTML structure is easy to duplicate and customize for more products. Each card can be extended with:
- custom pricing
- product descriptions
- CTA buttons
- badges
- links to product detail pages
Because the project is based on standard front-end technologies, it can be:
- uploaded directly to GitHub
- deployed on GitHub Pages
- integrated into WordPress templates
- embedded into existing Bootstrap-based websites
.
├── index.html
├── css/
├── images/
├── js/
├── README.md
└── screenshots/
└── desktop-preview.png
You can rename files based on your own repository structure.
Add your screenshots to the screenshots folder and update the file names if needed.
The interaction is based on simple data attributes. Each swatch button stores:
- the target image URL
- the target color name
When clicked, JavaScript updates the corresponding elements inside the same product card. This makes the component modular and easy to scale across multiple product blocks.
Here are some possible directions for future enhancement:
Load product content from:
- JSON
- CMS fields
- WordPress custom fields
- API responses
This would make the page easier to manage for larger catalogs.
Add:
- “View Details” buttons
- modal popups
- product detail page links
This can improve navigation and conversion flow.
Further improve accessibility by adding:
- stronger keyboard navigation support
- ARIA state feedback
- better screen-reader labels
- focus-visible interaction styles
Improve performance by using:
- WebP or AVIF images
- responsive image sizes
- lazy loading
- optimized asset delivery
Add subtle fade transitions when switching images to create a more polished UI experience.
Convert the component into:
- a WordPress page template
- a Gutenberg block
- a reusable shortcode module
- a custom plugin-based product showcase section
- Clone or download this repository.
- Open
index.htmlin your browser. - Replace the demo content and image URLs with your own product data.
- Add your screenshots to the
screenshotsfolder. - Update the README paths if your screenshot names are different.
This project is licensed under the MIT License.