Mobile Widgets¶
Overview¶
Mobile Widgets configures the content blocks displayed on your mobile app's home screen. Create a customized mobile experience with sliders, category grids, product showcases, banners, and more.
Accessing Mobile Widgets¶
Navigate to: Settings > Mobile Widgets from the sidebar menu
Widget List¶
The main page displays all configured widgets in a reorderable table.
List Columns¶
| Column | Description |
|---|---|
| Order | Widget position (drag to reorder) |
| Type | Widget type shown as colored badge |
| Title | Widget title/label (if set) |
| Visible | Toggle indicating if widget is displayed |
| Updated | Last modification date |
Reordering Widgets¶
Drag widgets by the order handle to rearrange their position on the mobile app home screen. Changes save automatically.
Filters¶
- Type: Filter by widget type
- Visible: Filter by visibility status
Creating a Widget¶
Click "New Mobile Widget" to create a new widget.
Widget Configuration¶
Basic Settings¶
All widgets share these core settings:
Widget Type Required¶
Select the type of content block:
| Type | Description |
|---|---|
| Slider | Image carousel/slideshow |
| Categories | Category navigation grid or list |
| Products | Product showcase section |
| Banner | Promotional image with optional text |
| Text | Custom text content |
| Spacer | Vertical spacing between widgets |
| Divider | Visual separator line |
Visible¶
- Type: Toggle switch
- Default: On
- Purpose: Show or hide widget on mobile app
Order¶
- Type: Number input
- Default: 0
- Purpose: Widget position (lower numbers appear first)
Widget Types¶
Slider Widget¶
Create an image carousel for promotions, featured products, or announcements.
Settings:
| Setting | Description | Default |
|---|---|---|
| Auto Play | Automatically cycle through slides | On |
| Interval (ms) | Time between slides in milliseconds | 4000 |
| Height (px) | Slider height in pixels | 180 |
Images: Slider images come from Slider Items.
Categories Widget¶
Display product categories for easy navigation.
Settings:
| Setting | Description | Default |
|---|---|---|
| Section Title | Header text above categories | "Shop by Category" |
| Display Mode | Layout style | Horizontal |
| Limit | Maximum categories to show | 8 |
| Featured Only | Show only featured categories | Off |
| Show View All | Display "View All" link | On |
| Grid Columns (Mobile) | Columns on phones (grid mode) | 4 |
| Grid Columns (Tablet) | Columns on tablets (grid mode) | 6 |
Display Modes:
- Horizontal: Scrollable horizontal list
- Grid: Fixed grid layout
Products Widget¶
Showcase products on the home screen.
Settings:
| Setting | Description | Default |
|---|---|---|
| Section Title | Header text above products | "Featured Products" |
| Data Source | Which products to show | Featured |
| Category | Specific category (if source is "Category") | - |
| Display Mode | Layout style | Horizontal |
| Limit | Maximum products to show | 5 |
| Show View All | Display "View All" link | On |
Data Sources:
| Source | Description |
|---|---|
| Featured | Products marked as featured |
| New Arrivals | Recently added products |
| Best Sellers | Top selling products |
| On Sale | Products with discounts |
| Category | Products from specific category |
Banner Widget¶
Display promotional banners with images and optional text/buttons.
Settings:
| Setting | Description | Default |
|---|---|---|
| Banner Image | Promotional image | - |
| Width Type | How width is calculated | Auto |
| Width Value | Width in pixels or percentage | - |
| Title | Banner headline | - |
| Subtitle | Supporting text | - |
| Button Text | Call-to-action button label | - |
| Button URL | Link when button clicked | - |
| Background Color | Banner background color | - |
Width Types:
- Auto: Full width
- Percentage: % of screen width
- Pixels: Fixed pixel width
Text Widget¶
Add custom text content to the home screen.
Settings:
| Setting | Description | Default |
|---|---|---|
| Content | Text to display | - |
| Alignment | Text alignment | Left |
| Style | Text styling | Body |
Alignments: Left, Center, Right
Styles:
- Body: Standard paragraph text
- Heading: Large, bold text
- Caption: Small, subdued text
Spacer Widget¶
Add vertical space between widgets.
Settings:
| Setting | Description | Default |
|---|---|---|
| Height (px) | Space height in pixels | 24 |
Divider Widget¶
Add a visual divider line between sections.
Settings:
| Setting | Description | Default |
|---|---|---|
| Margin Top (px) | Space above divider | 16 |
| Margin Bottom (px) | Space below divider | 16 |
Example Home Screen Layout¶
A typical mobile home screen configuration:
- Slider - Hero promotions (order: 1)
- Categories - Shop by category (order: 2)
- Spacer - 16px space (order: 3)
- Products - Featured products (order: 4)
- Banner - Promotional banner (order: 5)
- Products - New arrivals (order: 6)
- Divider - Visual separator (order: 7)
- Text - Contact info or announcement (order: 8)
Best Practices¶
Performance¶
- Limit number of products/categories per widget
- Use appropriately sized images for banners
- Don't overload with too many widgets
User Experience¶
- Put most important content first
- Use spacers and dividers for visual separation
- Keep slider auto-play interval reasonable (3-5 seconds)
- Test on different device sizes
Content¶
- Update slider images regularly
- Feature seasonal products/categories
- Keep banners current and relevant
Saving Changes¶
Changes save when you create or edit individual widgets. Reordering saves automatically.
Related Sections¶
- Mobile App Settings - App icon and color scheme
- Slider Items - Manage slider images
- Categories - Manage product categories
- Products - Manage products