How can I reposition the cart and resize the header on my ecommerce site?

[kristibajr]

Hello,

Any developer would tell me how to change the position of the cart to put it, for example under the logo in the middle and not on the right of the page?

And reduce the size of the header, I have a 250x250 logo but the borders of the header are too big it takes a lot of space.

Thank you

[theycallmemakka]

Hi @kristibajr ,

Can you provide your store’s URL? I will look into the store and let you know the solution if its quick.

Thank you

[kristibajr]

sadsociety.fr password: test

[kristibajr]

Hi,

[theycallmemakka]

Do you mean adding this icon here?

[kristibajr]

Yes

[theycallmemakka]

It will take a few time. I will look into it and get a solution.

[kristibajr]

just on mobile phone

[theycallmemakka]

Hi @kristibajr ,

Does this look good to you? Is this something you are looking for?

[kristibajr]

Logo and stars must be aligned in the middle.

And the star a little higher.

Can you explain to me how you did this and how I can change it in the future?

[theycallmemakka]

hi @kristibajr ,

This change is only on my machine. I am working on it locally.

By “And the star a little higher.” do you mean i should increase the space between logo and the star?

[kristibajr]

not just decrease a little bit

like this it will be perfect

[theycallmemakka]

Hi @kristibajr ,

Is it ok now? If yes i will provide you with the code that should be added.

[theycallmemakka]

Hi @kristibajr ,

I have written few CSS that will move the cart icon below logo. I have also positioned the cart icon on the mentioned position. Please add below codes to the theme.liquid file.

Steps to add CSS:

Step 1: Go to Online Store > Themes > Active theme > Edit

Step 2: Search for “theme.liquid”

Step 3: Add the CSS above “”

If you require further help to optimize your store or stuck while adding code to the theme, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Mangit

[kristibajr]

yes perfect

[kristibajr]

I found the code for the cart in header.liquid :

{% include 'icon-cart' %} {{ 'layout.cart.title' | t }}

{{ cart.item_count }} {{ 'layout.cart.items_count' | t: count: cart.item_count }}

but I don’t know where is the css file to modify the placement and resize the header.

[theycallmemakka]

You can just add the Code that i provided on the theme.liquid file following below steps.

Steps to add CSS:

Step 1: Go to Online Store > Themes > Active theme > Edit

Step 2: Search for “theme.liquid”

Step 3: Add the CSS above “”

Step 4: Save the change

If you are still confused, please let me know.

[kristibajr]

It works ! thank you so much

now how can I reduce the size of the header border ?

[theycallmemakka]

Do you mean reducing the size of logo? I am unaware about what header border you are refering to

[kristibajr]

Reduce a little bit this spacing between the header and the body