Media in grid inspiration library

Suggest Edits

This page features the practical examples of media in banners and grid slots that you can build with the Personalized media in grid feature.

🛍️ Black Friday campaign banner

Combine and style different HTML elements, such as headings, images, and buttons, to create a Black Friday Sale banner that shows urgency.

Summer Sale

This banner can be created and configured in the Asset editor as an HTML asset type:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Summer Sale</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #F0F0F0;
            font-family: 'Arial', sans-serif;
        }
        .ad-container {
            width: 568;
            height: 328;
            background-image: url('https://images.pexels.com/photos/996329/pexels-photo-996329.jpeg?auto=compress&cs=tinysrgb&w=568&h=328&fit=crop');
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            padding: 50px 40px;
            text-align: center;
            position: relative;
        }
        .content-overlay {
            background: rgba(255, 255, 255, 0.9);
            padding: 40px 30px;
            border-radius: 12px;
            backdrop-filter: blur(10px);
        }
        .header {
            color: #000000ff;
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        .body-text {
            color: #000000ff;
            font-size: 18px;
            line-height: 1.5;
            margin-bottom: 30px;
            max-width: 300px;
        }
        .cta-button {
            background-color: transparent;
            color: #000000ff;
            border: 2px solid #000000ff;
            padding: 15px 35px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.3s;
        }
        .cta-button:hover {
            background-color: #000000ff;
            color: #FFFFFF;
        }
        .cta-button:active {
            transform: scale(0.98);
        }
    </style>
</head>
<body>
    <div class="ad-container">
        <div class="content-overlay">
            <h1 class="header">Sale 50% off</h1>
            <p class="body-text">Only until this Friday, all clothes are discounted to celebrate the start of summer</p>
            <button class="cta-button">Browse sale</button>
        </div>
    </div>
</body>
</html>

❄️ Winterwear cross-sell grid slot

Use GIFs or videos to create engaging, animated slots in the grid to promote new collections.

Shoe Sale

This grid slot can be created and configured in the Asset editor as an HTML asset type:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shoe Sale</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #F0F0F0;
            font-family: 'Georgia', serif;
        }
        .ad-container {
            width: 410px;
            height: 710px;
            background-image: url('https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExbXh1YXdieHlwOGxtdjNtbmZ4YWcxZGd1OGRreWFmczF2aTkyOGE2bCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3HpSslnzl7mKx0Yzhi/giphy.gif');
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            padding: 50px;
            text-align: center;
            position: relative;
        }
        .header {
            color: #000000ff;
            font-size: 64px;
            font-weight: bold;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
        }
        .cta-button {
            background-color: transparent;
            color: #000000ff;
            border: 2px solid #000000ff;
            padding: 18px 40px;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.3s;
            backdrop-filter: blur(5px);
            background: rgba(255, 255, 255, 0.8);
        }
        .cta-button:hover {
            background-color: #000000ff;
            color: #FFFFFF;
            transform: translateY(-2px);
        }
        .cta-button:active {
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <div class="ad-container">
        <h1 class="header">50% off</h1>
        <button class="cta-button">Browse winterwear</button>
    </div>
</body>
</html>

💬 AI shopping assistant conversation starter slot

Use Bloomreach Clarity as an AI shopping assistant to start the conversational shopping experience from the product grid.

The Clarity asset type is configured and set up by Bloomreach.

Updated 5 days ago