HTML Widget
On the marketplace and the confirmation page, we have different default templates to communicate commercial messages to the market, like a link to customer service, newsletter sign-up, or separate gift marketplace. There are 3 different versions of HTML templates for boxes, One, two, and three boxes.
The Tulo Shop will be set up with our default templates for 1, 2, 3 widgets. You can adjust and create your own HTML widget (commersial widgets) for marketplace and confirmation page here.
You will find the HTML widgets under Marketing in the payway admin portal.
MANUAL
1. HTML widget: Use one of the Tulo Shop HTML widget templates or create your HTML widget.
2. Include the HTML widget key name in the HTML template for the marketplace or the confirmation page.
3. HTML template: This is where you will include the HTML widget key name in the marketplace or confirmation template.
NOTE! In order to be able to view the widget you have created or edited you need to reset the cache.
HTML widget templates
Three box – HTML template
<div class="row row-cols-1 row-cols-lg-3">
<div class="col m-0 p-3">
<div class="border card d-flex my-2 flex-column-reverse flex-lg-column-reverse align-items-center">
<div class="d-flex flex-column justify-content-around p-xxl-4 p-4 w-100">
<div>
<h3 class="HKbold" style="font-size:20px;">Headline</h3>
<p class="fs-14">Text</p>
</div>
<button class="btn btn-dark defaultbtn packagebtn my-4">Call to action</button>
</div>
<div class="w-100">
<img style="height:170px" class="card-img-top limitheight" src="https://worldoftulo.com/wp-content/uploads/2023/04/tulp_paywall_tablate-1024x882.png" alt="" />
</div>
</div>
</div>
<div class="col m-0 p-3">
<div class="border card d-flex my-2 flex-column-reverse flex-lg-column-reverse align-items-center">
<div class="d-flex flex-column justify-content-around p-xxl-4 p-4 w-100">
<div>
<h3 class="HKbold" style="font-size:20px;">Headline</h3>
<p class="fs-14">Text</p>
</div>
<button class="btn btn-dark defaultbtn packagebtn my-4">Call to action</button>
</div>
<div class="w-100">
<img style="height:170px" class="card-img-top limitheight" src="https://worldoftulo.com/wp-content/uploads/2023/04/tulp_paywall_tablate-1024x882.png" alt="" />
</div>
</div>
</div>
<div class="col m-0 p-3">
<div class="border card d-flex my-2 flex-column-reverse flex-lg-column-reverse align-items-center">
<div class="d-flex flex-column justify-content-around p-xxl-4 p-4 w-100">
<div>
<h3 class="HKbold" style="font-size:20px;">Headline</h3>
<p class="fs-14">Text</p>
</div>
<button onclick="location.href='https://tulo-shop.stage.adeprimo.se/at/giftshop'" class="btn btn-dark defaultbtn packagebtn my-4">Call to action</button>
</div>
<div class="w-100">
<img style="height:170px" class="card-img-top limitheight" src="https://worldoftulo.com/wp-content/uploads/2023/04/tulp_paywall_tablate-1024x882.png" alt="" />
</div>
</div>
</div>
</div>Two box – HTML template
<div class="row row-cols-1 row-cols-lg-2">
<div class="col m-0 p-3">
<div class="border card d-flex my-2 flex-column-reverse flex-lg-column-reverse align-items-center">
<div class="d-flex flex-column justify-content-around p-xxl-4 p-4 w-100">
<div>
<h3 class="HKbold fs-20">Headline</h3>
<p class="fs-14">Text</p>
</div>
<button class="btn btn-dark defaultbtn packagebtn my-4">Call to action</button>
</div>
<div class="w-100">
<img style="" class="card-img-top limitheight" src="https://worldoftulo.com/wp-content/uploads/2023/04/tulp_paywall_tablate-1024x882.png" alt="" />
</div>
</div>
</div>
<div class="col m-0 p-3">
<div class="border card d-flex my-2 flex-column-reverse flex-lg-column-reverse align-items-center">
<div class="d-flex flex-column justify-content-around p-xxl-4 p-4 w-100">
<div>
<h3 class="HKbold fs-20">Headline</h3>
<p class="fs-14">Text</p>
</div>
<button class="btn btn-dark defaultbtn packagebtn my-4">Call to action</button>
</div>
<div class="w-100">
<img style="" class="card-img-top limitheight" src="https://worldoftulo.com/wp-content/uploads/2023/04/tulp_paywall_tablate-1024x882.png" alt="" />
</div>
</div>
</div>
</div>One box – HTML template
<div class="row row-cols-1 row-cols-lg-1">
<div class="col m-0 p-3">
<div class="border card d-flex my-2 flex-column-reverse justify-content-between flex-lg-row">
<div class="d-flex flex-column justify-content-around p-xxl-4 p-4 w-100 ms-0">
<div>
<h3 class="HKbold fs-20">Headline</h3>
<p class="fs-14">Text.</p>
</div>
<button class="btn btn-dark defaultbtn packagebtn">Call to action</button>
</div>
<div class="packagefix-width">
<img src="https://worldoftulo.com/wp-content/uploads/2023/04/tulp_paywall_tablate-1024x882.png" alt="" class="card-img-top limitheight">
</div>
</div>
</div>
</div>