Item List
What This Section Does
Display your collections, products, articles, or custom content in an organized list format with interactive hover effects. When customers hover over items, they reveal descriptions and action buttons, creating an engaging browsing experience that encourages exploration.
Perfect for:
- Homepage collection navigation ("Shop by Category")
- Featured product highlights with detailed descriptions
- Blog article showcases with preview text
- Service or feature lists with explanatory content
How to Add It
Step 1: Add the Section
- In your Shopify admin, go to Online Store → Themes
- Click Customize next to your live theme
- Click Add section in your main content area
- Choose Item List from the list
Step 2: Add Your Items
- Click Add block and choose your content type (collection, product, article, or custom)
- Select the specific item you want to feature
- Add a compelling description that appears on hover
- Set an action button label like "Shop Now" or "Learn More"
- Arrange items in order of importance
Key Settings to Configure
Content Organization
What to include: Choose items that guide customers through your store
- Collections: Best for category navigation - feature your main product categories
- Products: Great for highlighting bestsellers or new arrivals with detailed descriptions
- Articles: Perfect for showcasing helpful blog content or guides
- Pro tip: Mix content types thoughtfully - don't overwhelm with too many different elements
Interactive Design
Hover effects: Make browsing engaging without being distracting
- Hidden descriptions: Additional details appear when customers show interest by hovering
- Action buttons: Clear next steps that appear when customers are engaged
- Image changes: Background images can shift on hover for added visual interest
- Best practice: Write descriptions that add value and encourage clicks
Layout Strategy
How content appears: Organize for easy scanning and engagement
- Vertical positioning: Choose where text appears on each card (top, middle, bottom)
- Button placement: Decide if buttons show immediately or only on hover
- Card linking: Make entire cards clickable for easier mobile interaction
Pro Tips for Success
Best Practices
- Write hover descriptions that provide additional value or detail
- Use high-quality images that look good both as backgrounds and focus points
- Keep action button text specific and compelling ("Shop Dresses" vs "Learn More")
- Test hover effects on mobile devices where hover behavior is different
- Arrange items strategically with your most important content first
Common Mistakes
- Writing descriptions that just repeat the title without adding value
- Using poor quality images that don't look good as background elements
- Including too many items that make the section overwhelming
- Forgetting that mobile users can't hover - ensure content works without hover too
- Making action buttons too generic instead of specific to the content