How can I make my cart transition as smooth as my menu drawer?

Store Design
, , , , ,

Topic summary

A user seeks to match their cart drawer’s transition animation to their menu drawer’s smoother effect.

Proposed Solution:

  • Add custom CSS to the base.css file
  • The code modifies .styles_CartPreview__2scQR class with transform and visibility properties
  • Aims to replicate the menu’s transition timing (0.4s)

Current Status:

  • Solution works on desktop
  • Issue remains: Not functioning properly on mobile devices
  • Discussion is ongoing, awaiting further troubleshooting for mobile compatibility
Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hi guys,

I would like to make the transition for cart same as menu drawer. Cart drawer is not as smooth as menu drawer as well. I would appreciate your help.

Thanks

URL: https://basicbastard.co/

2

Hi @basicbastardco ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.styles_CartPreview__2scQR {
	transform: translate(100%);
    visibility: hidden;
    right: 0 !important;
	transition: .4s !important;
}
.styles_CartPreview__right__V29QR.styles_active__7AzVD {
    transform: translate(0);
    visibility: visible;
}

it will use the same transition as Menu.

Hope it helps!

1 Like
3

It worked however, on an actual phone it is not working well.