Last updated: March 2026 Category: Designing Your App

Overview

The Products component displays a selection of products directly on your app's home screen. It pulls live product data from your Shopify store via the Storefront API, so pricing, availability, and images are always up to date. You can choose from several product sources to control exactly which products appear.

How to Use

Adding a Products Component

Drag the Products component from the Component Palette into the Phone Preview.
Click on it to open the Inspector Panel.

[Screenshot: Products component added to the Phone Preview]

Choosing a Product Source

In the Content tab, select one of the four available product sources:

Collection — Display products from a specific Shopify collection. Use the collection picker to search for and select a collection from your store.
Specific Products — Hand-pick individual products. Use the product picker to search for and add specific products one by one.
Most Recent — Automatically displays your newest products based on their creation date in Shopify.
Most Wishlisted — Shows the products that your app users have wishlisted the most. This is a powerful way to surface social proof and trending items.

[Screenshot: Content tab showing the product source dropdown with all four options]

Configuring Display Options

In the Layout tab, adjust how products are presented:

Columns — Choose 1 or 2 columns for the product grid.
Product count — Set the maximum number of products to display (e.g., 4, 6, 8, or 10).
Card style — Choose between a minimal card or a detailed card that includes price and product title.

Shopify Storefront API Preview

The Phone Preview fetches real product data from your Shopify store so you can see actual product images, titles, and prices as you design. This ensures your layout looks accurate before you publish.

[Screenshot: Phone Preview showing live product data from Shopify]

Settings

Show price — Toggle on to display product prices beneath each product image.
Show title — Toggle on to show the product title.
Show "View All" button — When the source is a Collection, optionally display a "View All" link that takes customers to the full collection page.

Key Concepts

Live data — Unlike other components where you upload static images, the Products component fetches data dynamically. Product changes in Shopify (new images, price updates, sold-out status) are reflected automatically.
Collection-based updates — When using the Collection source, adding or removing products from that collection in Shopify automatically updates what appears in your app.
Wishlisted source — The "Most Wishlisted" source uses data from BeyondCart's built-in wishlist feature. It's only meaningful if your app has active users who are saving products to their wishlists.

Tips

Use the Collection source for curated sections like "Staff Picks" or "Summer Essentials" — just manage the collection in Shopify and your app updates automatically.
The Most Wishlisted source is great for a "Trending Now" section and encourages purchases through social proof.
Limit the product count to 4–8 for home screen sections. Customers can always tap "View All" to see the full list.
Use a 2-column grid for a compact, browsable layout. Use 1 column for a more editorial, image-focused look.
Check the preview to make sure product images look consistent — products with very different image dimensions may appear uneven.