Depict
← Back to blog
Guides23 min readMarch 25, 2026

How to Add Images & Videos Inside a Shopify Collection Grid (No Code)

With Depict’s Supergrid editor you can drop hero banners, campaign videos, or influencer reels directly in‑line with products—zero code or developers needed.

By Alex Hamben

Why upgrade your collection grid?

  • Shoppers scan grids first. Eye‑tracking tests show 94 % of users focus on the product grid before scrolling elsewhere.
  • Rich media lifts revenue. In one A/B test, adding large creative assets inside a product grid drove an extra $106 k in monthly sales for the winning variation.
  • Shopify now makes it easy. Online Store 2.0 sections allow drag‑and‑drop blocks—no Liquid edits required.

With Depict’s Supergrid editor you can drop hero banners, campaign videos, or influencer reels directly in‑line with products—zero code or developers needed.

What you need before you start

  1. A live Shopify store running an Online Store 2.0 theme.
  2. Depict installed (free trial available).
  3. High‑resolution image or video assets optimised to < 500 kB each.
  4. 10 minutes.

Step‑by‑step tutorial

1 — Open Depict within the Shopify Admin

  1. Go from Shopify Admin → Apps → Depict
__wf_reserved_inherit
Open Depict from the Shopify Admin. You should see a list of your collections.

2 — Open the collection you want to enrich

Your collection products will load in a visual grid, with a control panel on the right.

__wf_reserved_inherit
Open the collection you want to enrich.

3 — Insert an Image/Video Banner block

  1. In the control panel on the right, select the “Add Content Card” tab → "Content"‍
  2. Select a media file (from your Shopify media library, or upload one from your computer.
  3. Use the right‑hand panel to set the size, link target (e.g., to a product detail page), text, and visibility (mobile, desktop, or both).
  4. Use your mose to drag-and-drop the content card within the grid.
__wf_reserved_inherit
Select the “Add Content Card” tab → "Content"
__wf_reserved_inherit
Set the image, size, link target (e.g., to a product detail page), text, and visibility (mobile, desktop, or both) with the side panel.

4 — Pin priority products around the media

Place related products around the banner to frame the story—a trick that lifts click‑through up to 25 % in fashion tests.

5 — Save & publish

Click Save → Publish. Depict will sync the layout back to Shopify instantly—no theme edits.

You can use the "Preview" tab in the side panel to see what it looks like on your storefront from within Depict. From here, you can click "Grid settings" to adjust grid spacing, image alignment, and see a desktop preview.

‍

__wf_reserved_inherit
The "Preview" tab shows a live preview of your storefront. Click "Grid settings" to tweak margins and see the desktop preview.

Best‑practice checklist

Do Don’t
Keep images < 500 kB and videos < 3 MB to avoid CLS penalties. Auto‑play sound—Google will nuke your Core Web Vitals.
Write alt‑text that starts with the keyword “Shopify collection banner”. Use identical creative in every collection (fatigue).
A/B test banner vs. no‑banner for high‑traffic collections. Ignore mobile cropping—preview on iOS & Android.

‍

Ready to make your grids shoppable stories?

‍

FAQ

FAQ

How do I add a banner to a Shopify collection without installing an app?
Shopify lets you upload a single featured image per collection, but it only sits above the grid. To insert banners inside the grid you need a drag‑and‑drop app (e.g., Depict) or custom Liquid code.
Will extra images slow down my page?
If you compress assets and lazy‑load, the impact is negligible. Keep total initial payload under 2 MB for fast‑enough Largest Contentful Paint.
Can have different layouts on mobile and desktop?
Yes—Depict’s Visibility control allows you to hide or show content cards on different screen sizes, allowing you to configure beautiful layouts for any shopper.