Best Sellers
Showcase your top-performing products with numbered rankings. Supports collection-based or manual product selection.
Quick Setup
- Add section → Best sellers
- Choose a collection sorted by "Best selling", or use Manual mode to pick products
- Configure display options below
Section Settings
Content
| Setting | Type | Default | Description |
|---|---|---|---|
| Heading | text | Best sellers | Section title. Examples: 'Our Bestsellers', 'Top Picks', 'Customer Favorites'. |
| Numbers on desktop | checkbox | true | Display ranking numbers (1, 2, 3...) next to each product on desktop. |
Source
| Setting | Type | Default | Description |
|---|---|---|---|
| Mode | select | Collection | 'Collection' auto-populates from a collection. 'Manual' lets you select individual products. |
| Collection | collection | - | Select a collection. Set its default sort to 'Best selling' in Shopify admin for accurate rankings. |
| Products | range | 6 | Number of products to display. Range: 3–12. |
| Show 'View all' link | checkbox | true | Display a link to view all products. |
| Label | text | View all | Text for the view all link. |
| Link | url | - | Custom URL for the link (only used in Manual mode). |
💡 Collection Sort Order: For accurate "best sellers" data, go to your Shopify admin → Products → Collections → [Your Collection] → and set the default sort to "Best selling". This uses Shopify's actual sales data.
Colors
| Setting | Type | Default | Description |
|---|---|---|---|
| Background | color | #ffffff | Section background color. |
| Text | color | #111111 | Product title color. |
| Border | color | #e5e5e5 | Border color for product cards. |
| Link active (text) | color | #111111 | Text color on hover/active state. |
| Link active (border) | color | #111111 | Border color on hover/active state. |
Layout
| Setting | Type | Default | Description |
|---|---|---|---|
| Container width | select | Inherit | Section width. Options: Inherit, Narrow, Wide. |
| Include top padding | checkbox | false | Add padding above the section. |
| Desktop offset top/bottom | range | 0px | Margins on desktop. |
| Mobile offset top/bottom | range | 0px | Margins on mobile. |
Block Types
Best Seller Block (Manual Mode)
When using Manual mode, add these blocks to select specific products:
| Setting | Type | Default | Description |
|---|---|---|---|
| Product | product | - | Select the product to feature. |
| Heading (optional) | text | - | Override the product title with custom text. |
| Image (optional) | image | - | Override the product's featured image. |
Display Behavior
Desktop
- Products display in a 2-column grid
- Ranking numbers appear on the left (if enabled)
- Product thumbnail and title are shown
- Hover state highlights the active item
Mobile
- Products display as a horizontal scrollable carousel
- Each card shows the product image as a large background
- Product title overlays the bottom of the card
- Custom scrollbar appears during scrolling
Best Practices
Content Strategy
- Use real best sellers — Don't fake it; customers can tell
- Update regularly — Refresh the collection periodically
- Match the context — "Best Sellers" for homepage, "Popular in [Category]" for category pages
- 6-8 products is optimal — Enough variety without overwhelming
Collection vs Manual Mode
Choose Your Mode
CollectionRecommended
Dynamic, auto-updating list based on actual sales data
Manual
Curated selection, new product launches, seasonal picks
Design Tips
- Enable numbers — They reinforce the ranking and add visual interest
- Use consistent image styles — All product images should have similar styling
- Consider hover states — Customize active border color to match your brand
Troubleshooting
Products not showing
Collection mode:
- Verify a collection is selected
- Check that the collection has products
- Ensure products are published
Manual mode:
- Add at least one "Best seller" block
- Select a product in each block
Wrong products showing
- In Collection mode, ensure your collection is sorted by "Best selling"
- In Manual mode, products appear in the order blocks are added
Numbers not showing
- Check that "Numbers on desktop" is enabled
- Numbers only appear on desktop (990px+), not mobile
- Numbers are hidden when hovering over items (by design)
View all link not working
- In Collection mode, the link auto-generates from the collection URL
- In Manual mode, you must set a custom Link URL