HomeGuidesChangelog
Log In
Guides

Showcase

Suggest Edits

Introduction

Showcase is a Commerce Display unit combining branded assets with product tiles.

📘

This format corresponds to the desktop version of Showcase. For mobile specs, please refer to Branded Header.

Example of the Showcase Ad format

Example of the Showcase Ad format

Specifications

General

  • The Showcase ad units is composed of 2 parts:
    • The branding zone on the left side
    • The product zone on the right side
  • The format must be able to host at least 3 products (or more).
  • The branding zone size is equal to one product tile size.
    • If the branding zone is smaller than the background image, then the image should be cropped on both sides uniformly and/or at the bottom.
    • If the branding zone is bigger than the background image, the extra available space should be filled with a plain colored background (CSS).
  • The product zone design and layout are the same as the other product tiles.
Branding zone behavior on grid tiles larger and smaller than background image.

Branding zone behavior on grid tiles larger and smaller than background image.

Asset sizes

  • Background (normal) is270x390px with a safe zone fixed at 180x190px
  • Background (big) is 310x500px with a safe zone fixed at 180x320px

📘

Please note that only one of these size will be used once it is chosen

Available Options

Redirection

  • When a user clicks on the CTA button, they should be redirected to the link defined within the response.
  • There are two possible redirection options:
    • _Self_ (open in the same tab)
    • _Blank_ (open in a new tab)

PDF upload

  • A brand may choose for the CTA to result in a file download. This file will be included in the ad response.
  • At the banner's click, a PDF file opens like a redirection link with both _Self_ and _Blank_ options (see above)

Technical details

CTA Button

  • Size: 150x30px
  • Font: Roboto Regular 12px

Legal

  • Space size occupied by legal depends on the tile width. There should be 10px padding on both the right and the left side of the tile.
  • Font: Roboto Regular 10px
  • The gap between the options area and the bottom of the branding zone should be fixed to 7px.
  • The options area height should be fixed at 30px.
  • There should be a 1 px fixed border around branding and product zones.
CTA and legal positioning options within the Showcase format

Spacing between options and base of branding zone with CTA button sizing and padding for Legal text.

CTA and legal positioning options within the Showcase format

CTA and legal positioning options of the Showcase format

Response keys

Below is the description of the different keys for the ad rendering:

FieldDescription
desktop_background_imageURL of the background image file for desktop / tablet app
desktop_background_image_alt_textAlternative text for desktop background image
mobile_background_imageURL of the background image file for mobile
mobile_background_image_alt_textAlternative text for mobile background image
border_colorFormat outline color hexa code
background_colorBackground color hexa code of the creative tile
header_textTitle of format (above the format)
header_text_colorTitle of format color hexa code
optional_footer_typeFor first option:
Option type, can have one of the following values:

- “no-option”: no footer option to implement
- “redirection”: optional_footer_redirect_url(_app) to implement
- “file”: optional_footer_media_file to implement
- “legal”: there are just optional_footer_text to display
optional_footer_textFor first option:
Optional text
(non-applicable for mobile version)
optional_footer_redirect_urlFor first option:
URL web that the user should be redirected to
optional_footer_redirect_url_appFor first option:
App deeplink that the user should be redirected to
optional_footer_redirect_targetFor first option:
Redirection target, can have the following values:

- “_blank”: redirects to a new tab
- “_self”: redirects in the same tab
(only applicable for web)
optional_footer_media_fileFor first option:
URL of media file
optional_footer_text_colorFor first option:
Option text color
optional_footer_background_colorFor first option:
Option background color
optional_footer_type_2For second option:
Option type, can have the following values:

- “no-option”: no footer option to implement
- “redirection”: optional_footer_redirect_url(_app) to implement
- “file”: optional_footer_media_file to implement
- “legal”: there are just optional_footer_text to display
optional_footer_text_2For second option:
Option text
(non-applicable for mobile version)
optional_footer_redirect_url_2For second option:
URL web that the user should be redirected to
optional_footer_redirect_url_app_2For second option:
App deeplink that the user should be redirected to
optional_footer_redirect_target_2For second option:
Redirection target, can have the following values:

- “_blank”: redirects to a new tab
- “_self”: redirects in the same tab
(only applicable for web)
optional_footer_media_file_2For second option:
URL of media file
optional_footer_text_color_2For second option:
Option text color
optional_footer_background_color_2For second option:
Option background color

Sample response

