Banners in shop page

Hi guys!

1) I want to have the SOLD OUT, LIMITED AVAILABILITY and NEW labels as per the attached reference. 

How can I do this? I need it for both, desktop and phone. 

2) I want to add the word AUD next to all my prices in shop page and product page.

Thank you so much!

Hi,

What is shop page? We can check easier

Hi @tuanphan my shop page is: 

www.gastonduflos.com/shop 

#1. First, you need to create some tags: Limited Availability, New and assign products

Next, we can target products belong these tags to add code easier

#2. Add to Design > Custom CSS

/* Add AUD */
.product-price:after {
    content: " AUD";
}

HI @tuanphan thank you very much, that works perfect for the AUD.

I've created the TAGS: SOLD OUT, NEW and LIMITED AVAILABILITY and I've assigned them to some of the products. How should I proceed? Thank you so much,.

On 5/6/2023 at 9:38 AM, GastonDuflos said:

HI @tuanphan thank you very much, that works perfect for the AUD.

I've created the TAGS: SOLD OUT, NEW and LIMITED AVAILABILITY and I've assigned them to some of the products. How should I proceed? Thank you so much,.

You can use this code to Website > Website Tools > Custom CSS

div.tag-new figure.grid-image:after {
    content: "NEW";
    display: block;
    width: 100%;
    background-color: #f1f;
    color: #fff;
    padding: 5px;
    line-height: 20px;
    text-align: center;
}
div.tag-sold-out figure.grid-image:after {
    content: "SOLD OUT";
    display: block;
    width: 100%;
    background-color: green;
    color: #fff;
    padding: 5px;
    line-height: 20px;
    text-align: center;
}
div.tag-limited-availability figure.grid-image:after {
    content: "LIMITED AVAILABILITY";
    display: block;
    width: 100%;
    background-color: black;
    color: #fff;
    padding: 5px;
    line-height: 20px;
    text-align: center;
}