Product Images

The Product Images widget displays the gallery of images associated with the current product, offering either a main slideshow with thumbnail navigation or a carousel layout. It includes options for transition effects, image sizing, zoom, navigation controls, autoplay, and hover overlays.

Content tab

Configure the layout, content, and behavior of the product image gallery.

Product Images widget Content tab - Product Images

Product Images

Skin

Choose the main layout style: Slideshow (main image with thumbnails) or Carousel.

Effect

Select the transition animation between slides (e.g., Slide, Fade, Cube, Coverflow).

Image Size

Choose the predefined PrestaShop image size type for the main gallery images.

Zoom on Hover (Slideshow Skin)

Enable an image zoom effect when hovering over the main image in Slideshow mode.

Scale (Zoom)

Set the magnification level for the hover zoom effect.

Centered Slides (Carousel Skin)

Enable to center the active slide in the carousel view, potentially showing parts of adjacent slides.

Thumbnails (Slideshow Skin)

Image Size (Thumbnails)

Choose the predefined PrestaShop image size type for the thumbnail images.

Position (Thumbnails)

Set the position of the thumbnail navigation relative to the main image (Bottom, Left, Right).

Slides to Show (Thumbnails/Carousel)

Set the number of visible thumbnails (Slideshow) or main images (Carousel) at once.

Slides to Scroll (Thumbnails/Carousel)

Determine how many thumbnails or main images scroll per navigation action.

Hide On Mobile (Thumbnails)

Enable to hide the thumbnail navigation strip on mobile devices.

Product Images widget Content tab - Additional Options

Navigation & Behavior

Arrows

Toggle the visibility of the previous/next navigation arrows.

Previous Arrow Icon

Select the icon for the 'Previous' navigation arrow.

Next Arrow Icon

Select the icon for the 'Next' navigation arrow.

Pagination (Carousel Skin)

Choose the type of pagination indicator for the Carousel skin (None, Dots, Fraction, Progress).

Transition Duration (ms)

Set the speed of the slide transition animation in milliseconds.

Autoplay

Enable automatic progression through the slides.

Autoplay Speed (ms)

Set the time delay between automatic slide transitions.

Pause on Interaction

Enable to stop autoplay when the user interacts with the navigation.

Infinite Loop

Enable continuous looping of slides (available for Carousel skin or Fade effect).

Overlay

Overlay

Choose an overlay content type shown on hover: None, Caption (image legend), or Icon.

Icon (Overlay)

Select the icon to display in the overlay when 'Icon' is chosen.

Animation (Overlay)

Select the animation effect for the overlay appearing on hover.

Style tab

Customize the appearance of the main images, thumbnails, navigation, and overlay.

Product Images widget Style tab - Product Images

Main Image Display

Space Between (Carousel)

Adjust the horizontal gap between images when using the Carousel skin (Slide/Coverflow effect).

Spacing (Slideshow)

Adjust the gap between the main image area and the thumbnail area when using the Slideshow skin.

Width (Slideshow)

Set the width of the main image area when thumbnails are positioned left or right.

Height

Set a fixed height for the main image container (and vertical thumbnails if applicable).

Border Color

Set the color for the border around the main image slides.

Border Size

Control the thickness of the border around the main image slides.

Border Radius

Adjust the roundness of the corners for the main image slides.

Product Images widget Style tab - Thumbnails

Styles apply only when 'Skin' is set to 'Slideshow'.

Thumbnails

Space Between

Adjust the spacing between individual thumbnail images.

Overlay Color (Normal, Hover & Active)

Set the color of the overlay applied to thumbnails in normal, hover, and active (currently selected) states.

Border Color (Normal, Hover & Active)

Set the border color for thumbnails in normal, hover, and active states.

Border Size

Control the thickness of the border around thumbnails.

Border Radius

Adjust the roundness of the corners for thumbnails.

Product Images widget Style tab - Navigation

Arrows

Size

Adjust the size of the navigation arrows.

Color

Set the color of the navigation arrows.

Pagination (Carousel Skin)

Position

Choose whether pagination dots appear inside or outside the carousel container.

Size

Adjust the size of pagination elements (dots, fraction text, progress bar height).

Color

Set the color of the active pagination element (dot, fraction text, progress bar fill).

Inactive Color (Dots)

Set the color specifically for the inactive pagination dots.

Lightbox

Color

Set the background color of the image lightbox.

UI Color

Set the color for lightbox UI elements (arrows, close button).

UI Hover Color

Set the hover color for lightbox UI elements.

Product Images widget Style tab - Overlay

Styles apply only if an 'Overlay' type is selected in the Content tab.

Overlay

Typography (Caption)

Control the font settings for the caption text when 'Overlay' is set to 'Caption'.

Icon Size (Icon)

Adjust the size of the icon when 'Overlay' is set to 'Icon'.

Color

Set the color of the overlay text or icon.

Background Color

Set the background color for the overlay shown on hover.

Advanced tab

Access advanced layout, motion, and custom CSS options.

Advanced Tab Layout

Layout

Margin

