Learn how to create a scrollable product image layout using the Gallery Anchor Navigation widget from the JetProductGallery plugin.
Before you start, check the tutorial requirements:
- Elementor (Free version)
- JetProductGallery plugin installed and activated
With the Gallery Anchor Navigation widget of JetProductGallery, you can showcase images in the form of a slider with pagination and adjust their appearance using various style settings.
Firstly, open a page or template in the Elementor editor and drag and drop the Gallery Anchor Navigation widget in the required section.
In our case, we open the Single Product Page template, which was created using the JetWooBuilder plugin.
After that, navigate to the General settings block. Here you can choose one of three Sources:
- Post Types — displays images from the post type’s specified custom field. Can be used on the Single Post Page template or Listing Item;
- Manual Select — allows you to upload images or select them from the Media Library;
- WooCommerce Products — displays the images from the WooCommerce product gallery. For more details, refer to the How to Showcase Product Images Within the Grid Layout tutorial.
For our case, we select the “WooCommerce Products” option.
The Enable Gallery toggle enables swiping to proceed to the next picture and access the Gallery settings tab.
In the Images settings tab, you can change the Image Size and Thumbnails Size according to your preferences.
In the Navigation settings tab, you can adjust the Navigation Type and Navigation Position.
The Gallery tab contains such settings:
- Trigger Type — set the trigger for the photo swipe. If “Image” is selected, the trigger will be a click on an image from the gallery. If “Button” is selected, it activates such settings:
- Button Icon — you can choose an icon from the Media Library or upload it;
- Position — adjust the button position here.
- Show on Hover — enable to display of the button on hover.
The Controls are available for both trigger types.
Moreover, if you’ve added a video to your product, you can change its display settings in the Video settings block.
The last section is the Style settings, where you can adjust the appearance of your layout.
After you’ve completed customization, click the “Publish” button and preview the result.
That’s all. Now you know how to place the product images gallery in a vertical layout with navigation on the side using the JetProductGallery functionality on your WordPress website.
