Dodanie górnej belki z zaletami (UX) – Shoper

W pliku body_head.tpl (w dowolnym miejscu) dodajemy poniższy kod HTML:

<div class="belka-zalet">
	<div>
		<i class="far fa-gem"></i>
                <span>Wysoka jakość</span>
        </div>
        <div>
		<i class="fas fa-truck"></i>
		<span>Szybka wysyłka</span>
        </div>
        <div>
		<i class="fas fa-shield-alt"></i>
                <span>Bezpieczne zakupy</span>
        </div>
</div>

Uwaga: aby wyświetlały się piktogramy należy użyć CDN Font Awesome (zazwyczaj na Shoperze już jest to zaimplementowane

Następnie CSS:

.belka-zalet {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    background: #2b64af;
    gap: 150px;
    padding: 6px 0;
}

.belka-zalet i {
    padding-right: 8px;
    font-size: 15px;
    color: #fff;
}

.belka-zalet span {
    font-size: 15px;
    color: #fff;
}

@media (max-width: 776px) {
	display: none;
}