The Blocksify Product Gallery shows the current WooCommerce product’s main image, thumbnails, and lightbox in a product template.
It is a WooCommerce variation of the Image Gallery block, with the image source fixed to the current product and a sale badge added. Earlier releases called it Product Media.
- Before you start: Activate WooCommerce, add a main image and gallery images to a product, and open a single-product Dynamic Template.
- See Dynamic Templates overview or follow Build a WooCommerce product template.
Where to find it
- Go to Blocksify → Dynamic Templates and open a template that targets single WooCommerce products.
- Open the + (Block Inserter), find Blocksify WooCommerce, and select Product Gallery. The preview product’s images appear in a Showcase layout.
- Select the block and open the settings sidebar. The product-specific controls sit alongside the standard Gallery controls.
Note: Product Gallery appears in the inserter only inside the Dynamic Template editor. A Product Loop uses its own image card element instead.
Source
The Source panel shows Source type as WooCommerce · Product media and reports how many images were resolved. The main product image comes first, followed by the product’s gallery images.
| Setting | Description |
|---|---|
| Main image size | Sets the image size used on the main gallery surface. New Product Galleries start with Product single (WooCommerce). |
| Thumbnail size | Sets the smaller image used by the Showcase strip and lightbox thumbnails. The starting choice is Gallery thumbnail (WooCommerce). |
| Detach from product media | Removes the product connection and sale-badge settings, then turns the block into an empty Image Gallery that you can fill from the Media Library. |
You do not select or reorder images inside the block while it remains connected.
Edit the product to change its image order, alternative text, or captions. Every template using Product Gallery then reads the updated product media; a product with no assigned images displays WooCommerce’s placeholder image.
Settings
The Settings panel is the same as Image Gallery: choose a gallery layout, then set Height and Image fit. Product Gallery starts with Showcase so the main product image and thumbnail strip are immediately visible.
- Grid
- Masonry
- Collage
- Showcase
- Slider
Changing the layout rearranges the current product’s set; it never replaces that set with manually chosen media. If a Beanie has only one image, controls that require multiple images, such as arrows, dots, and a thumbnail strip, do not appear on the storefront.
Showcase options
The panel below Settings takes the chosen layout’s name, such as Showcase options. For Showcase, use Thumbnail mode, Edge, Spacing, and Ratio to arrange the thumbnail strip; see the Image Gallery reference for complete descriptions.
Sale badge
The Sale badge panel is unique to Product Gallery. It is enabled by default and appears only when the current product is on sale.
| Setting | Description |
|---|---|
| Sale badge | Shows or hides the badge for sale-priced products. |
| Show percent | Uses the discount percentage when one number can be calculated. A variable product with different discounts keeps the text label instead. |
| Label | Changes the badge text; an empty field displays the localized “Sale” label. |
| Position | Uses the visual corner control to place the badge in the top-left, top-right, bottom-left, or bottom-right corner. |
Lightbox & captions
This panel keeps the Image Gallery’s Captions and Lightbox controls. It omits Link to because clicking a product image is reserved for the Product Gallery and its lightbox.
- Thumbnails
- Zoom / pan
- Fullscreen
- Slideshow
- Share
- Video
Styling
The Styling panel shows only parts used by the selected layout. Product Gallery adds Sale badge controls for its overlay.
| Setting | Description |
|---|---|
| Image | Styles the main gallery images. |
| Caption | Styles visible image captions. |
| View-all button | Styles the Collage control that opens the complete image set. |
| Stage arrows or Arrows | Styles Showcase or Slider navigation. |
| Thumbnails and Thumbnail arrows | Styles the Showcase thumbnail strip and its navigation. |
| Dots | Styles Slider pagination. |
| Sale badge | Styles the product’s sale overlay. |
Variation image sets
When a shopper selects a Hoodie Color that has its own gallery, Product Gallery replaces the entire visible set: main image, thumbnails, and the images opened in the lightbox. Selecting another color replaces that set again, while clearing the selection restores the Hoodie’s main gallery.
Blocksify detects images that WooCommerce exposes as that product option’s main image and gallery. This includes additional images saved by extensions that make them available through the standard WooCommerce product-option gallery; other extensions can provide the same complete sets through Blocksify compatibility support.
- Edit the variable Hoodie product and give a Color option its own main image plus gallery images.
- View a product page that uses the template and choose that Color in Product Add to Cart. The matching main image and thumbnails replace the base set.
- Open the lightbox and move through the images. It contains the selected color’s set, not the base Hoodie gallery.
Note: If the selected option has only a main image and no gallery of its own, Product Gallery restores the product’s base set, replaces the main image, and repaints the first Showcase thumbnail to match. The rest of the thumbnail strip stays the same.