Set the outer spacing around the widget's container, with options for PX or % units, and individual control for Top, Right, Bottom, and Left.

Padding

Set the inner spacing within the widget's container, with options for PX, EM, or % units, and individual control for Top, Right, Bottom, and Left.

Width

Control the width of the widget: Default, Full Width (100%), Inline (auto), Custom (numeric value), or Calculate (CSS calc function).

Full width
  • Vertical align : Align the widget vertically within its parent column to start, center, end, or stretch.
  • Size : Control how the widget grows to fill available space within its container (None, Grow, Custom).
    • Grow : Define the flex-grow factor when 'Size' is set to 'Custom'.
Inline
  • Vertical align : Align the widget vertically within its parent column to start, center, end, or stretch.
  • Size : Control how the widget grows to fill available space within its container (None, Grow, Custom).
    • Grow : Define the flex-grow factor when 'Size' is set to 'Custom'.
Custom
  • Custom Width : Set a specific width for the widget using a slider with PX, %, or VW units.
  • Vertical align : Align the widget vertically within its parent column to start, center, end, or stretch.
  • Size : Control how the widget grows to fill available space within its container (None, Grow, Custom).
    • Grow : Define the flex-grow factor when 'Size' is set to 'Custom'.
Calculate
  • Calc : Define the widget's width using a CSS calc() expression (e.g., "100% - 20px").
  • Min Width : Set a minimum width for the widget, ensuring it doesn't become narrower than this value using a slider with PX, %, or VW units.
  • Vertical align : Align the widget vertically within its parent column to start, center, end, or stretch.
  • Size : Control how the widget grows to fill available space within its container (None, Grow, Custom).
    • Grow : Define the flex-grow factor when 'Size' is set to 'Custom'.
Order

Set the display order of this widget relative to other widgets within the same column using Flexbox (Start, End, Custom).

Custom
  • Custom Order : Enter a specific numerical order value when 'Order' is set to 'Custom'.
Position

Set the CSS position property for the widget: Default (Static), Absolute, or Fixed.

Note: Custom positioning is not considered best practice for responsive web design and should not be used too frequently.
Absolute/Fixed
  • Horizontal Orientation: Set the horizontal reference point (Left or Right) for custom positioning within its nearest positioned ancestor.
  • Offset : Specifies the distance using PX, %, VW, or VH units between the element and the left or right edge of its containing block.
  • Vertical Orientation: Set the vertical reference point (Top or Bottom) for custom positioning within its nearest positioned ancestor.
  • Offset : Specifies the distance using PX, %, VW, or VH units between the element and the top or bottom edge of its containing block.
Z-index

Control the stacking order of the widget if it overlaps with other elements; higher values appear on top.

CSS ID

Assign a unique custom ID to the widget's wrapper, allowing for specific CSS targeting or JavaScript interaction (without the '#' prefix).

CSS Classes

Add custom CSS class names (space-separated) to the widget's wrapper, allowing for custom styling or JavaScript targeting (without the '.' prefix).

Element Cache

Improves loading times by storing a static version of this element.

Advanced Tab Motion Effects
Scrolling Effects

Enhance elements with various dynamic effects triggered by the user's scrolling behavior.

  • Vertical Scroll: Configure the scroll direction, speed, and viewport range for vertical scrolling effects.
  • Horizontal Scroll: Set the scroll direction, speed, and viewport range for horizontal scrolling effects.
  • Transparency: Adjust the transparency based on the direction, level, and viewport range.
  • Blur: Apply a blur effect with customizable direction, level, and viewport range.
  • Rotate: Rotate the element using direction, speed, and viewport settings.
  • Scale: Scale the element with direction, speed, and viewport controls.
  • Apply Effects on: Choose whether to apply scrolling effects on desktop, tablet, or mobile devices.
  • Effects Relative to: Define whether the effects are relative to the default container, the viewport, or the entire page.
Mouse Effects

Enable mouse based effects for added interactivity.

  • Mouse Track: Adjust the direction and speed of the effect as the user moves the mouse across the page.
  • 3D Tilt: Enable 3D tilt effects with controllable direction and speed for a more immersive experience.
Sticky Effects

Fix elements at the top or bottom of the viewport as the user scrolls for persistent visibility.

  • Sticky on: Apply sticky effects on desktop, tablet, or mobile devices.
  • Offset: Set the offset in pixels to trigger the sticky effect after scrolling.
  • Dynamic Offset: Use a CSS selector to dynamically set the offset based on other elements on the page.
  • Effects Offset: Configure the pixel offset to control when additional effects apply.
  • Stay in Column: Choose whether the sticky element remains within its column during scrolling (yes or no).
  • Hide on Scroll: Set the offset and transition duration for hiding the sticky element when scrolling down.
Entrance Animation

