How to make sale tag inside of the square box on desktop and mobile?

[AlexYZ]

Like this

Mine is outside of the box on desktop and mobile

[GemPages · Accepted solution]

Hello @AlexYZ

It's GemPages support team and glad to support you today.

Please check out my suggestion below:

1. Go to Online Store -> Theme -> Edit code

2. Open your theme.liquid file, paste the below code before </body>

<style>
  body.template-collection .grid-product__image-wrap .grid-product__tags{
    left: 5%;
  }
</style>

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team

[PageFly-Victor · Accepted solution]

Hi @AlexYZ ,

you can try using my code

#PageContainer [data-section-type="collection-template"] .grid-product__tags{left:5%}

[AlexYZ]

website kawaiibonjour.com

[GemPages · Accepted solution]

Hello @AlexYZ

It's GemPages support team and glad to support you today.

Please check out my suggestion below:

1. Go to Online Store -> Theme -> Edit code

2. Open your theme.liquid file, paste the below code before </body>

<style>
  body.template-collection .grid-product__image-wrap .grid-product__tags{
    left: 5%;
  }
</style>

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team

[AlexYZ]

Thank you @GemPages It works!

[AlexYZ]

Hi @GemPages, it fixes on the collection list but take a look on my homepage featured collections and product page the sale tag is still outside the box.

Homepage featured collections

Product page, recomended for you, you may also like, recently view

[AlexYZ]

Hi @GemPages, any fix? 

[AlexYZ]

Hi @Denishamakwana , I saw your fix sale tag on another post, do you have the fix for this?

[Denishamakwana · Accepted solution]

Please add below css code at bottom of assets/theme.css file

.grid-product__tags {

     left: 5%;

}

Thank you.

[AlexYZ]

@PageFly-Victor Do you know how to fix this?

This code only fix the collection list but not the featured collection and product recomendations, recently viewed on product page.

<style>
body.template-collection .grid-product__image-wrap .grid-product__tags{
left: 5%;
}
</style>

[PageFly-Victor · Accepted solution]

Hi @AlexYZ ,

you can try using my code

#PageContainer [data-section-type="collection-template"] .grid-product__tags{left:5%}

[AlexYZ]

Hi@Denishamakwana @PageFly-Victor , both of the code works, thanks so much!