{
    "status": "OK",
    "placements": [
        {
            "viewHome_API_desktop-Showcase": [
                {
                    "format": "SC",
                    "products": [
                        {
                            "ProductName": "RMP Product",
                            "ProductId": "134679258",
                            "ProductPage": "//b.us5.us.criteo.com/rm?dest=https%3a%2f%2fwww.rmp.us%2fp%2frmpproduct-4000539729102&rm_e=u4UjU8lMHCsP4OsCjkvcZ%2fHnvnd5nOsXqPqGbGpj5ka9x03lsrB0Fjj8PIBFkUqWzBvXknvcYP6droKLYfccnShsjQOuSTrJnl4Vj944Z83XnYvCFQB0atMAZ%2fXTXKckhogRr0T8K5sDDAMaeY0jC1d0iF%2bVuSG%2bZX18XiP00T8YrhmUfgOkZlSXR8Yz0DWOg8%2bSrd2aYVDTn2Gpr2fWRf1xUc4ubdEsoQuJmz7yBGWha3vRkSZHk3vnhL27kXpKa0D236iBgcyQMgd3MTGOaXodbQ%3d%3d&ev=2",
                            "Image": "https://rmp.us/static/wlpdatas/display/000/274/374/274cv3749.jpg",
                            "Rating": "-1",
                            "Price": "8.49",
                            "ComparePrice": "8.49",
                            "Shipping": "0",
                            "ClientAdvertiserId": "123",
                            "AdvertiserId": "431248565",
                            "RenderingAttributes": "{\"brand\":\"brandname\",\"issellersku\":\"0\",\"mapViolation\":\"0\",\"numberOfReviews\":\"0\",\"shippingCost\":\"0\",\"taxonomy_text\":\"category1>category2>category4\"}",
                            "OnLoadBeacon": "//b.us5.us.criteo.com/rm?rm_e=gLYh9%2fxsFGq%2b67gaahP4kVXGGZXfgfgU1JveA8o1zBL%2bVeGhkRciu4XrLOsI4T7SC%2bNbEtyqg3GhqGgDtwtWLWaTC0EBVHxpNlqJcrfrUzWk3IBuDj7ZAr8t28y7EJfH3BnEZQxAvbjEP3nRJYq9z9TfOhi0mWVLYxVFIURTPBvcp0cVPY5qaHvmPC6%2bppv7TH9Kja6zXlrKhib2DOtKo4aEMw3FQqRbnCeTVdjqmFbHK8s%3d&ev=2",
                            "OnViewBeacon": "//b.us5.us.criteo.com/rm?rm_e=aLSOJrKI2G%2fY8SwmqYnI5SqMi2jvKfgfgnJDZb06hcliInWkDeRqN4Tu%2fKZnJgmGIrIuQVurCYsVELSi%2byX2oOKpicAj5tACVgpEYVcGZxNOU68BYLhRUxn80y3s4USfHLmeeOvP9wxb6RlGyydpJ4U4k%2fM7uL3DawyB9O%2bC9qebO%2bKTIUZ2fbQV5EuwvNxzYqCcfSjxWkMF%2fC5XfdIeovQeU5%2b7UpYhV62LdPj910grWaLwAIZ1BFFDCShQC%2fNTvqXt&ev=2",
                            "OnClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=S82J7C%2fY88eObEWE7XzLk2PMzSUfgfgTawyt81nDPKP2IJov%2byGjGihnQ6n4aM8AN03iCTSLqrRZTClsvRLjR3xIKFGaqgilehlQj2WuFQK5Eht9iUY9Pe9S9fRvms7BB055liFkgZqzmChn6L06LcP0MOPdwUT3dsUhokauwiziBsb3nVQF5k51wvEy%2fQ0YrxsM2ZlOOBmpNrWij8%2fnRxJiCMylA%2fOxqr6%2bJw5nCICO18dWz8SvNAyV0TeI2h9mUSk3jOljbyNUUAK%2fpNYfzRPDuw%3d%3d&ev=2",
                            "OnBasketChangeBeacon": "//b.us5.us.criteo.com/rm?rm_e=LQNEHBKa5%2bIRktK7%2bD%2fR5fgfgD1TbxYrFDDNLffHIbCiNsnssxDZSllOGbux%2f88BUiFFUTugPFOhm0oaM9DsesFQmoNghWjKaIr76vj9B7fcvNR1zZmYOOseWCbQZlkpozMPlugkYyH0W33iV6j2w%2fRdBY%2bQVgQT0BBmYdVPRODed3SIOgkAxOZF4upAfAxSf83%2bp4Nh8bvlY6b840bGvL9UMgQHy1FM8ncNj90PsUwnANQrLmidsAghSTnZELKUpQZYmFXAVPPk%2bBHu%2bpB6QhkK8twFzGcDVBp5MCtpmZGe%2brg%3d&ev=2",
                            "OnWishlistBeacon": "//b.us5.us.criteo.com/rm?rm_e=8yGOJDbiWkOj%2bHVuvsc59my1UyuWPnozIfwfOmrFm5ZtZmX4a4bi3IZLEYS57LOv59wkboF346v%2fKa4X8Zim7YSCjw9tNN2yBYCr%2fb%2fgfgb9QELv2JEprUOfBSZ1ZIwILrpD5CgOWkvQpEnYP137RzR4LFirlrSnfXe0Tanl8sHU5PjOXA%2f9iKHps%2bYB2aD35M02Br8%2fPx%2b2%2bDlQq4RKw4xMuAmnlafk2dUWI%2f%2bjGVwATj0LfINKS2LSt77USBGLOcWw5cDekIMvWptqyccI3oKCQQ%3d%3d&ev=2"
                        },
                        {
                            // other products
                        },
                    ],
                    "products_order": [
                        {
                            "products": [
                                "134679258"
                            ],
                            "isMandatory": false
                        },
                        {
                            // other products
                        }
                    ],
                    "rendering": {
                        "desktop_background_image": "//crtormassetmguseprod.blob.core.windows.net/creativeassets-live/try44gf6h46tyu4yj46gfh64fg6h4rt46r78t8rfb4cdf178378c.jpg",
                        "desktop_background_image_alt_text": "alt text for desktop image",
                        "mobile_background_image": "//crtormassetmguseprod.blob.core.windows.net/creativeassets-live/try44gf6h46tyu4yj46gfh64fg6h4rt46r78t8rfb4cdf178378c.jpg",
                        "mobile_background_image_alt_text": "alt text for mobile image",
                        "border_color": "#ff0000",
                        "background_color": "#000000",
                        "header_text": "",
                        "header_text_color": "",
                        "optional_footer_type": "no-option",
                        "optional_footer_text": "",
                        "optional_footer_text_color": "",
                        "optional_footer_background_color": "",
                        "optional_footer_redirect_url": "",
                        "optional_footer_redirect_url_app": "",
                        "optional_footer_redirect_target": "",
                        "optional_footer_media_file": "",
                        "optional_footer_type_2": "no-option",
                        "optional_footer_text_2": "",
                        "optional_footer_text_color_2": "",
                        "optional_footer_background_color_2": "",
                        "optional_footer_redirect_url_2": "",
                        "optional_footer_redirect_target_2": "",
                        "optional_footer_media_file_2": "",
                    },
                    "OnLoadBeacon": "//b.us5.us.criteo.com/rm?rm_e=2DP313G8ktSXXaFvImaO4VKGjOamMqFSCkvmGlcTz98dfgdfgdmtngUKQgwShE9%2bvNSjDndYD%2bnpLT4PWDoNaCb862AMTvSopOdYNFGidZfBHggUmtpL%2fYOudEdDP7kANk%2bGmsBy3OCIm58C0uAYEJSHBdruRC%2fhbWLKUdZ2VdHdFwvBg8IT9Yt4V0DS%2bufcBDtvWbEhioZmIPaBY3uuykPSXyOlpMB6eGyzI1s6hD6xIgZ1h%2bWR398LW3neLVwwmgtpHax%2f%2bEObEu9bzKawPFfHqZ%2bg%3d%3d&ev=2",
                    "OnViewBeacon": "//b.us5.us.criteo.com/rm?rm_e=YIfuO34D8lTreAuY8MIlZiNjtIYz4b8eDlYzK0kXFMI9RuhZjwV6cVwkirv6Tbbix2k6Wgh7TLqia3Gw1uOcHcNCs%2f4hpPjT2yIGBXUv36EjR20dfgdfgsjFkZFPx8QGY9uakIYTCoH73BwvmoZdM5ForssG%2fkumRGMydeN9VqXHDdF8PxDvlVFUP3M%2fgFsSYQcCTO%2brLIhUs4%2bTKzg3mOxt%2fzSrsyOkQzOP7b7x5lupA2unc%3d&ev=2",
                    "OnClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=Db34znl4Lx0Oq1zpo6o%2fb%2b2A1ExBZx5W7GLNmopfgN3f4DE5lpjSxb8eBUtw1dsIWqH8%2fbjaLIwGVlIukvlY5suhA5G%2fYZcU2Lx0aiFdfgdfgR7hNwL%2blregzZewZ6wuArnzW9sBqia4vvWq%2bBsGU39FRUuYm94OcSReYRutW%2fXtQ5Vx7lExUKg0P3%2fQRk%2bWuroBUmFR5M0atLoYvduF7Qmb4Vms1Ma4dOAwiCKtgh0t27j5Z5IPvlm3I%2fwHMEiS3jnBSD&ev=2",
                    "OnFileClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=Db34znl4Lx0Oq1zpo6o%2fb%2b2A1ExBZx5W7GLNmohjpfgN3f4DE5lpjSxb8eBUtw1dsIWqH8%2fbjaLIwGVlIukvlY5suhA5G%2fYZcU2Lx0aiFdfgdfgR7hNwL%2blregzZewZ6wuArnzW9sBqia4vvWq%2bBsGU39FRUuYm94OcSReYRutW%2fXtQ5Vx7lExUKg0P3%2fQRk%2bWuroBUmFR5M0atLoYvduF7Qmb4Vms1Ma4dOAwiCKtgh0t27j5Z5IPvlm3I%2fwHMEiS3jnBSD&ev=2",
                    "OnBundleBasketChangeBeacon": "//b.us5.us.criteo.com/rm?rm_e=EPQZxjkhpjUK980SuOdWt4pHabkuwfAR3bGmfCsTUVMLvk3FuugK%2f7NaEZDdh5JUtR8YNx8PZUKRY2b93LwBFzLYDA3EppPd336FlC3y9%2dfgdfgbUcOP6qdW5k27ef5KwplDMOMh%2bnhF%2blpeguQpact691q70oFry4KYaNbRhKHmCm9wtVmDBbiwGBNW77%2f0lIKintx2O3Dv%2fuCEymreHBITagpX7GXLP0pTQ6O0%2fdMEH%2fI4Z2dPtUHa3ps7G4V%2fvDspyR&ev=2"
                }
            ]
        }
    ],
}

