The Thumbnail addon is designed to showcase product images with precision and style in your EasyStore Storefront page. You can adjust the color, padding, margins, and border, as well as apply various effects like opacity, hue, brightness, contrast, saturation, and more. This addon enhances the visual presentation of products, captures customer attention, and creates a more engaging shopping experience.

General

Switch to Alternate Image on Hover:  By enabling this setting, when a user hovers over the product thumbnail the image will briefly change to any alternate image you have selected.

Alt Text: Use this text field to provide alt text for the thumbnail.

Link: By enabling this option, you can allow the users to click on the thumbnail to be redirected to the product page of the specific product.

Background Color: You can adjust the background color of the badge using this option.

Padding: You can adjust the padding dimensions for the thumbnail. You can choose the screen type, and set different padding dimensions for each screen type (Laptop, Tablet Landscape, Tablet Portrait, Mobile Landscape, and Mobile Portrait). SP Page Builder automatically adjusts padding for responsive design by default. 

Margin: Similarly, you can customize the margin dimensions for the thumbnail (top, right, bottom, and left) in relation to surrounding elements. You can choose the screen type, and set different margin dimensions for each screen. 

Border: Similar to the radius, you can adjust the border radius of the thumbnail via a slider or input field. You have the option to adjust the border type (solid, double, dotted, dashed, groove, ridge, inset, outset) as well as the opacity of the border.

Radius: Using the slider and adjacent field you can adjust the border radius in pixels. 

Effects

Opacity: Use the slider or adjacent field to adjust the opacity of the thumbnail.

Blur: Use the slider or adjacent field to adjust the blur effect of the thumbnail.

Brightness: Use the slider or adjacent field to adjust the brightness of the thumbnail.

Contrast: Use the slider or adjacent field to adjust the contrast of the thumbnail.

Saturation: Use the slider or adjacent field to adjust the saturation of the thumbnail.

Invert Color: Use the slider or adjacent field to adjust the invert color effect of the thumbnail.

Greyscale: Use the slider or adjacent field to adjust the greyscale of the thumbnail.

Sepia: Use the slider or adjacent field to adjust the sepia of the thumbnail.

Hue Rotate: Use the slider or adjacent field to adjust the hue rotation of the thumbnail.