The Item List component displays collections of items like products, menu items, or services. Each item can have images, descriptions, prices, and links.
What Item List does
This component creates structured listings for anything you want to showcase. Each item appears as a card with an image, title, description, and optional price or link.
Use this when you want to:
- Display a restaurant menu with prices
- Showcase products in a catalog
- List services you offer
- Present portfolio items
- Share event listings
- Show property listings
Started from the Products & Services template?
If you chose Products & Services when creating your QR code, this component is already on your page. Skip to Step 3 to configure your items.
How to add an Item List
Step 1: Open your landing page editor
Go to your Dashboard, select your QR code, and click Edit.
Step 2: Add the component
Click Add component at the bottom of the editor panel. Select Item List from the menu.
Step 3: Choose a layout
Select how your items display:
| Option | Style | Best for |
|---|---|---|
| Layout 1 | Single column, full-width cards | Detailed items with long descriptions |
| Layout 2 | Two-column grid | Compact catalogs, many items |
| Layout 3 | Horizontal list (image left, text right) | Clean, scannable lists |
| Layout 4 | Carousel (one item at a time) | Featured items, limited space |
Step 4: Add your first item
Click + Add item to create an item. Choose the newly created item to edit it. The item editor opens with three tabs.
Tab 1: Information
| Field | What to enter | Limit |
|---|---|---|
| Item images | Photos of the item | Multiple allowed |
| Title | Item name | 100 characters |
| Description | Item details | 500 characters |
| Custom note | Price, label, or note | 60 characters |
Tips for each field:
- Images: Add multiple images to show different angles. First image is the main display.
- Title: Keep it short and descriptive. "Grilled Salmon" not "Our Famous Chef's Special Grilled Atlantic Salmon."
- Description: Highlight key features. Include ingredients for food items, specifications for products.
- Custom note: Use for price ($21.90), availability (In Stock), or any short label.
Tab 2: Availability
| Field | What it does |
|---|---|
| Item availability | Toggle between Available and Unavailable |
Set items to Unavailable to show them with a visual indicator (like greyed out or strikethrough) without removing them from your list.
Tab 3: Link
| Field | What to enter | Example |
|---|---|---|
| Link URL | Where the item links to | https://store.com/product/123 |
| Link text | Button label | Buy Now, Learn More |
Add a link to let visitors take action on items: visit a product page, book a service, or get more information.
Step 5: Save the item
Click Save item or Save and back to item list to save your item and return to the main list.
Step 6: Add more items
Repeat the process for each item you want to add. Click + Add item to create another.
Step 7: Reorder items
Drag items to change their order. Click and hold an item, then move it to the new position.
Step 8: Save your changes
Click Save to publish your item list.
Layout visual reference
Single Column
┌─────────────────┐
│ [IMAGE] │
│ Title │
│ Description... │
│ $21.90 │
└─────────────────┘
Best for: Detailed items, restaurant menus, service descriptions.
Two-Column Grid
┌────────┬────────┐
│[IMG] │[IMG] │
│Title │Title │
│$21.90 │$14.90 │
└────────┴────────┘
Best for: Product catalogs, many items, quick browsing.
Horizontal List
┌─────────────────────────┐
│ [IMG] Title │
│ Description... │
│ $21.90 │
└─────────────────────────┘
Best for: Clean lists, easy scanning, professional look.
Carousel
┌─────────────────────────┐
│ ◀ [IMAGE] ▶ │
│ Title │
│ Description... │
│ $21.90 │
│ ● ○ ○ │
└─────────────────────────┘
Best for: Featured items, limited space, focused attention.
Tips for best results
- Use consistent image sizes. Same dimensions look more professional.
- Keep descriptions scannable. Use short sentences and highlight key info.
- Order items strategically. Put popular or high-margin items first.
- Update availability promptly. Mark out-of-stock items as unavailable.
Common questions
Can I add items without images?
Yes. Items without images display with title, description, and custom note only.
How many items can I add?
There is no limit. However, very long lists may be harder for visitors to browse. Consider organizing into multiple Item List components with different headers.
Can I change the layout after adding items?
Yes. Switch layouts anytime. Your items stay the same; only the display changes.
How do I show prices?
Use the Custom note field. Enter "$21.90" or "From $15" or any text you want to display as the price.
Can I link items to an online store?
Yes. Use the Link tab to add a URL to each item's product page.
Comments
0 comments
Please sign in to leave a comment.