Implementation example

The example below is available for preview on this page (CodePen).

<div class="rm-format" data-type="SC" role="region" aria-label="advertisement">
  <div class="rm-main-container">
    <!-- Branding Zone -->
    <div class="rm-desktop-creative">
      <img src="https://i.postimg.cc/7P3PynZ3/BTF-500.png" class="rm-desktop-backgroundImage" alt="Branding Image">
       <div class="rm-dimensions-overlay rm-desktopDimensions">
    <span class="rm-width"></span>
    <span>x</span>
    <span class="rm-height"></span>
  </div>
      <div class="rm-option-container">
         <a href="https://example.com" target="_blank" class="rm-option">Shop Now</a>
       <div class="rm-option-legal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel metus erat. Fusce in.</div>
      </div>
    </div>
    <!-- Product Zone -->
    <div class="rm-product-container">
      <div class="product-tile">
        <div class="rm-product-wrapper">
          <div class="rm-product-image-wrapper">
            <img class="rm-productImage" src="https://www.panerai.com/content/dam/rcq/pan/lj/Vl/-U/GM/Qb/2I/v0/VH/xR/2w/Uw/ljVl-UGMQb2Iv0VHxR2wUw.png">
          </div>
          <div class="rm-product-info-wrapper rm-productInfo">
            <div class="rm-brand-name">Panerai</div>
            <div class="rm-product-name">Luminor Marina</div>
            <div class="rm-star-rating">★★★★☆</div>
            <div class="rm-price">$7,549.99</div>
            <button class="rm-add-to-cart">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="product-tile">
        <div class="rm-product-wrapper">
          <div class="rm-product-image-wrapper">
            <img class="rm-productImage" src="https://cdn1.visiofactory.com/106573/celine-cl40235u-30n-54-18-gold.jpg" alt="Stylish Sunglasses">
          </div>
          <div class="rm-product-info-wrapper rm-productInfo">
            <div class="rm-brand-name">Celine</div>
            <div class="rm-product-name">Triomphe Meta</div>
            <div class="rm-star-rating">★★★★☆</div>
            <div class="rm-price">$249.99</div>
            <button class="rm-add-to-cart">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="product-tile">
        <div class="rm-product-wrapper">
          <div class="rm-product-image-wrapper">
            <img class="rm-productImage" src="https://runningmagazine.ca/wp-content/uploads/2022/03/on-shoe-1024x745.jpg" alt="Shoes">
          </div>
          <div class="rm-product-info-wrapper rm-productInfo">
            <div class="rm-brand-name">On</div>
            <div class="rm-product-name">Cloudmonster 2</div>
            <div class="rm-star-rating">★★★★★</div>
            <div class="rm-price">$259.99</div>
            <button class="rm-add-to-cart">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.rm-format[data-type="SC"] {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 1400px;
    margin: auto;
    border: 1px solid #ddd;
    overflow: hidden;
    margin-top: 5%;
    height: auto;
    min-height: 350px;
    height: clamp(300px, 40vw, 520px); 
}

