Solved

Custom label code help DAWN theme

ANovelPlace
Tourist
6 0 1

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? 

 

IMG_6619.jpeg

 

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;
}

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2127 608 473

This is an accepted solution.

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.

ThePrimeWeb_0-1714484805119.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 5 (5)

ThePrimeWeb
Shopify Partner
2127 608 473

Hey @ANovelPlace,

 

Can you share the link to your store please?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ANovelPlace
Tourist
6 0 1
ThePrimeWeb
Shopify Partner
2127 608 473

This is an accepted solution.

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.

ThePrimeWeb_0-1714484805119.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ANovelPlace
Tourist
6 0 1

That worked perfectly! Thank you so much for your help 😀

suyash1
Shopify Partner
9266 1152 1495

@ANovelPlace - can you please share this page link?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI