Tilføj et mærke på dine produkter i Shopify
- Shopify
Sebastian Stokkendal
- 8447 visninger
- 13/06/2022
Sebastian Stokkendal
I vores eksempel har vi valgt at gøre det ekstra nemt for kunderne at se, når der er et produkt der er snart på vej. I temafilerne, product-grid-item.liquid har vi derfor tilføjet lidt Liquid kode, som tager fat i alle vores tags, og tilføjer en <span> på produktkortene hvis produkterne har et produkt tag der hedder ’Kommer’.
{% for tag in product.tags %}
{%- if tag == ‘Kommer’ -%}
<div class=”kommerbadgediv”>
<span class=”kommerbadge”>Kommer Snart</span>
</div>
{%- endif -%}
{% endfor %}
Koden skal indsættes i product-grid-item.liquid, gerne inden for eller så tæt på product-item klassen som muligt. Ryk rundt på koden i dit tilfælde og se hvad der virker.
Koden her fortæller os, at den hiver fat i alle produkt tags, og hvis tagget er lig med Kommer, så skal den skyde en span ud, der indeholder ”Kommer Snart”.
Tilføj nu et tag der hedder “Kommer” på én af dine produkter og se resultatet.
Ønsket var, at få Kommer Snart teksten til at være i øverste højre hjørne på produktkortene som et mærke.
Dette kan vi gøre med lidt CSS:
.kommerbadgediv {
min-width: 100px!important;
padding: 7px;
background: #3f2a5a;
position: absolute;
top: -25px;
right: -22px;
z-index: 99999;
-ms-transform: translateX(30%) translateY(0%) rotate(45deg);
-webkit-transform: translateX(30%) translateY(0%) rotate(45deg);
transform: translateX(30%) translateY(0%) rotate(45deg);
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left;
box-shadow: rgba(0, 0, 0, 0.6) 0px 5px 15px;
}
.kommerbadge {
padding: 37px;
color: white;}
@media only screen and (max-width: 800px) {
.kommerbadge {
font-size: 11px;
} }
Indsæt ovenstående CSS-kode i din CSS fil.
* Vil dit CSS ikke virke? Så kan du følge denne guide.
Eller følge dette link: https://nemdigital.dk/support/hvorfor-virker-mit-css-i-shopify-ikke/