Skip to content

Header Widget

Target Audience: Users, Developers

Introduction

The header widget allows you to display a custom banner at the top of a product in the Tulo Shop. This can be used to highlight promotions, branding, or other visual content tied to a specific product.

The header widget is configured per product through Boutique display options in PAP, where you select which HTML widget to use as the header.

Boilerplate template

To get started quickly, a boilerplate template is available that provides a simple header widget with an image background and centered text overlay.

CSS

If your organisation already has a CSS template configured, you can append the following CSS to it. Otherwise, create a new CSS template in PAP (Marketing > CSS templates) with the following markup:

.tulo-shop__header-widget-container {
    position: relative;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tulo-shop__header-widget-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.tulo-shop__header-widget-text {
    position: relative;
    z-index: 2;
    margin: 0;
    text-align: center;
    color: white;
}

HTML widget

Create an HTML widget in PAP (Marketing > HTML Widget) with the following code:

<div class="tulo-shop__header-widget-container">
    <h1 class="tulo-shop__header-widget-text">Enjoy insightful world wide journalism!</h1>
    <img src="https://cdn.worldoftulo.com/Image/demo/marketplace_71d54c20-e62f-4668-b1f5-c8aabc29edeb.jpg" alt="" class="tulo-shop__header-widget-img">
</div>

Note

Replace the heading text and image URL with your own content. The image will be displayed as a full-width background with the text centered on top.

Linking the widget to a product

Once both the CSS template and HTML widget have been created, link the widget to a product via Boutique display options. Navigate to PAP > Packages & Campaigns, select the product, and set the Header widget field to point to your newly created HTML widget.

See also