Custom label code help DAWN theme
Hi I’ve managed to add code to my stope to use tags to add labels to my product pages in collections.
the labels display correctly on desktop (top left and cold colour) but on mobile
present as bottom left and simple text. What piece of code am I missing?
Code added:
card-product.liquid =
{%- elsif card_product.tags contains 'NEW IN' -%}
<span class="card__badge--NEWIN">{{ 'NEW IN' }}</span>
{%- elsif card_product.tags contains 'BACK IN STOCK' -%}
<span class="card__badge--BACKINSTOCK">{{ 'BACK IN STOCK' }}</span>
{%- elsif card_product.tags contains 'STAFF PICK' -%}
<span class="card__badge--STAFFPICK">{{ 'STAFF PICK' }}</span>
{%- endif -%}
before the div end and
{{ 'component-card.css' | asset_url | stylesheet_tag }}
in the stylesheet section
code added:
base.css =
.card__badge--NEWIN {
position: absolute;
display: inline-block;
line-height: 1;
text-align:center;
font-size: 1.3rem;
left: .5rem;
top: .5rem;
background-color: #FDA63F;
color:black;
padding: 0.6rem 1.5rem;
}
.card__badge--BACKINSTOCK {
position: absolute;
display: inline-block;
line-height: 1;
text-align:center;
font-size: 1.3rem;
left: .5rem;
top: .5rem;
background-color: #FDA63F;
color:black;
padding: 0.6rem 1.5rem;
}
.card__badge--STAFFPICK {
position: absolute;
display: inline-block;
line-height: 1;
text-align:center;
font-size: 1.3rem;
left: .5rem;
top: .5rem;
background-color: #15446E;
color:white;
padding: 0.6rem 1.5rem;
}
Don't add the css into base.css, you have added in a setting that excludes mobile
Add it here
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.card__badge--NEWIN {
position: absolute;
display: inline-block;
line-height: 1;
text-align:center;
font-size: 1.3rem;
left: .5rem;
top: .5rem;
background-color: #FDA63F;
color:black;
padding: 0.6rem 1.5rem;
}
.card__badge--BACKINSTOCK {
position: absolute;
display: inline-block;
line-height: 1;
text-align:center;
font-size: 1.3rem;
left: .5rem;
top: .5rem;
background-color: #FDA63F;
color:black;
padding: 0.6rem 1.5rem;
}
.card__badge--STAFFPICK {
position: absolute;
display: inline-block;
line-height: 1;
text-align:center;
font-size: 1.3rem;
left: .5rem;
top: .5rem;
background-color: #15446E;
color:white;
padding: 0.6rem 1.5rem;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Don't add the css into base.css, you have added in a setting that excludes mobile
Add it here
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.card__badge--NEWIN {
position: absolute;
display: inline-block;
line-height: 1;
text-align:center;
font-size: 1.3rem;
left: .5rem;
top: .5rem;
background-color: #FDA63F;
color:black;
padding: 0.6rem 1.5rem;
}
.card__badge--BACKINSTOCK {
position: absolute;
display: inline-block;
line-height: 1;
text-align:center;
font-size: 1.3rem;
left: .5rem;
top: .5rem;
background-color: #FDA63F;
color:black;
padding: 0.6rem 1.5rem;
}
.card__badge--STAFFPICK {
position: absolute;
display: inline-block;
line-height: 1;
text-align:center;
font-size: 1.3rem;
left: .5rem;
top: .5rem;
background-color: #15446E;
color:white;
padding: 0.6rem 1.5rem;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Community Blog Articles
In Canada, payment processors, like those that provide payment processing services t...
By Jacqui Mar 14, 2025
Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025
Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025