Apply predefined animations to elements when they appear on screen.

  • Fading: Elements gradually fade in or out of view.
  • Revealing: Create smooth reveal effects as elements come into view.
  • Sliding & Revealing: Combine sliding motion with reveal effects.
  • Scaling & Revealing: Adjust the size of elements as they are revealed.
  • Zooming: Apply zoom in or out effects during element appearance.
  • Bouncing: Elements enter with a bouncing motion for attention-grabbing effects.
  • Sliding: Elements slide into view from different directions.
  • Rotating: Apply rotation effects as elements enter or leave the viewport.
  • Attention Seekers: Highlight elements with exaggerated, noticeable animations.
  • Specials: Unique animations for elements that require special effects.
Advanced Tab Transform
Opacity

Adjust the transparency level of the element to create fade effects during normal or hover states.

Rotate

Rotate the element along the X, Y, or Z axes for dynamic visual effects. Use deg (degrees) values or apply 3D rotation.

Offset

Shift the position of the element horizontally (X-axis) or vertically (Y-axis) to control its exact placement within the layout.

Scale

Resize the element, with the option to keep proportions (yes or no) and adjust the scale factor to enlarge or shrink the element.

Skew

Skew the element along the X and Y axes to tilt its appearance.

Flip Horizontal/Vertical

Flip the element horizontally or vertically by selecting the anchor points (X: left, center, right; Y: top, center, bottom) for precise control over the flip transformation.

Trigger by (On hover)

Choose whether the hover transformation is triggered by interaction with the widget, column, or section.

Transition Duration (On hover)

Set the time duration in milliseconds that the hover transition effect takes to complete.

Transition Delay (On hover)

Specify a delay in milliseconds before the hover transition effect begins.

Advanced Tab Background

Background

Background Type

Select the background type: None, Classic, or Gradient.

Classic
Color
Set a solid background color to provide a consistent base for your design.
Image
Upload an image to use as the background. Additional settings include:
  • Loading: Choose whether to load the background image lazily or immediately.
  • Position: Define the image's position within the background (e.g., center, top-left).
  • Attachment: Set the background image to scroll with the page or remain fixed.
  • Repeat: Determine if the image repeats or stays single across the background area.
  • Size: Control the size of the background image, such as cover, contain, or custom dimensions.
Backdrop Filters
Apply visual filters to the background, such as blur, brightness, or contrast, enhancing its appearance.
Transition Duration (On hover)
Set the time duration in milliseconds that the hover transition effect takes to complete.
Gradient
Color
Select the primary color for the gradient background.
Location
Define the starting position of the primary color in the gradient effect.
Second Color
Select the secondary color to blend into the gradient.
Location
Set the starting point of the secondary color within the gradient.
Angle
Adjust the angle at which the gradient flows (e.g., horizontal, vertical, diagonal).
Backdrop Filters
Apply visual filters to the gradient background for added depth and effects.
Transition Duration (On hover)
Set the time duration in milliseconds that the hover transition effect takes to complete.

Classic
Advanced Tab Border

Border

Border Type (Normal & Hover)

Select the style for the widget container's border (e.g., None, Solid, Dashed, Dotted, Double).

Border Width (Normal & Hover)

Set the thickness of the border on each side (Top, Right, Bottom, Left) in PX.

Border Color (Normal & Hover)

Define the color of the element's border.

Border Radius (Normal & Hover)

Adjust the roundness of the widget container's corners, with options for PX or % units.

Box Shadow (Normal & Hover)

Apply a shadow effect to the widget container, with controls for color, position, blur, and spread.

Transition Duration (On Hover)

Set the speed (in seconds) of the transition animation for border and shadow hover effects.

Advanced Tab Visibility

Scheduled and Customer Group settings apply if 'Extended Visibility Section' is enabled in Creative Elements > Settings > Experiments.

Visibility

Responsive Visibility

Control the display of elements across different devices.

  • Hide On Desktop: Enable to hide this element specifically on desktop screen sizes.
  • Hide On Tablet: Enable to hide this element specifically on tablet screen sizes.
  • Hide On Mobile: Enable to hide this element specifically on mobile screen sizes.
Note: Using responsive visibility options (Hide On Desktop/Tablet/Mobile) too frequently is not considered best practice for responsive web design as it can lead to duplicated content or accessibility issues.
Scheduled Visibility

Enable to set a specific time range during which this element will be visible.

  • From : Set the start date and time for the element's visibility when 'Schedule' is enabled.
  • To : Set the end date and time for the element's visibility when 'Schedule' is enabled.
Note: Dates are set according to your website's timezone.
Customer Group Visibility

Filter the visibility of this element based on customer groups: All, Show for specific groups, or Hide for specific groups.

  • Groups: Select the specific customer groups to include or exclude for visibility when 'Customer Group' filter is active.
Advanced Tab Custom CSS
Custom CSS

Apply custom CSS to style the widget beyond the default settings.

Note: This requires CSS knowledge—use carefully, as incorrect syntax can impact other areas of the site.

/* For main element */
selector { 
  color: red; 
}

/* For child element */
selector .child-element { 
  margin: 10px; 
}

/* Or use any custom selector */
.my-class { 
  text-align: center; 
}

If you want to learn the basics of CSS, W3Schools is a great resource for that.

© WebshopWorks - Professional PrestaShop Addons