Applicaz LogoApplicaz No-Code Sovereign Mobile App Builder Symbol
Applicaz
ELEMENT GUIDE4 min read•

Swipe Gallery Element

Display your products or services in a beautiful swipeable gallery that your customers can explore in a modern app experience.

Interactive & EngagingMultiple LayoutsBusiness ActionsFully Customizable
9:41
5G
Featured DiscoveryBestseller
1 / 4₹280

Truffle Cold Brew

Slow-dripped with cocoa

✕WhatsApp❤
Section 1 • Overview

About the Swipe Gallery Element

Display your products or services in a beautiful swipeable gallery that your customers can explore in a modern app experience. Whether you are operating a local retail shop, restaurant, salon, or online brand, this tutorial provides clear step-by-step instructions with real visual mockups from the Applicaz studio canvas.

Interactive & Engaging
Multiple Layouts
Business Actions
Fully Customizable
1
Step 1 of 5

Add the Element to Your Page

Locate the Swipe Gallery element under the Commerce & Media library in the left sidebar and insert it into any page.

In the Studio Builder, open the Left Sidebar and click "Add Section" or "+" icon.
Under the "Product & Media" (Commerce) section, find "Swipe Gallery".
Click on it or drag it directly into your active page. It comes pre-loaded with curated demo items so you can see it working immediately.
You can reorder, duplicate, rename, or hide the section at any time using the section management controls.
Studio Builder • Studio Left Sidebar
Interactive Visual Mockup
Add Section → Product & Media
Live Ticker
Hero Banner
PROSwipe Gallery
Product Catalog

Add Section → Product & Media → Swipe Gallery

Pro Tip: Swipe Gallery is plan-gated as a Pro/Yearly feature, but you can freely build, design, and test it in guest mode on the live canvas before publishing.

2
Step 2 of 5

Choose a Layout Preset

Pick from 4 distinct layout architectures crafted for different discovery behaviors.

Select the Swipe Gallery block on your canvas to open its Right Inspector.
Navigate to the "Layout" tab to choose between 4 presets:
A. Swipe Stack — Tinder-style interactive draggable card deck with rotation, card depth layering, stamps, and floating nav buttons.
B. Immersive Gallery — Near full-screen viewport showcase with segmented story progress bars and bottom overlay actions.
C. Horizontal Carousel — Multi-card peek carousel with scroll-snap and desktop chevrons.
D. Swipeable Grid — 2-column discovery grid with swipeable category filter tabs.
Configure image aspect ratio (Portrait 3:4, Square 1:1, Landscape 4:3, Wide 16:9) and card height size.
Studio Builder • 4 Architecture Presets
Interactive Visual Mockup
Swipe StackDeck

Tinder-style drag rotation

Immersive GalleryStory

Near full-screen progress

Horizontal CarouselPeek

Multi-card scroll-snap

Swipeable GridGrid

2-column category tabs

Select between Swipe Stack, Immersive, Carousel, or Grid in 1 click

Pro Tip: Each layout preset uses genuinely different CSS compositions and interactions, while consuming the exact same product database. You can switch layouts at any time without losing any product data.

3
Step 3 of 5

Add and Manage Products

Enter your signature items with photos, prices, descriptions, variants, and add-ons.

In the Inspector "Content" tab, select your Product Source: "Custom Items" or "Store Catalog" (auto-syncs with existing catalog blocks).
Click "Add Item" to create a new product card, or click "Edit" on existing demo items.
Fill in: Product Name, Price, optional Sale Price (cross-out), Category, and Badge (e.g. Bestseller, Chef Special, New).
Upload high-resolution photos using the built-in image compressor or paste external image URLs.
Add variants (e.g. "Small, Medium, Large") and add-ons (e.g. "Gift Box, Extra Topping").
Use the Move Up / Move Down buttons to reorder products in your gallery, or Duplicate to quickly replicate items.
Studio Builder • Product Inspector
Interactive Visual Mockup
Product List (Inspector) Add Item
1
Truffle Cold Brew₹280
Bestseller
2
Smoked Salmon Toast₹390
Signature

Manage product items with photo uploads, pricing, variants & stock status

Pro Tip: Upload photos directly from your phone camera or desktop. The studio compresses images client-side to save mobile bandwidth while keeping visual fidelity crisp.

4
Step 4 of 5

Configure Business Actions

Connect direct ordering and communication channels that drive customer conversions.

