How to display multiple images on Brooklyn Theme product page?

How do I show more images on Product page in Brooklyn Theme? Will only show one.

HI,

Can you share your store url

@gingermorris From over here you can add images into product page :
products-> click on image on which you want to add extra images.

Thankyou - I will you that thanks

Hello @gingermorris ,

To display more images on the product page in the Brooklyn theme on Shopify, you’ll need to make some modifications to the theme code.

Here’s a step-by-step guide on how to do it:

Log in to your Shopify admin panel.

Go to Online Store > Themes.

Look for the theme and click on the Actions > Edit code.

Now, you’ll need to modify the product template file to show more images:

In the “Sections” directory, click on “product-template.liquid” to open the file in the code editor.

Search for the code that displays the product image. It will look something like this:

{{ featured_image.alt | escape }}

Copy the entire code block and paste it below the existing code block. This will duplicate the image display code.

By default, the second image will be displayed below the first one. If you want to change the layout, you can modify the HTML structure and CSS styles to suit your needs.

After making these changes, save the file and preview your product page to see the additional images displayed. Repeat steps 4-7 if you want to display even more images.

Remember to test your changes thoroughly to ensure they don’t affect the overall functionality and responsiveness of your website.

If you need more help with this, we are there.

All the best,

CedCommerce

Hello @gingermorris ,

To display more images on the product page in the Brooklyn theme on Shopify, you’ll need to make some modifications to the theme code.

Here’s a step-by-step guide on how to do it:

Log in to your Shopify admin panel.

Go to Online Store > Themes.

Look for the theme and click on the Actions > Edit code.

Now, you’ll need to modify the product template file to show more images:

In the “Sections” directory, click on “product-template.liquid” to open the file in the code editor.

Search for the code that displays the product image. It will look something like this:

{{ featured_image.alt | escape }}

Copy the entire code block and paste it below the existing code block. This will duplicate the image display code.

By default, the second image will be displayed below the first one. If you want to change the layout, you can modify the HTML structure and CSS styles to suit your needs.

After making these changes, save the file and preview your product page to see the additional images displayed. Repeat steps 4-7 if you want to display even more images.

Remember to test your changes thoroughly to ensure they don’t affect the overall functionality and responsiveness of your website.

If you need more help with this, we are there.

All the best,

CedCommerce