Social Highlights
Display user-generated content from Instagram and social platforms. Build community engagement and show products in real-world use.
Overview
Social Highlights showcases your community through UGC. Connect with apps for Instagram integration or manually curate posts to display.
📸
UGC Gallery
Display customer photos
🔗
App Integration
Connect Instagram feeds
🛍️
Tag Products
Make posts shoppable
📐
Grid Layouts
Masonry or uniform grid
When to Use
- Homepage — Build social proof and community engagement
- Product pages — Show products in real-world use
- About page — Demonstrate brand community
- After checkout — Encourage customers to share their purchases
Quick Setup
Add Social Highlights in 3 Steps
- 1Add section → Social highlights
- 2Choose your Source: Instagram app or Manual posts
- 3Add Post blocks (for manual) or configure your Instagram app
Section Settings
Content
| Setting | Type | Default | Description |
|---|---|---|---|
| Source | select | Instagram/UGC app | Where to pull content from: an app or manual entry. |
| Heading | text | Shop our Instagram | Section title. |
| Subheading | text | Tag us @yourbrand #yourbrand to be featured | Encourage engagement with a call to action. |
Layout
| Setting | Type | Default | Description |
|---|---|---|---|
| Layout | select | Grid | Display posts as a Grid or Slider. |
| Columns | range | 4 | Number of posts per row. Range: 3–6. |
| Rows | range | 2 | Number of rows to display. Range: 1–3. |
Slider Controls
Only visible when Layout is set to Slider
| Setting | Type | Default | Description |
|---|---|---|---|
| Arrows | checkbox | true | Show prev/next navigation arrows. |
| Dots | checkbox | true | Show pagination dots. |
Animation
| Setting | Type | Default | Description |
|---|---|---|---|
| Scroll effect | select | Reveal | Animation for images: None, Reveal, or Zoom. |
Colors
| Setting | Type | Default | Description |
|---|---|---|---|
| Color scheme | color_scheme | Scheme 1 | Apply a predefined color scheme. |
Block Types
App Block (@app)
Integrate third-party Instagram/UGC apps like:
- Instafeed — Display your Instagram feed
- Covet.pics — UGC and shoppable galleries
- Foursixty — Instagram and UGC platform
- Loox — Photo reviews and UGC
💡 App Setup: Install your preferred Instagram app from the Shopify App Store, then add it as a block in this section. The app handles the Instagram connection and content display.
Post Block (Manual)
Curate posts manually with full control over each image.
| Setting | Type | Default | Description |
|---|---|---|---|
| Image | image | - | The post image. |
| Alt text | text | - | Accessible description of the image. |
| Post link | url | - | Link to the original social media post. |
| Tagged product | product | - | Product featured in this post. Adds a shoppable hotspot. |
| Reveal on scroll | checkbox | true | Animate image into view on scroll. |
Content Source Comparison
| Feature | App Integration | Manual Posts |
|---|---|---|
| Setup time | Quick (after app install) | Requires uploading each image |
| Updates | ✓ | ✗ |
| Control | Limited to app settings | Full control over each post |
| Product tagging | Depends on app | ✓ |
| Cost | May require subscription | Free |
Layout Comparison
Grid Layout
- Displays posts in a fixed grid
- Shows all posts at once
- Good for showcasing a curated collection
- Maximum: Columns × Rows posts displayed
Slider Layout
- Horizontal scrolling/swiping
- Uses CSS Scroll Snap for smooth navigation
- Better for many posts
- Shows navigation arrows and dots
Best Practices
Content Curation
- Choose quality images — High-resolution, well-lit photos
- Show products in use — Real customers using your products
- Mix content types — Lifestyle, product close-ups, flat lays
- Update regularly — Fresh content keeps the section engaging
Engagement
- Add a clear CTA — "Tag us @yourbrand to be featured"
- Include your hashtag — Make it easy for customers to participate
- Tag products — Make posts shoppable when possible
Performance
- Limit the number of posts — 8-12 is usually optimal
- Use app integration — Apps optimize image loading
- Test on mobile — Ensure slider works smoothly
Instagram App Recommendations
📷
Instafeed
Simple Instagram feed display
🇺🇬
Covet.pics
UGC curation and galleries
🛒
Foursixty
Advanced Instagram shopping
⭐
Loox
Combined reviews and UGC
🏢
Yotpo
Enterprise UGC and reviews
Troubleshooting
No posts appearing
For App Integration:
- Verify the Instagram app is installed and connected
- Check app block is added to the section
- Review app settings for display options
For Manual Posts:
- Add Post blocks to the section
- Ensure images are uploaded
- Switch source from "App" to "Manual"
Grid showing wrong number of posts
- Check Columns and Rows settings
- Maximum posts = Columns × Rows
- Add more Post blocks if needed
Product hotspot not showing
- Ensure Tagged product is selected
- Product must be active in your store
- Hotspot appears as a "+" icon on hover
Images look stretched or cropped
- Use square images (1:1 aspect ratio) for best results
- All posts should have consistent proportions
- Grid calculates size based on column count