HTML Template
You will find the HTML template under Marketing in the admin portal.
We will set up your Tulo Shop with our default template. However, you can adjust them to fit your requirements and graphical profile.
You can set one or more templates for:
- The marketplace. If you have a separate marketplace to present gifts or different campaigns they can also have their own template.
- The confirmation page. (Shop receipt)
NOTE! It is not possible right now to adjust the HTML template for the check-out due to the high complexity in this specific flow.

Marketing templates
Template One
The first template has a space for the text to the left and an image to the right. In the mobile version, the image is not displayed.


HTML code template one
<div class="pb-5 tulo-marketplace__overview-page" v-if="marketplace">
<div v-if="hasOffers">
<div class="container-lg">
<div class="d-flex justify-content-between w-100 align-items-center topheadingsize position-relative">
<div class="minw">
<h1 class="HKbold mb-0">{{marketplace.meta.header}}</h1>
<p class="fs-18 mt-3" v-html="marketplace.meta.description"></p>
</div>
<img class="topheadingimg" :src="marketplace.meta.imageUrl" @error="setDefaultImage" alt="">
</div>
</div>
<main class="container">
<div :class="marketplace.offers.length>3 ? 'row-cols-lg-4' : 'row-cols-lg-3'" class="row mb-3 row-cols-1">
<Package :offer="currentOffer" :key="index" v-for="(currentOffer, index) in marketplace.offers" :active="active" @switchActive="active = !active"></Package>
</div>
<widget wKey="tuloshop3"/>
</main>
</div>
<div v-else>
<div class="d-flex flex-row align-items-center flex-lg-column align-items-lg-stretch my-5">
<div class="col text-center">
<div class="tulo-marketplace__package--price text-lg-center">
<small>{{ 'content_not_found' | translate }}</small>
<h1 class="mb-2 fw-bold fs-4">{{ 'something_went_wrong' | translate }}</h1>
</div>
</div>
</div>
</div>
</div>
<div v-else>
<div class="d-flex flex-row align-items-center flex-lg-column align-items-lg-stretch my-5">
<div class="col text-center">
<div class="tulo-marketplace__package--price text-lg-center">
<small>{{ 'content_not_found' | translate }}</small>
<h1 class="mb-2 fw-bold fs-4">{{ 'something_went_wrong' | translate }}</h1>
</div>
</div>
</div>
</div>
Template Two: Hero
This template holds a hero image behind the text at the top of the marketplace and the text is centered.


HTML code template two (Hero)
<div class="pb-5 tulo-marketplace__overview-page" v-if="marketplace">
<div v-if="hasOffers">
<div class="newHero" v-if="marketplace.meta.imageUrl">
<div class="newHero__text" style="padding: 50px 0px;">
<h1 class="HKbold mb-0">{{marketplace.meta.header}}</h1>
<p class="fs-18 mt-3" v-html="marketplace.meta.description"></p>
</div>
<img class="newHero__img" :src="marketplace.meta.imageUrl" alt="">
</div>
<div v-else>
<div class="text-center" style="padding: 50px 0px;">
<h1 class="HKbold mb-0">{{marketplace.meta.header}}</h1>
<p class="fs-18 mt-3" v-html="marketplace.meta.description"></p>
</div>
</div>
<main class="container newHero__card">
<div :class="marketplace.offers.length>3 ? 'row-cols-lg-4' : 'row-cols-lg-3'" class="row mb-3 row-cols-1">
<Package :offer="currentOffer" :key="index" v-for="(currentOffer, index) in marketplace.offers" :active="active" @switchActive="active = !active"></Package>
</div>
<widget wKey="tuloshop3"/>
</main>
</div>
<div v-else>
<div class="d-flex flex-row align-items-center flex-lg-column align-items-lg-stretch my-5">
<div class="col text-center">
<div class="tulo-marketplace__package--price text-lg-center">
<small>{{ 'content_not_found' | translate }}</small>
<h1 class="mb-2 fw-bold fs-4">{{ 'something_went_wrong' | translate }}</h1>
</div>
</div>
</div>
</div>
</div>
<div v-else>
<div class="d-flex flex-row align-items-center flex-lg-column align-items-lg-stretch my-5">
<div class="col text-center">
<div class="tulo-marketplace__package--price text-lg-center">
<small>{{ 'content_not_found' | translate }}</small>
<h1 class="mb-2 fw-bold fs-4">{{ 'something_went_wrong' | translate }}</h1>
</div>
</div>
</div>
</div>