1. Home
  2. Docs
  3. Essential E-Commerce
  4. Product Images
  5. Styling

Styling

Style Section

Container Style

Product Images - container style

Adjust the layout based on the thumbnail position:

  • Thumbnails Below Main Image:
    • Height: Main image column height.
    • Thumbnail Column Height: Height of the thumbnail column.
    • Thumbnail Padding: Space around thumbnails.
  • Thumbnails Left to Main Image:
    • Height & Width: Dimensions for the main image column.
    • Thumbnail Column Width & Height: Adjust the dimensions for the thumbnails.


Image Style

Product Images - large image style

Customize the appearance of the main image:

  • Background Color: Choose a background color.
  • Image Padding: Adjust padding around the main image.
  • Container Border Radius: Round the edges of the main image container.
  • Link to Media File: Enable to open the image in a Lightbox when clicked.


Navigation Arrows Section

Product Images - style navigation arrows
  • Color Prev/Next: Customize the color of the previous and next arrow icons.
  • Size: Adjust the size of the navigation arrows.


Pagination Dots Section

Product Images - style pagination dots
  • Color & Active Color: Customize the colors for the pagination dots and the active dot.
  • Size: Set the dot size.

How can we help?