v1.2
MENU ANIMATIONS
ADVANCED EFFECTS
CORE BACKGROUND
UI SURECART
BUTTONS
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.
Spacing
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
Space between images on mobile devices. Usually smaller than desktop to maximize image visibility on limited screen space.
Default: 15
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
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
Corner rounding for each image. Use 0 for sharp corners, higher values for rounded edges. Creates a softer, more modern appearance.
Default: 0
Visibility
Remove the previous/next navigation arrows from the gallery. Recommended for vertical layout since users scroll naturally instead of clicking arrows.
Default: On
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.
