How do I add collections like this?

Store Design

Topic summary

A user asked how to create collection tiles with video/image backgrounds and text overlays (like “Bestsellers”, “Supercars”) similar to those shown in a screenshot.

Two solutions were provided:

Option 1 (No coding):

  • Use built-in Collection List or Multicolumn sections in the theme customizer
  • Upload images for each collection through Admin > Collections
  • Note: Video backgrounds require apps or custom code

Option 2 (Custom code for video support):

  • Create a custom Liquid section (video-collections.liquid)
  • Use <video> tags as backgrounds with overlay text
  • Includes CSS for grid layout, rounded corners, and text styling
  • Code snippet provided showing grid structure and styling

Resolution: The original poster confirmed the solutions were helpful. One responder offered to implement the custom solution directly if needed.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

I have the same theme. These are videos.

image
image943Ă—802 66.3 KB

2 Likes
2

Hi @Somehow999

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

3

Hi, here’s the link: https://corbie.store/

1 Like
4

Hey @Somehow999 ,

Ahh I see - those blocks are actually collection tiles with video/image backgrounds and a text overlay (like “Bestsellers”, “Supercars”, etc.). In your theme, you can achieve a similar layout by customizing a multi-column or collection list section. Here’s how you can set it up:

Option 1: Using Built-in Sections (without coding)

  1. Go to Online Store > Customize.

  2. Add a Collection List or Multicolumn section.

  3. Select the collections you want (e.g. Supercars, Architecture, Motorbikes).

  4. Upload an image or video thumbnail for each collection from Admin > Collections > Collection Details.

    • For videos, you’ll need to upload a video background app or embed via custom liquid (see option 2).

Option 2: With Custom Code (to support video like in your screenshot)

  1. Create a new custom section (e.g., video-collections.liquid).

  2. Inside, render each collection with a tag as the background.

  3. Add overlay text for the collection title, and link it to the collection page.

Example snippet:

<div class="video-collections-grid">
  {% for block in section.blocks %}
    <a href="{{ block.settings.collection.url }}" class="video-collection">
      <video autoplay loop muted playsinline>
        <source src="{{ block.settings.video | file_url }}" type="video/mp4">
      </video>
      <div class="overlay-text">{{ block.settings.collection.title }}</div>
    </a>
  {% endfor %}
</div>

<style>
.video-collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.video-collection {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.video-collection video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.overlay-text {
  position: absolute;
  bottom: 10px;
  left: 15px;
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
</style>

Wrap-Up

So, if you only need images, you can do it directly via the editor. If you want videos like in your screenshot, it takes some custom Liquid + CSS setup.

If you’d like, I can implement this in your store so that your collections display exactly like the design you shared. Please feel free to reach out - you can also check my past work and contact here: https://www.rajatweb.dev/

Thanks!

RAjat | Shopify Expert

2 Likes
6

Thanks a lot, guys, it helped me

2 Likes