Best sellers section with horizontal scroll, numbering, and sale badges.
Best Sellers
The Best Sellers section highlights your top-selling products in a horizontal slider with visual numbering. Each product is accompanied by its rank (1, 2, 3...) displayed in large text, reinforcing social proof and purchase urgency.
and sale badges)
How It Works
Products scroll horizontally in a slider. Each product card displays a clearly visible ranking number, creating a "Top 10" effect that encourages purchases. Scrolling is smooth with touch on mobile and with arrows on desktop.
Main Settings
Collection
| Setting | Description | Options |
|---|---|---|
| Collection | Source collection (e.g., "Best-sellers") | Collection picker |
| Product limit | Number of products displayed | 4-20 |
Display
| Setting | Description | Options |
|---|---|---|
| Visible products | Number of visible cards on desktop | 3 / 4 / 5 |
| Number style | Appearance of the ranking number | Large / Outline / Badge |
| Number color | Color of the number | Accent 1 / Accent 2 / Foreground |
| Promo badge | Show the discount badge | On / Off |
| "Sale" badge | Special badge for sale products | On / Off |
| Navigation | Show arrows | On / Off |
| Pagination | Show dots | On / Off |
Product Card
| Setting | Description | Options |
|---|---|---|
| Image ratio | Proportions | Adapt / Square / Portrait |
| Secondary image | 2nd image on hover | On / Off |
| Quick Add | Quick add button | On / Off |
| Vendor | Show vendor | On / Off |
| Swatches | Color swatches | On / Off |
Use Cases
Top 10 Homepage
- "Best-sellers" collection
- 10 products, 4 visible
- Large number style, Accent 1 color
- Sale badge enabled
- Arrow + dot navigation
Top Category
- Specific collection (e.g., "Top Skincare")
- 6 products, 3 visible
- Outline number style
- Quick Add enabled
- Secondary image on hover
Seasonal Best Sellers
- Seasonal collection
- 8 products, 4 visible
- Promo badge for sales
- Badge number style
- Portrait ratio for clothing
💡Create an automatic "Best-sellers" collection based on sales in Shopify. The section will automatically update with your actual best sellers, without any manual intervention.
ℹ️Numbering always starts at 1, even if the visitor has scrolled. The rank is assigned in the order of products in the collection. Make sure your collection is sorted by descending sales.
⚠️Do not confuse this section with Featured Collection. Best Sellers is specifically designed for the slider format with numbering. For a classic grid without rankings, use Featured Collection.