Add "limited edition" above product title dawn theme

[studioseductres]

Hi hoping someone wonderful can help me please. Trying to add a "limited edition" button like this above products.
White bacground with black text instead though please.
My website is www.studio-seductress.com password:yesyesyes

[ProtoMan44]

@studioseductres Hey, thanks for posting here.

Here is the code you can use to achieve this:

1. Access your Shopify theme files:

   • Go to Online Store > Themes in your Shopify admin.
   • Click Actions > Edit Code on the Dawn theme.

2. Add the following code:

   In the product-template.liquid or product-card.liquid (depending on your theme version), find the section where the product title is displayed. You'll want to insert the code that checks if the product has the "Limited" tag and displays the "Limited Edition" label above the title.

   Example code to add:

{% if product.tags contains 'Limited' %}
  <div class="limited-edition-tag" style="background-color: white; color: black; padding: 5px; text-align: center; font-weight: bold; font-size: 14px;">
    LIMITED EDITION
  </div>
{% endif %}

[studioseductres]

That worked great thankyou but can you make it a small button, so its just around the text not so much white padding on either side. Similar to my example photo please

[ProtoMan44]

pleae share preview

and please mark my comment as solution , thanks @studioseductres 

[DaisyVo]

Hi @studioseductres 

1. https://prnt.sc/nNJ50_bvkwFj  Find the main-product.liquid file, find the title code as shown

2. https://prnt.sc/g9vPhtj65k5n  Add the code as shown in the picture. I have edited this code to have a white background and black text to match your store.

<div class="ani-above-title"
style="text-transform: uppercase;
background: white;
color: black;
width: fit-content;
padding: 10px;">
limited edition
</div>

[studioseductres]

this worked but is it possible to make it a lot smaller like the photo i provided and centered like my other text? thank-you

[DaisyVo]

Hi @studioseductres 

.limited-edition-tag {

   width: fit-content !important;

   margin-inline: auto !important;

}
I see you have your own custom tweaks to suit your site
Here is the next code to make the width shorter and center aligned

You can add code here - https://prnt.sc/10kFesqw2p65

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

[Dan-From-Ryviu]

Hi @studioseductres 

Please go to your store admin > Sales channels > Online store > Themes > Customize > click on Home dropdown menu > Products > select your product template, hover above Title in Product information > click "+" > Custom Liquid, paste this code 

<div style="display: flex; width: 100%;">
<span style="padding: 4px 10px; background: #fff; color: #000; float: left;">Limited Edition</span>
</div>