Positioning On Sale Sticker

On some websites like Varese the "On Sale" sticker needs to be repositioned. Use the following code and adjust the values accordingly. 

Method 1. (liquid modification) *preferred

1. Locate product-loop.liquid from the theme HTML / CSS.

2. comment out the product label include that is near the bottom of the page.

{% comment %} 
{% include 'product-labels' with product-loop %}         
{% endcomment %}

3. Add the product-label code right after the product-price class.

      <div class="product-price">
        {% include 'product-labels' with product-loop %}

4. Make the appropriate CSS style changes:

/* POSITION THE ON SALE BUTTON */
.product-thumbnail .product-labels {
  margin-right: 35%;
}
.label {
  font-size: 65%;
}
.product-labels {
  margin-top: -4px !important;
}


@media screen and (max-width: 650px) {
.product-thumbnail .product-labels {
  margin-right: 15%;
}
}

@media screen and (max-width: 500px) {
.product-thumbnail .product-labels {
  margin-right: 0 !important;
}
.label {
  font-size: 55%;
}
span.money {
  font-size: 90%;
}
}

   

---

 

Method 2.

To reposition the "On Sale" sticker without touching the liquid code use the following CSS. The downside of using this method is the sticker will change position when resized.

 .product-labels {
  position: absolute;
  bottom: 28% !important;
  right: 12px;
}

As the window is resized the sticker will end up overlapping part of the text so also include @media queries at key intervals.