Instructions for Cart Drawer App CSS Customizations

To customize the Cart Drawer app, follow these steps:

• Go to the Cart Drawer app's dashboard.
• Locate the Custom CSS section within the app settings.
• Add css code to the section.

• Save Changes in the app’s dashboard
• Test the changes on your store to ensure they display correctly.

Change Container Width:

Copy code bellow

#kaktusc-root > div > div { max-width: 500px!important; }

Change Cart Font Family:

Copy code bellow

.kaktusc-cart__top, .kaktusc-cart__empty-cart, .kaktusc-cart__shipping, .kaktusc-cart__notes-text, .kaktusc-cart__discount-code, .kaktusc-cart__discount-code-btn, .kaktusc-cart__total, .kaktusc-cart__checkout, .kaktusc-cart__continue, .kaktusc-cart__product-content, .kaktusc-cart__product-price-wrap, .kaktusc-cart__notes {
font-family: 'Mouse Memoirs'!important; }

Hide "Continue Shopping" Button:

Copy code bellow

.kaktusc-cart__continue { display: none}

Add Margins to "Continue Shopping" Button:

Copy code bellow

.kaktusc-cart__continue {
  margin-top: 20px;
  margin-bottom: 20px;
}

Add Padding to Shipping Section:

Copy code bellow

.kaktusc-cart__shipping { padding: 15px 5px; }

Add Border to "Checkout" Button:

Copy code bellow

.kaktusc-cart__checkout { border: 1px solid #000; }

Remove Default Title:

Copy code bellow

.kaktusc-cart__offer-product-variant { display: none; }

Make Quantity Numbers Smaller:

Copy code bellow

.kaktusc-cart__product-qnt {
 font-size: 14px; }

Ensure Price in One Line for Mobile:

Copy code bellow

@media screen and (max-width: 480px) {
  .kaktusc-cart__product-price-wrap {
    width: max-content;
  }
}

Resize Upsell Section (Desktop):

Copy code bellow

.kaktusc-cart__offer-product {
 padding: 0px 5px;
}
.kaktusc-cart__offer-product-content {
  margin-left: 1px;
  width: 90px;
}
.kaktusc-cart__offer-product-img {
  padding: 1px;
}

Resize Upsell Section (Mobile):

Copy code bellow

@media screen and (max-width: 480px) {
  .kaktusc-cart__offer-product {
    padding: 2px 1px;
  }
  .kaktusc-cart__offer-product-content {
    width: 90px;
    margin-left: 1px;
  }
}

Change Note Section Height:

Copy code bellow

.kaktusc-cart__notes { height: 50px; }

Enable RTL for Cart:

Copy code bellow

.kaktusc-cart__discounts, .kaktusc-cart__product, .kaktusc-cart__offer-product {
 flex-direction: row-reverse; }

Adjust Cart Icon Size:

Copy code bellow

.kaktusc-cart-icon {
  width: 50px;
  height: 50px; }

Updated on: 16/10/2024