Open the "Actions" tab in the Swipe Gallery Inspector.
WhatsApp Order: Enable direct WhatsApp ordering. You can customize the prefilled message template. When customers tap order, it automatically pre-populates their item name, selected variant, quantity, and price.
Add to Cart: Enable direct shopping cart integration. Adds items straight into your app drawer with live total calculation.
Direct Phone Call: Enable one-tap call button for reservations or inquiries.
Booking URL / External Link: Add links to Calendly, Table booking forms, or Amazon/document links.
All actions can be toggled on or off individually based on your business model.
Studio Builder • Business Actions
Interactive Visual Mockup
Configurable Business Actions
WhatsApp Direct OrderingENABLED
Add to Cart DrawerENABLED

WhatsApp click-to-chat, Live Cart, Phone Call & Booking URLs

Pro Tip: Ensure your business WhatsApp number is configured in your Business Settings so prefilled messages reach your exact number with zero friction.

5
Step 5 of 5

Live Preview and Publish

Test interactions on the real canvas and deploy your app to customers worldwide.

Test gestures directly in the mobile canvas preview: drag cards with your mouse or finger, test rotation, and verify the bottom sheet detail modal.
Switch device preview between Mobile, Tablet, and Desktop in the top bar to verify responsive behavior.
Click "Publish" in the top bar to deploy your changes over the global CDN in under 15 seconds.
Your customers will immediately see the updated Swipe Gallery without reinstalling the app thanks to Zero-Reinstall OTA sync.
Studio Builder • Live Simulator
Interactive Visual Mockup
Instant 1-Click Cloud PublishDeploys to global CDN with Zero-Reinstall OTA update

15-second instant CDN publish & Zero-Reinstall OTA sync

Pro Tip: Use the Preview toggle in the top bar to experience your app in guest mode with all editor controls hidden, exactly as your customers will see it.

Section • Best Practices

Tips for Higher Customer Engagement

Use high-contrast vertical or square photos (3:4 or 1:1) for the best visual experience in the Swipe Stack layout.
Add badges like "Bestseller" or "Chef Special" to guide customer attention to high-margin signature items.
Keep short descriptions under 60 characters so they display cleanly on smaller mobile screens without clutter.
Enable both WhatsApp ordering and Add to Cart if you offer both instant counter pickup and chat-based orders.
Section • FAQ

Frequently Asked Questions

4 Answers
Yes! The element supports touch swipe gestures on smartphones and tablets, as well as mouse drag gestures and arrow keyboard navigation on desktop computers.

Related Guides & Next Steps

Recommended Reading
ELEMENT GUIDE

Product Catalog Element

Organize your store inventory with multi-category filters, search, and instant +Add cart buttons.

Read Tutorial
FEATURES GUIDE

WhatsApp Ordering & Click-to-Chat Setup

Receive customer cart orders formatted with item names, quantities, and addresses straight into your WhatsApp.

Read Tutorial
FEATURES GUIDE

Direct Peer-to-Peer UPI QR Payments

Accept customer payments straight into your bank account with zero middleman holding and 0% commission.

Read Tutorial
PUBLISH & SHARE

Instant 0 MB PWA App Installation

Enable customers to install your mobile app to their smartphone home screen in 1 tap without Play Store barriers.

Read Tutorial
Merchant Questions & Answers

Frequently Asked Questions for Store Owners

Everything you need to know about publishing, sovereign UPI payments, 0 MB PWAs, and zero-reinstall OTA updates.

Do I need programming skills or prompt engineering experience?

→

None at all. Applicaz is 100% visual and deterministic with zero code and zero prompt engineering. Click directly on any element to update products, prices, and branding. If you can use a smartphone, you can launch a production app in under 5 minutes.

Does Applicaz hold customer funds or deduct platform transaction fees?

→

Never. 100% of customer order payments settle instantly and directly into your merchant account via Stripe, Apple Pay, Google Pay, WhatsApp, or direct UPI. Applicaz operates on a permanent 0% platform commission guarantee.

Why will customers install my app instead of using a browser?

→

Applicaz PWAs require 0 MB device storage and zero app store downloads. When customers scan your counter QR or tap your link, they install your branded app icon to their iOS or Android home screen in 1 second.

Do customers need to reinstall the app when I update prices or products?

→

No reinstallation is ever required. Applicaz features Over-The-Air (OTA) real-time cloud synchronization. When you edit prices or launch a promotion in Studio, changes update live on every customer phone in 0.2 seconds.

How much does my business save compared to delivery aggregators?

→

Third-party delivery portals take 20% to 35% on every transaction. On Applicaz, you keep 100% of your ticket value. A store processing $5,000 monthly saves $1,000 to $1,750 every month in commission cuts.

Zero Code · Zero Prompting · 0% Commission

Your business is already real.
Make its digital experience feel real too.

Choose a template. Make it yours. Publish when you're ready.

Start buildingExplore templatesView Master Guide →
Free Starter Plan Available • No Credit Card Required • 0% Commission Worldwide