.rm-main-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-width: 720px; 
    min-height: 350px; 
    height: 100%; 
}

.rm-desktop-creative {
    position: relative;
    width: 25%;
    background-color: lightblue; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%; 
    box-sizing: border-box;
    overflow: hidden;
    padding: 0;
}

.rm-desktop-creative img {
    width: 100%;
    height: 100%;
    max-width: 310px; 
    max-height: 500px; 
    object-fit: none;
    object-position: center;
    display: block;
}

.rm-dimensions-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: white;
  background-color: rgba(0, 0, 0, 0.7); 
  padding: 6px 12px;
  border-radius: 4px;
  z-index: 10;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}

.rm-option-container {
    position: absolute;
    bottom: 7px; 
    width: 100%;
    text-align: center;
    font-family: 'Roboto', 'Arial', 'Helvetica', 'Sans-serif';
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
    transition: bottom 0.3s ease;
}

.rm-option {
    width: 150px;
    height: 30px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    background-color: #FF6F00;
    color: #001F4D;
    border: none;
    border-radius: 20px;
    margin-bottom: 5px;
}

.rm-option-legal {
    font-size: 10px;
    line-height: 1.2;
    color: #FF6F00;
    padding: 0 10px;
    text-align: center;
    max-width: calc(95% - 20px);
}

