Solved

Cart Drawer Blurry Underlay and Width

kimkim79
Tourist
10 0 0

How can I add a blurry underlay when the cart drawer is open? Similar to this style shown below. I am using the dawn theme. I also want to increase the width to become similar to the image below please. Thank you! 

 

My website is https://layaandlu.myshopify.com/

 

Screenshot 2024-01-17 at 2.42.19 am.png

Accepted Solution (1)

Natasha-Saed
Shopify Partner
396 43 69

This is an accepted solution.

Hi,

 

To increase the width of the drawer:

 

1- go to online store

2- edit code

3- open your base.css file

4- add the following code at the bottom and save.

 

.drawer__inner {width: 60rem !important}

 

Modify the 60rem until you get your desired width your store are currently set to 40rem.

If my solution helped you don't forget to accept it to help others.
===================================================================
And if you really like my support share a cup of coffee with me paypal.me/freemindsint

View solution in original post

Replies 6 (6)

Natasha-Saed
Shopify Partner
396 43 69

This is an accepted solution.

Hi,

 

To increase the width of the drawer:

 

1- go to online store

2- edit code

3- open your base.css file

4- add the following code at the bottom and save.

 

.drawer__inner {width: 60rem !important}

 

Modify the 60rem until you get your desired width your store are currently set to 40rem.

If my solution helped you don't forget to accept it to help others.
===================================================================
And if you really like my support share a cup of coffee with me paypal.me/freemindsint
kimkim79
Tourist
10 0 0

Thank you so much that works perfectly 

Natasha-Saed
Shopify Partner
396 43 69

Glad I was able to help

If my solution helped you don't forget to accept it to help others.
===================================================================
And if you really like my support share a cup of coffee with me paypal.me/freemindsint

Natasha-Saed
Shopify Partner
396 43 69

As for the overlay:  follow my previous steps and add the following code at the end then save.

 

.cart-drawer__overlay {background: #ffffffdb !important;}

 

 

If my solution helped you don't forget to accept it to help others.
===================================================================
And if you really like my support share a cup of coffee with me paypal.me/freemindsint
kimkim79
Tourist
10 0 0

Thanks for this. I want the background to be blurry, but with this code i get a very light white colour. Anything else I can do? 

Natasha-Saed
Shopify Partner
396 43 69

Add the following code Instead of the previous one.

 

.cart-drawer__overlay {background: #ffffffdb !important; filter: blur(8px); }

 

Modify the 8px to your desired blur value

If my solution helped you don't forget to accept it to help others.
===================================================================
And if you really like my support share a cup of coffee with me paypal.me/freemindsint