Changing "sale" icon text

Austin_Boyd1
New Member
5 0 0

I would like to change my "sale" text for an item on sale to say something else. How would I do this?

 

I am using the blockshop theme.

0 Likes
elliot74710
Shopify Staff
Shopify Staff
76 0 6

Hey Austin.

To change that sale text to something else, you can:

  1. Head over to your Admin -> Themes -> Customize Theme -> Edit HTML/CSS
  2. From here, navigate to your locales folder, you should see something called en.default.json
  3. Go to line 115, there should be something called
    "sale": "Sale",

From here, you should be able to change that second part to whatever you would like. If you have any questions shoot us an email :)

Cheers, Elliot
support@shopify.com

 

Austin_Boyd1
New Member
5 0 0

Got it! However the text looks a little too large, how would I downsize the text for the sale badge?

0 Likes
Alex135
Astronaut
1889 1 462

Open Assets/style.css.  Look for the following section of code around Line 1387.  Change the values for the font-size properties.

.product-grid .circle { text-align: center; text-transform: uppercase; display: block; position: absolute; z-index: 1; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; color:  #f7f7f7  ; background:  #444444  ; font-family:  "lato" ; font-size: 1em; font-weight: 300; padding: 0; top: 5px; right: 5px; height: 65px; width: 65px; }
.product-grid .circle:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -1px; /* Adjusts for spacing */ }
.product-grid .circle span { max-width: 57px; margin-left: 4px; word-wrap: break-word; display: inline-block; vertical-align: middle; }
@media only screen and (min-width: 1280px) { .product-grid .circle { font-size: 1.16667em; top: 15px; right: 15px; height: 90px; width: 90px; }
  .product-grid .circle span { max-width: 82px; } }

I hope this helps.

tim_frenneaux
New Member
1 0 0

This was just the help I needed, but now I have a follow on query:

I hacked  the sale badge to say "Crew", as my store allows people to buy stuff to share together with a crew of friends

However, I would also like to have some items up for sale, how can I make 2 different badges, one saying 'Crew' one saying 'Sale'

Thanks

0 Likes
cjwherry
New Member
1 0 0

how do I change the colour of the red sale button? cant do it in the primary button colour section so idk if it will be in the code? cheers.

0 Likes