@media (max-width: 1024px) {
    .rm-option-container {
        bottom: 7px; 
    }
}

@media (max-width: 768px) {
    .rm-option-container {
        bottom: 7px; 
    }
}
.rm-product-container {
    width: 75%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background-color: #fff;
    height: 100%;
}

.product-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 32%;
    min-width: 180px;
    text-align: center;
    height: auto;
    min-height: 200px;
    border-right: 1px solid #ddd;
    box-sizing: border-box;
}

.product-tile:last-child {
    border-right: none;
}

.rm-product-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rm-product-image-wrapper {
    width: 100%;
    height: 150px;
    margin-bottom: 15px;
    max-width: 230px;
}

.rm-product-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rm-product-info-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.rm-brand-name {
    font-size: 16px;
    margin-bottom: 5px;
    font-family: Montserrat, Verdana, Arial, sans-serif;
    font-weight: 700;
}

.rm-star-rating {
    font-size: 12px;
    color: #e87211;
    margin-bottom: 5px;
}

.rm-product-name {
    text-transform: capitalize;
    font-size: 13px;
    color: #353c3e;
    font-family: 'Montserrat Medium', Verdana, Arial, sans-serif;
    margin-bottom: 5px;
    letter-spacing: .4px;
}

.rm-price {
    color: black;
    font-weight: 500;
    font-size: 12px;
    font-family: 'Montserrat Semi Bold', Verdana, Arial, sans-serif;
    letter-spacing: .3px;
    margin-bottom: 12px;
}

.rm-add-to-cart {
    width: 110px;
    height: 30px;
    background-color: transparent;
    color: #A52A2A;
    border: 1px solid #A52A2A;
    border-radius: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding: 5px 15px;
}

.rm-add-to-cart:hover {
    background-color: #A52A2A;
    color: white;
}

function updateShowcaseDimensions() {
  const desktopCreative = document.querySelector('.rm-desktop-creative');
  const overlay = document.querySelector('.rm-dimensions-overlay');

  if (desktopCreative && overlay) {
    const rect = desktopCreative.getBoundingClientRect();
    overlay.querySelector('.rm-width').textContent = `${Math.round(rect.width)}px`;
    overlay.querySelector('.rm-height').textContent = `${Math.round(rect.height)}px`;
  }
}

window.addEventListener('load', updateShowcaseDimensions);
window.addEventListener('resize', updateShowcaseDimensions);

updateShowcaseDimensions();

Updated about 1 month ago

What’s Next