How can I modify cart drawer quantity in the Spotlight theme?

[RobArt98]

Hello everyone,

im still struggling and searching a solution to adapt my cart drawer.

1. Current status: Missing “MENGE:” its just " - 1 + " Selector.

2. Current status: change Position of the Price like in “Future status” if not possible, then

put “Preis:” €29,95

3. Change the “Delete/Bucket icon” into “ENTFERNEN” like on the “future status”

If anyone can assist, or help it would be very very nice.

Anyway if some has just one solution for those three topics

USING SPOTLIGHT THEME

[BSS-Commerce]

Hi @RobArt98 ,

You can use the following solution:

1. In Online store, select Themes → More → Edit code

2. In the file cart-drawer.liquid

2.1 Find the code:

{{ item.original_price | money }}

Replace this code:

<div class="product-option">
   {{ item.original_price | money }}
</div>

Replace with the following code:

<span><strong>Preis:</strong></span> <span class="product-option">
                              {{ item.original_price | money }}
                            </span>

2.2 Find the following code

<quantity-input class="quantity cart-quantity">

Add the following code in the above position:

<span><strong>MENGE:</strong></span>

2.3 Find the following code:

{% render 'icon-remove' %}

Replace with the following code:

<!-- {% render 'icon-remove' %} -->
ENTFERNEN

Click Save to save the changes

3. In component-cart-items.css

Add the following code at the end of the file

cart-remove-button .button:hover {
  text-decoration: underline
}
.cart-item__quantity-wrapper {
   flex-wrap: wrap;
}
@media screen and (min-width: 750px)
.cart-item cart-remove-button {
    margin: 0;
}

Result:

Click Save to save changes

Hope it helps @RobArt98

[RobArt98]

@BSS-Commerce WOW, WOW,WOW !! MANY MANY THANKS !! You made my day !!

I have implemented your code. everything is working fine its just a one think

How can i align “PREIS” or all other items ?

Thanks in advance

[BSS-Commerce]

Hey @RobArt98 ,

I don’t have access to your store so I can’t know exactly why the Pries text is skewed, but I guess it’s because the margin or padding is greater than 0.

Can you kindly share your store link (with the password, if any) with me? I will check it and suggest you a solution if possible.

[RobArt98]

hey @BSS-Commerce thanks for your fast reply.

i currently checked the code and adapted by my own

How can I align for my mobile version “ENTFERNEN”

Im using following code

DESKTOP looks perfect

cart-remove-button .button {
min-width: calc(4.5rem / var(–font-body-scale));
min-height: 1.5rem;
padding: 0;
margin: 0 0.1rem 0.1rem 0;
margin-left: -21px;
}

MOBILE:

@media screen and (min-width: 1024px) {
cart-remove-button .button {
min-width: 3.5rem;
min-height: 3.5rem;
margin-top: -25px;
margin-left: -7px ;
font-size: 12px;
}
}

If not possible, maybe the trashcan can be rollback for mobile?

many many many thanks in advance

[BSS-Commerce]

Hey @RobArt98 ,

The text ENTFERNEN on mobile is misaligned because the margin left has a value of less than 0

My solution is:

@media screen and (min-width: 1024px) {
cart-remove-button .button {
min-width: 3.5rem;
min-height: 3.5rem;
margin-top: -25px;
margin-left: 0px ;
font-size: 12px;
}
}

Hope it helps @RobArt98

[RobArt98]

hey @BSS-Commerce .. i dont know, why is it not working.. but i will let it like it is with the cart drawer

but, next question.. when im in my cart, i have still this miss alignment..

may you have an idea - how to fix it only for mobile?

[BSS-Commerce]

Hey @RobArt98 ,

Can you kindly share your storefront link (with the password, if any) with me?

I think if I can see your store, it will be easier to solve the issue