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.

<style>
@media only screen and (max-width: 600px) {
    .site-header__mobile-nav {
        display: block!important;
    }    
    .site-header .grid--table>.grid__item {
        display: block!important;
        padding: unset!important;
    }    
    .site-header .site-header__icons-wrapper {
        display: block!important;
        text-align: center!important;
    }
    .cart-popup-wrapper{
        top: 0!important;
    }   
    .site-header .site-header__logo {
        padding: 0px!important;
    }

    .site-header h1.h2.site-header__logo {
        margin-bottom: 0px!important;
    }
    .site-header .site-header__icons {
        top: -22px;
    }
}
</style>

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 "</head>"

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]

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

 

[theycallmemakka]

Is this for mobile or desktop? Or both?

[kristibajr]

Both but a little less on the mobile

[theycallmemakka · Accepted solution]

Hi @kristibajr ,

Please replace the previous code with the below code to reduce the size of header. I have merged both css in this new code. so, replace the whole code.

<style>
@media only screen and (min-width: 600px) { 
    .main-content {
        padding-top: 32px!important;
    }
    #AccessibleNav{
        display: none!important;
    }
}
@media only screen and (max-width: 600px) {
    .site-header__mobile-nav {
        display: block!important;
    }    
    .site-header .grid--table>.grid__item {
        display: block!important;
        padding: unset!important;
    }    
    .site-header .site-header__icons-wrapper {
        display: block!important;
        text-align: center!important;
    }
    .cart-popup-wrapper{
        top: 0!important;
    }   
    .site-header .site-header__logo {
        padding: 0px!important;
    }

    .site-header h1.h2.site-header__logo {
        margin-bottom: 0px!important;
    }
    .site-header .site-header__icons {
        top: -22px;
    }
    .main-content {
        padding-top: 10px!important;
    }
}
</style>

 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 :

<a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
{% include 'icon-cart' %}
<span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
<div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble>
<span data-cart-count>{{ cart.item_count }}</span>
<span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
</div>
</a>

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 "</head>"

Step 4: Save the change

If you are still confused, please let me know.