label HOT and NEW

Hello,

Can you please share the page URL so I can further check on your site and give you a possible solution?

Best Regards,

Hello,

Please copy and paste the below given CSS code to Theme Settings > Custom CSS > Global CSS.

/* Hot (featured) – second */
.product-grid-item .product-label.featured {
    order: 2;
}

/* Sale – last */
.product-grid-item .product-label.onsale {
    order: 3;
}

/* Move labels to the right side */
.product-grid-item .product-labels {
    inset-inline-start: auto;
    inset-inline-end: 7px;
}

Best Regards,

Hello,

Can you please share the page URL where the hot label is showing too so I can further check on your site and give you a possible solution?

Best Regards,

Hello,

Please remove the previous code and add the below given CSS code to Theme Settings > Custom CSS > Global CSS.

/* TEXT LABELS → PUSH TO RIGHT */
.product-grid-item .product-label:not(.label-with-img) {
    transform: translateX(calc(100% + 55px));
    align-self: flex-end;
    bottom: 30px !important;
    position: relative;
}

/* ORDER (RIGHT SIDE) */
.product-grid-item .product-label.new {
    order: 1;
}

.product-grid-item .product-label.featured {
    order: 2;
}

.product-grid-item .product-label.onsale {
    order: 3;
}

Best Regards,

Hello,

Please remove the previous code and add the below given CSS code to Theme Settings > Custom CSS > Global CSS.

/* KEEP TEXT LABELS ON THE LEFT */
.product-labels {
    left: 7px;
    right: auto;
}

/* MOVE ATTRIBUTE IMAGE LABELS TO THE RIGHT */
.product-labels .product-label.label-with-img {
    position: absolute;
    right: -100%;
    left: auto;
    top: 0;
}

/* ORDER OF TEXT LABELS (LEFT SIDE) */
.product-labels .product-label.new {
    order: 1;
}

.product-labels .product-label.featured {
    order: 2; /* Hot */
}
.product-labels .product-label.onsale {
    order: 3;
}

Best Regards,

Hello,

Please remove the previous code and add the below given CSS code to Theme Settings > Custom CSS > Global CSS.

/* MOVE ATTRIBUTE IMAGE LABEL TO THE RIGHT EDGE */
.product-grid-item {
    position: relative;
}

.product-grid-item .product-label.label-with-img {
    position: absolute;
    right: 7px;
    left: 180px;
    top: 5px;
}

/* ORDER OF TEXT LABELS (LEFT SIDE) */
.product-labels .product-label.new {
    order: 1;
}
.product-labels .product-label.featured {
    order: 2; /* Hot */
}
.product-labels .product-label.onsale {
    order: 3;
}

Best Regards,