SureVertical - Bricksfusion
LIGHTWEIGHT

SureVertical

Transforms SureCart's default horizontal product gallery into a clean vertical stack layout. Shows all product images at once without carousel navigation. Removes thumbnails and arrows for a modern, scroll-based browsing experience. Perfect for long-form product pages, fashion lookbooks, or any layout where you want images to flow naturally with the content.

Before
Main Image
After
Image 1
Image 2
Image 3

Spacing

Gap Desktop pixels

Space between images on desktop screens. Larger gaps create a more editorial feel, smaller gaps keep images tightly grouped. Adjust based on your image aspect ratios.

Default: 20

Gap Mobile pixels

Space between images on mobile devices. Usually smaller than desktop to maximize image visibility on limited screen space.

Default: 15

Breakpoint pixels

Screen width where mobile gap takes effect. Below this width, the mobile gap value is used instead of desktop. Match your theme's breakpoint.

Default: 768

Images

Object Fit cover / contain / fill

How images fill their container. "Cover" fills the space and may crop edges, "contain" shows the full image with possible gaps, "fill" stretches to fit exactly.

Default: cover

Image Radius pixels

Corner rounding for each image. Use 0 for sharp corners, higher values for rounded edges. Creates a softer, more modern appearance.

Default: 0

Visibility

Hide Navigation on/off

Remove the previous/next navigation arrows from the gallery. Recommended for vertical layout since users scroll naturally instead of clicking arrows.

Default: On

Hide Thumbnails on/off

Remove the thumbnail strip below the main image. Not needed in vertical layout since all images are visible without clicking thumbnails.

Default: On

Performance

This element is lightweight and uses CSS-only transforms on the existing SureCart Swiper gallery. No additional images are loaded - it simply reorganizes the existing gallery structure. Disables touch/swipe navigation and removes unnecessary UI elements. Uses MutationObserver for dynamic content compatibility.