How can I add labels to product titles on Broadcast theme?

Store Design
1

Hi there!

Would anyone know how to add labels to product titles (showed using the pictures below. What code/app would this require? I am currently using the Broadcast theme.

Thanks!

1 Like
2

@BlastedFX hi,

you can try this app https://apps.shopify.com/product-labels

3

Hi @AvidBrio

That’s close but not quite what I am looking for. I would want the label to be in the product title like the pictures attached in the above thread.

Thanks for the suggestion tho :slightly_smiling_face:

4

@BlastedFX can you please share the live product URL and how the label you want show.

label want show same on every products

5

Hi @BlastedFX ,

Broadcast theme supports this without having to install the app.

Refer https://broadcast.invisiblethemes.com/collections/product-badges#how-to-create-custom-badges

You just need to add tags as instruction, it will work fine.

Hope it helps!

1 Like
6

@AvidBrio Here is a live URL for what I mean: https://musclenation.org/collections/mens-sale?page=1&sortBy=production_shopify_products

The “SAVE 50%” is an example of what I would want for the product title.

7

Hi @LitExtension

I know the customized product labels for the product images, in which I have done, but I don’t quite mean doing that. Here is a live URL for what I mean: https://musclenation.org/collections/mens-sale?page=1&sortBy=production_shopify_products

The “SAVE 50%” is an example of what I would want for the product title.

Thanks!

8

Hi @BlastedFX ,

You want it to look like this?

Screenshot.png
Screenshot.png814Ă—636 239 KB

Or

Screenshot.png
Screenshot.png1049Ă—595 308 KB

Please make your choice, I will guide you in detail

9

Hi @LitExtension ,

Yes! The first one is exactly what I am looking for!

If you can walk me through that would be greaty! :slightly_smiling_face:

10

Hi @BlastedFX ,

Go to Assets > base.css and paste this at the bottom of the file:

.product-card__info {
    position: relative;
    padding-top: 15px;
}
.badge.price__badge-sale{
	position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    color: rgb(var(--color-gray-900));
    border-left: 4px solid #e02b2b;
}

Hope it helps!

11

Hi @LitExtension ,

Is there any way I could make the label have custom text?

12

Hi @BlastedFX ,

this will need to be checked in the source, so you can send me a staff account or source theme.

I will check it.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

13

Hi @BlastedFX ,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.