Product Variations Widget

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.

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.

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.

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.

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

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

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

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

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

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.

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

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

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

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.

Define the border style of the element.

Set the thickness of the element's border.

Define the color of the element's border.

Adjust the corner roundness of the element.

Apply shadow effects to add depth to the element.

Control the display of elements across different devices by selectively hiding them on desktop, tablet, or mobile.

Set the section's visibility based on specific schedules.

Control section visibility based on customer groups.

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.