I have cloned the default Product Module and begun customizing it in the Design Manager. I’m excited because I was able to change the default values of the fields so it styles depending on our brand guidlines. It’s nice because a marketer can just drop the module in, and apart from changing specific details of a product, the layout is correct without any changing of field settings or further coding.
I’ve even connect a Custom Property to the module so when a marketer creates a Product Object, they select a Manufacturer in a Dropdown Custom Property. By selecting the Manufacturer, it automatically updates the logo based on the selected Manufacturer.
I’m almost done with this project, but I am struggling with the last bit. Currently, the default Product Module allows for 1 image. I have been attempting to customize this to include an optional image gallery / slider, so a marketer can choose to have 1 (required) or up-to 20 images on the product page.
Furthermore, because I am using Custom Properties, I have created duplicates of the Image Field within the Product Creation Form, which happens to just be a Text field asking you to include a URL to where the image is hosted. I’d like to use something like this, because in theory, an individual could create a spreadsheet and include all this information for as many products as they want and they can import it to create all the Product Objects. A little complex, but the idea is that the workflow afterwards is a simple procedure.
Hi, @MChe totally get the goal here.
You want marketers to drop in a product module, pick a manufacturer, and optionally add up to 20 images without touching code.
The cleanest approach is to turn the “extra images” into a repeater group inside your custom module. In Design Manager, edit the cloned module, add a repeater field (call it something like “product_gallery”), then inside that repeater add an image field.
Set the repeater’s max to 20, leave min at 0, and the original “main image” field stays as your required image. In your module’s HTML/HubL, loop over the repeater: {% if module.product_gallery %}<div class=“gallery”>{% for image in module.product_gallery %}<img src=“{{ image.src }}” alt=“{{ image.alt }}” />{% endfor %}</div>{% endif %}.
Style with your preferred slider (e.g., Swiper or slick) and enqueue the JS/CSS in the module settings. For the data entry side, you don’t need separate text‑URL properties on the Product object—marketers can upload or paste an image URL directly into each repeater slot right in the page editor.
If you still want spreadsheet imports, keep those URL text properties on the Product object, then in your module add conditional logic: pull {{ content.product.<property> }} values into the repeater loop when they exist, otherwise rely on manual uploads.
That way bulk imports populate the images automatically, but a marketer can still add or reorder images in the editor. Quick tip: set a fallback thumbnail for any empty repeater slot so the layout doesn’t break. With the repeater pattern you get “one or many” images without bloating the UI, and you don’t need separate modules or hard‑coded image tags—everything stays inside the single product module you’ve already branded.
Hope it helps.
