The StoreEngine Product Gallery shortcode is the primary element used to display high-quality product images and media galleries. It is specifically designed for StoreEngine Single Product templates to showcase product visuals in an interactive, responsive layout.

What this shortcode does

This shortcode renders the main image gallery for a product. It automatically pulls the “Main Image” and all additional “Gallery Images” assigned to that specific product. It supports interactive features like image zooming, full-screen lightboxes, and thumbnail navigation, ensuring your customers get a detailed view of what they are buying.

aBlocks Integration

For a seamless design experience in the Gutenberg editor, this functionality is available as a dedicated block in the aBlocks library:

• Block Name: StoreEngine Product Gallery
• Usage: Drag and drop this block into your StoreEngine single product template to visually configure the gallery style, thumbnail placement, and zoom effects.

Shortcode Attributes

You can use the following attribute to control which product’s media is displayed:

• product_id: (Optional) The unique ID of the product you want to display the gallery for.
  • Note: If you are using this shortcode inside a StoreEngine Single Product Template, you do not need to provide this ID. The shortcode will automatically detect and display the gallery for the current product being viewed.
  • Manual Entry: Use this if you are placing a specific product’s gallery on a custom landing page or a non-product page.

Usage Examples

1. Standard Gallery (Template Use)

When building a StoreEngine Single Product template, use the bare shortcode to automatically fetch the images of the product:

[storeengine_single_product_gallery]

2. Gallery for a Specific Product

To display the image gallery of a specific product (e.g., ID: 202) on a custom page:

[storeengine_single_product_gallery product_id="202"]

Implementation Guide

1. Access the Builder: Navigate to the StoreEngine Builder and open your Single Product template.
2. Insert the Shortcode: Place the[storeengine_single_product_gallery] shortcode in the desired section (typically the left or top-center column of your product layout).
3. Media Setup: Ensure your product has a “Main Image” and several “Gallery Images” uploaded in your product settings to see the full effect.
4. Save & Preview: View your product page to confirm that the gallery displays correctly with working thumbnails and zoom features.

The [storeengine_single_product_gallery] shortcode is essential for creating a professional and engaging shopping experience. By providing a clear and interactive way for customers to view your products from different angles, you can significantly improve the visual appeal and trust of your store.