Remove "SALE" sticker on products (featured and collections) in the Impulse theme.

Solved
Highlighted
Excursionist
14 0 4

ok so I did the change and this is what results.  It has removed the previous sale sticker and put mine in there but it is above the picture and too big.  So it's close but need to adjust the size and position.  shopify code 2.PNG

0 Likes
Highlighted
Excursionist
14 0 4

Actually I just made the asset smaller and created a new asset so the size is fine and I can adjust, but the only part I don't know now is how to reposition it so that it is on the right side of the product image instead of the left side and that it is overlaid on the image so that if some products don't have a sale they are not positioned differently as you can see in this picture.  Also, it shows on the home page and on the main product page but when you click on the individual product then it doesn't show.  I suppose that is ok but would be better I think for it to show all the way through. shopify code 2.PNG

0 Likes
Highlighted
Shopify Partner
199 13 36

Hi @dolifehealthier ,

 

You can re-add the CSS class like so:

 

<div class="grid-product__tag grid-product__tag--sale">
  <img src='{{'yourfile.jpg' | asset_url }}' alt='product sale tag' />
</div>

The CSS class should just do the alignment and padding. You may see a change in color that can be edited out from theme.scss.liquid. 

 

Hopefully that does the trick but you're home free at this point and I really like the leaf sale icon really draws my eyes towards those products.

 

As for the sale image on the product details page you would do the same thing in step 2 only in sections/product-template.liquid

 

Regards,

 

Sam

Shopify Themes and Custom Apps | hello@achieveapplabs.com
0 Likes
Highlighted
Excursionist
14 0 4

OH soooo close! So here is how it looks now, how do I get rid of the blue box behind the sticker?  shopify code 2.PNG

1 Like
Highlighted

Success.

Shopify Partner
199 13 36

Hi @dolifehealthier ,

 

If you go to Shopify Admin > Online Store > Edit code 

 

Then from the left folder view click "Config" and open settings_data.json. Search for something similar to "color_sale_tag", you should see the CSS Hex color code next to that variable. Make the color change from there, you can use "transparent" as the value or any color you would like.

 

All the best,

 

Sam

Shopify Themes and Custom Apps | hello@achieveapplabs.com
0 Likes
Highlighted
Excursionist
14 0 4

Hallelujah! It worked!! You are amazing.  Thanks for helping me out.  I understand how coding works a little bit better because of this as well so it will be easier for me to find certain fixes in the future.  Thanks again. 

1 Like
Highlighted
Shopify Partner
199 13 36

Hi @dolifehealthier ,

 

I am noticing the sale tag image is broken on your site:

 

dolifehealthier_2.PNG

 

When I go to visit the link for the image I get "transformation failed". What I think you should do is upload the original large image and specify the size by adding "_200x200" before ".png" or whatever the dimensions you wanted. Shopify does resize and make changes to your images so not sure why the links are broken or if you've noticed but since I advised you I feel responsible. 

 

Shopify’s image resizing ‘magic’

Shopify’s CDN also has a “magic” feature that lets it provide versions of your original image at a variety of sizes and formats — on demand and without any actions on your part. 

For example, by adding “_200x200” to the end of the filename (but before the extension), Shopify’s server will take the original file and resize it to a 200 pixel by 200 pixel square — without requiring any image editing software: https://cdn.shopify.com/s/files/1/1126/4122/products/sample-image_200x200.

 

 

Source: https://outofthesandbox.com/blogs/shopify-theme-blog/shopify-theme-image-conversion

 

Regards

 

Sam

Shopify Themes and Custom Apps | hello@achieveapplabs.com
0 Likes
Highlighted
Shopify Partner
199 13 36

Hello,

 

Had another look and it's all working!

 

Looks great,

 

Sam

Shopify Themes and Custom Apps | hello@achieveapplabs.com
0 Likes
Highlighted
Excursionist
14 0 4

Yes it looks great! Thank you.  It is a little bit different on mobile and doesn't look as good.  I'm sure there is a way to fix it so that it is better for the mobile experience.  Thanks again for all your help. 

0 Likes