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

RobArt98
Pathfinder
96 3 14

Hello everyone,

 

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

Bildschirmfoto 2023-11-06 um 14.47.26.png

 

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

Bildschirmfoto 2023-11-05 um 13.18.18.png

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

Replies 7 (7)

BSS-Commerce
Shopify Expert
3477 462 523

Hi @RobArt98,

You can use the following solution:

1. In Online store, select Themes -> More -> Edit code

view (25).png

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>

view (26).png

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>

view (27).png

2.3 Find the following code:

{% render 'icon-remove' %}

Replace with the following code:

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

view (28).png

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:

view (29).png

Click Save to save changes

Hope it helps @RobArt98 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

RobArt98
Pathfinder
96 3 14

@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

Bildschirmfoto 2023-11-08 um 08.17.03.png

 

How can i align "PREIS" or all other items ? 

 

Thanks in advance 🙂 

BSS-Commerce
Shopify Expert
3477 462 523

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

RobArt98
Pathfinder
96 3 14

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;
}

Bildschirmfoto 2023-11-08 um 11.04.11.png

 

 

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;
}
}

Bildschirmfoto 2023-11-08 um 11.02.03.png

 

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

 

many many many thanks in advance 🙂 

 

BSS-Commerce
Shopify Expert
3477 462 523

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  

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

RobArt98
Pathfinder
96 3 14

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?

Bildschirmfoto 2023-11-08 um 11.44.00.png

BSS-Commerce
Shopify Expert
3477 462 523

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👍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development