Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How do I replace the "Sale" text for the product labels in collections page?


ksachse

Question

Site URL: https://bit.ly/2WGvguN

I'm trying to replace the "SALE" text with "SAVE".
The outer yellow box is fine as-is, I just want to replace the copy/text.

So far I've tried the below codes each on their own in my custom css with no luck:

<div class="product-mark sale">SAVE</div>

or

<div class="ProductList-statusWrapper sqs-product-mark-wrapper">
            <div class="product-mark sale">SAVE</div>
          </div>

or

/*Replaces SALE text*/
<figure class="ProductList-outerImageWrapper" id="yui_3_17_2_1_1630441403606_985">
          <div class="ProductList-statusWrapper sqs-product-mark-wrapper">
            <div class="product-mark sale">SAVE</div>
          </div>

        </figure>

None seem to work.

Any idea what I'm missing here?

Best,
Kaila

Screen Shot 2021-08-31 at 1.34.04 PM.png

Link to comment
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

2 answers to this question

Recommended Posts

  • 1

Add to Design > Custom CSS

.product-mark.sale {
    visibility: hidden;
}

.product-mark.sale:before {
    visibility: visible;
    content: "SAVE";
    background: #cda447;
    padding: 5px;
    font-family: Montserrat;
    font-weight: 700;
    font-style: normal;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Ah, that makes sense! I was using the wrong code type.

Thank you @tuanphan!!

This was the final code I used:

/*Replaces SALE text*/
.product-mark.sale {
    visibility: hidden;
}

.product-mark.sale:before {
    visibility: visible;
    content: "SAVE";
	display: flex;
	align-items: center;
    justify-content: center;  
    background: #cda447;
	border-radius: 100%;
    font-family: Montserrat;
    font-weight: 600;
    font-style: normal;
    width: 3em;
    height: 3em;
    min-width: 3em;
    min-height: 3em;
    padding: 1em;
}

 

Screen Shot 2021-09-10 at 11.54.39 PM.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...