How to create the product main image module

How To
1

d983a23d-557f-43f3-970a-987b1b93ab95
d983a23d-557f-43f3-970a-987b1b93ab951543Ă—681 49.2 KB

The question one: I want to design the style of the main image for the product detail page.
The large image can be switched left and right. I have already tried using the Slider module.
Then there are several carousel images below. By clicking the left and right arrows with the mouse, you can switch between them. When you click on the picture below with the mouse, the top picture will also switch to the corresponding one. Similar to the main image of this website page. Automatic Soldering Robot Manufacturer - I.C.T Robot

I just can’t figure it out, especially since I know I need to use the “Query loop” function, but I have no idea how to do it.

image
image1302Ă—274 31.3 KB

The Question two: How did I manage to create a button that, when clicked, would reveal the hidden text as shown in the picture below?

image
image1301Ă—469 70.7 KB

Thank you for your attention.:folded_hands:

3

Hey Mark,

Both of those options can be done native with Bricks.

  1. You can use the Woocommerce Product Gallery Element.
  2. You Can use the Nestable Accordion Element.

If you want a video let me know and I can do one up.

Woo-Product-–-Single-Template--06-26-2026_05_05_AM
Woo-Product-–-Single-Template--06-26-2026_05_05_AM1920×917 137 KB

Woo-Product-–-Single-Template--06-26-2026_05_01_AM
Woo-Product-–-Single-Template--06-26-2026_05_01_AM1920×917 170 KB

5

Thank you for your suggestion. I’ll try to figure it out on my own first.
Thank you very much again.

1 Like
7

Sorry for taking up so much of your time, but I would really appreciate your help with this.

Could you please share a short video tutorial or a simple step-by-step guide on how to set up the WooCommerce Product Gallery Element in Bricks?

I have already installed WooCommerce, but my current products are still created as regular Pages, not WooCommerce Products. When I checked the Product Gallery Element, I couldn’t find where to change or upload the gallery images.

Could you kindly advise whether I need to convert these Pages into WooCommerce Products first, or if there is another way to use the WooCommerce Product Gallery Element with my current setup?

Thank you so much for your patience and support.

Best regards

image
image1834Ă—844 120 KB

8

Hey Mark – no worries, I can help you with that.

So get out the popcorn and get ready for this blockbuster on creating a Woocommerce Single Product Template.

Video: https://drive.google.com/file/d/1BxVPOjYLk67TGBAmwoEEOePFfIYCy9kZ/view?usp=sharing

Cheers

10

image
image1831Ă—928 198 KB

Hi, thanks for the video, thank you so much.

Here is this my website: https://smt44.com/wave-soldering-machine-acrab350/

I have a question. How can I make the text below “read me” default to being hidden? I have set it many times. When I open the page, all the text is still displayed.

Thank you again.

12

You’re welcome for the video.

As for the accordion, I cannot reproduce the issue. The only thing I can think of is you have the “Independent Toggle” turned on, you can turn that off.

But maybe try and build a new accordion and don’t change any of the settings other then the font and icon.