Customize the product list CSS/JS

hi, i’m looking for a custom css to change the product list like this:

There are several ways to design like this .
You can use container box (3 horizontal box) and and use image and text element. If this is landing page then then link each image to a single checkout page or If this is checkout page then use custom javascript to select the product from product list and . make the original product list hidden.

Hey everyone! :waving_hand:

Just bumping this older thread from 2023 because the platform has evolved significantly since this was first discussed. I completely understand why custom CSS and JS were the go-to solutions back then for getting your product lists to look exactly the way you wanted them to.

The great news is that you no longer need to rely on custom code, CSS overrides, or complex scripts to customize your product displays!

Funnelish now offers incredibly flexible, native product customization directly inside the visual page builder.

:artist_palette: What You Can Do Natively Now:

  • Visual Styling Menus: You can easily change background colors, adjust typography, tweak border radiuses, and add drop shadows to your product lists and individual variants using the built-in properties panel.
  • Flexible Layouts: Quickly switch between different layout styles (like multi-column grids or vertical lists) without writing a single line of CSS.
  • Drag-and-Drop Elements: Add product images, dynamic pricing, highlight badges (e.g., “Most Popular” or “Best Value”), and strikethrough pricing directly from the element settings.
  • Mobile Responsiveness: All native styling settings are automatically optimized for mobile. You can even toggle specific adjustments for mobile vs. desktop views without having to write custom @media queries.

Why is this the recommended approach?
Relying heavily on custom CSS/JS can sometimes cause your pages to break when browser updates occur or when new platform features are rolled out. Moving your designs over to the native builder ensures your checkout remains lightning-fast, easy to maintain, and perfectly responsive.

If you haven’t explored the updated product list elements inside the Funnelish builder recently, definitely give them a try! You will likely find that you can recreate your previously custom-coded designs entirely within the native UI. :rocket: