www.thebodyshop.se
I have selected Cart drawer as my preferred cart method
however when i add to cart - the page goes blurred and no cart appears
please advsie
Hi @TBS2023
I’ve give it a look on your store’s backend and noticed that the cart page doesn’t appear to be available. It doesn’t seem hidden, but rather missing entirely.
In this case, I recommend reaching out to your theme developer or page builder app support for further assistance, as they’ll be best equipped to help resolve this issue efficiently.
Hope this helps,
David
Hi @TBS2023,
Please go to Customize > Theme settings > Custom CSS and add code:
@keyframes slideInRight {
from {
opacity: 0 !important;
transform: none !important;
visibility: hidden !important;
}
to {
opacity: 1 !important;
transform: translateX(-100%) !important;
visibility: unset !important;
}
}```
i tried your code and nothing happens
Hi @TBS2023,
Please change code:
@keyframes slideInRightNew {
from {
opacity: 0;
transform: none;
visibility: hidden;
}
to {
opacity: 1;
transform: translateX(-100%);
visibility: unset;
}
}
.is-open .drawer__inner {
animation: slideInRightNew 0.6s ease !important;
}
Hey, @namphan is on the right track here. However, one can’t override animation with !important.
Adding the code right above </body> may help though.
The problem – you have an app, I think it is the “SEOAnt ‑ Trust Badges & Icon”.
The app loads its own CSS which overrides the slideInRight animation – the one responsible for cart drawer opening.
You can easily test it by disabling the app and checking if your cart becomes visible.
If it does, you should complain to the App developer.
However, you can modify your theme behaviour to work together with App.
In Customize=> Theme settings (Cog icon) scroll to “Custom CSS” and paste this:
/* make drawer compatible wth Badge app. remove if app removed */
.is-open .drawer__inner {
visibility: visible;
}
cart-drawer .drawer__inner {
left: unset;
right: 0;
transform: translate3d(100%, 0,0);
top: 0;
}
This will modify your cart drawer so that animation defined by app will actually open it.
thank you but it kinda half appears…
What do you mean?
If you’re trying the code in unpublished theme, share a preview link to this theme for further assistance…
no, its it’s in the live site
Remove the code @namphan suggested:
<!-- Cart drawer issue -->
<style>
@keyframes slideInRightNew {
from {
opacity: 0;
transform: none;
visibility: hidden;
}
to {
opacity: 1;
transform: translateX(-100%);
visibility: unset;
}
}
.is-open .drawer__inner {
animation: slideInRightNew 0.6s ease !important;
}
</style>
leave only mine.
Amazing - thank you very much
Just make a note somewhere that when/if you remove the app, the drawer will be broken again and you’d need to remove this code.
