Simple Theme. Help for remove Sale icon on product

New Member
3 0 0

Hi,

I would like to remove the Sale icon on the product but keep the real price and sale price. Is this possible?

Thank you. 

Marie

0 Likes
Astronaut
1890 1 393

On which page do you want to remove the sale icon: the collection page or the product page?

Edit HTML/CSS and open Assets/theme.scss.  Look for the sections of code below and change the display property value from "display: block" to "display: none".

If you want to remove the sale icon from the collection page, go to Line 1538.

	section.product-grid div.columns a .sale {
	  color: #fff;
	  background: none repeat 0 0 {{ settings.accent_color }};
	  border-radius: 50% 50% 50% 50%;
	  display: none;
	  font-size: 12px;
	  font-weight: bold;
	  text-transform: uppercase;
	  text-align: center;
	  width: auto;
	  height: 45px;
	  min-height: 45px !important;
	  line-height: 45px;
	  position: absolute;
	  z-index: 3;
	  top: 10px;
	  right: 15px;
	  padding: 0 5px;
	}

If you want to remove the sale icon from the product page, go to Line 2004.

	section#images div.sale {
	 	color: #fff;
		background: none repeat 0 0 {{ settings.accent_color }};
		border-radius: 50% 50% 50% 50%;
		display: none;
		font-size: 12px;
		font-weight: bold;
		text-transform: uppercase;
		text-align: center;
		width: auto;
		height: 45px;
		min-height: 45px !important;
		line-height: 45px;
		position: absolute;
		z-index: 3000;
		top: 10px;
		right: 15px;
		padding: 0 5px;
	}

I hope this helps.

0 Likes
New Member
3 0 0

It was for the product page!! Thank you very much, I will try this!

0 Likes
New Member
1 0 0

Hi, 

 

Would like to do the same thing. I have never edited code before but 

1. First of all, I have Assets {\}theme.scss.liquid - Is it the same thing?

2. I could not find those in the lines which you have mentioned. Is there a keyword I should be finding instead?

 

Thank you!

0 Likes
New Member
1 0 0

Hi, I'm another shop owner that recently updated the simple theme.  I figure out how to get rid of the sale badges this way. Keep in mind I am not a coder or anyone techie.  But this worked for me. Go to Themes under Online store and click on the Actions drop down menu and then click edit code, click on Assets/theme.scss.

Find Line: 3079

.badge {
position: absolute; 
line-height: 1.1;

 

I added display: none; into that part of the code: line: 3080 and magically the sale badges disappeared. (see below)

.badge {
position: absolute; display: none;
line-height: 1.1;

 

Hope that helps, I looked for hours to find a solution, but couldn't.  So I tried a couple of things and this worked.

- Kristen

 

0 Likes