Solved

Sorting products makes space between cards smaller

shorty__ad
Shopify Partner
4 2 0

Hi everyone and thanks in advance for your help 🙂

 

Something weird is happening on my product grids when I sort the products using the Sort By options :

 

Screenshot 2024-04-02 at 11-59-21 cbdlissetheme · Customize cbdlissetheme · Shopify.png

As you can see, the space between the product cards is deleted and cards touch each other. Now what's very weird is that it concerns only the third row of products. I have tried with bigger lists of products but it's always the third one that steps over the second (or get under it, I can't say). It only happens after I selected a sorting option in the Sort By menu... does anyone know why this happens and how to fix it ?

My test store link : https://cbdlissetheme.myshopify.com/
Password : teafla

Accepted Solutions (2)

ThePrimeWeb
Shopify Partner
1808 510 383

This is an accepted solution.

Hey @shorty__ad,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.scroll-trigger.animate--slide-in {
    transform: translateY(0) !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1712056016638.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

shorty__ad
Shopify Partner
4 2 0

This is an accepted solution.

Hello @ThePrimeWeb !
Your solution works, but the problem is that putting this code in the theme.liquid file disabled the slide-in animation, which I'd like to keep. But I found out how to solve this : I edited the class you suggested directly in base.css file like this :

shorty__ad_0-1712058118966.png

And it now works exactly as I wanted 🙂 

 

Thank you for your help and have a very good day !

View solution in original post

Replies 2 (2)

ThePrimeWeb
Shopify Partner
1808 510 383

This is an accepted solution.

Hey @shorty__ad,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.scroll-trigger.animate--slide-in {
    transform: translateY(0) !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1712056016638.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
shorty__ad
Shopify Partner
4 2 0

This is an accepted solution.

Hello @ThePrimeWeb !
Your solution works, but the problem is that putting this code in the theme.liquid file disabled the slide-in animation, which I'd like to keep. But I found out how to solve this : I edited the class you suggested directly in base.css file like this :

shorty__ad_0-1712058118966.png

And it now works exactly as I wanted 🙂 

 

Thank you for your help and have a very good day !