Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Cart Word in the icon on cart drawer (Focal Theme)

Solved

Cart Word in the icon on cart drawer (Focal Theme)

MS-Ecom2024
Excursionist
33 1 9

Can someone fix that quick? 

Bildschirmfoto 2024-01-08 um 15.49.20.png

Its just on mobile view / desktop view is fine.

 

Thanks! 

 

Accepted Solutions (2)

Made4uo-Ribe
Shopify Partner
9094 2173 2683

This is an accepted solution.

Hi @MS-Ecom2024 

It seems like you add some code. To move the bag icon to the right. 

Made4uoRibe_0-1704727123120.png

This is overide code, to take this one you need to find the code in the theme.liquid. But if cant find it you can try this code below. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media screen and (max-width: 767px){
p.drawer__title.heading.h6 {
    gap: 15px;
}
}

 

If its not working add some !important;

 

@media screen and (max-width: 767px){
p.drawer__title.heading.h6 {
    gap: 15px !important;
}
}

 

And save. 

Made4uoRibe_1-1704727275554.png

The disadvantage of the code I give is you have more space on the left on your icon bag. 

Made4uoRibe_2-1704727333830.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Moeed
Shopify Partner
6335 1718 2073

This is an accepted solution.

Hey @MS-Ecom2024 

 

Update your code with this and it should be good then!

.header svg.icon.icon--header-cart {
    left: 15px !important;
    position: relative;
}

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


View solution in original post

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
9094 2173 2683

This is an accepted solution.

Hi @MS-Ecom2024 

It seems like you add some code. To move the bag icon to the right. 

Made4uoRibe_0-1704727123120.png

This is overide code, to take this one you need to find the code in the theme.liquid. But if cant find it you can try this code below. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media screen and (max-width: 767px){
p.drawer__title.heading.h6 {
    gap: 15px;
}
}

 

If its not working add some !important;

 

@media screen and (max-width: 767px){
p.drawer__title.heading.h6 {
    gap: 15px !important;
}
}

 

And save. 

Made4uoRibe_1-1704727275554.png

The disadvantage of the code I give is you have more space on the left on your icon bag. 

Made4uoRibe_2-1704727333830.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
MS-Ecom2024
Excursionist
33 1 9

Hey the code was made for the desktop version because of an word we added. Unfortunately this problem is just for the cart drawer, not the normal front page. Will this code still solve the problem if the adjustment you've send should just be on cart drawer not in general? 

Moeed
Shopify Partner
6335 1718 2073

This is an accepted solution.

Hey @MS-Ecom2024 

 

Update your code with this and it should be good then!

.header svg.icon.icon--header-cart {
    left: 15px !important;
    position: relative;
}

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


Made4uo-Ribe
Shopify Partner
9094 2173 2683

Yes, this is only in the drawer cart the code said p.drawer. its the selector ive used in your cart drawer. Seems like you didnt atleast try my code. Thanks anyway. 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
MS-Ecom2024
Excursionist
33 1 9

Hey, I had bad experiences with a few codes, thats why I ask to be save. Anyway it's also the right code. : )