Shopify themes, liquid, logos, and UX
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
@studioseductres Hey, thanks for posting here.
Here is the code you can use to achieve this:
Access your Shopify theme files:
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 %}
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
pleae share preview
and please mark my comment as solution , thanks @studioseductres
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>
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
Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!
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>
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025