Solved

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

kristibajr
Shopify Partner
16 0 0

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

Accepted Solution (1)
theycallmemakka
Shopify Partner
1487 337 360

This is an 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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 22 (22)

theycallmemakka
Shopify Partner
1487 337 360

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

kristibajr
Shopify Partner
16 0 0

sadsociety.fr password: test

kristibajr
Shopify Partner
16 0 0

Hi, 

 

theycallmemakka
Shopify Partner
1487 337 360

Do you mean adding this icon here?

mangitma_0-1695569193847.png

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

kristibajr
Shopify Partner
16 0 0

Yes 

theycallmemakka
Shopify Partner
1487 337 360

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

kristibajr
Shopify Partner
16 0 0

just on mobile phone

theycallmemakka
Shopify Partner
1487 337 360

Hi @kristibajr ,

 

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

mangitma_0-1695570239660.png

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

kristibajr
Shopify Partner
16 0 0

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
Shopify Partner
1487 337 360

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?

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

kristibajr
Shopify Partner
16 0 0

not just decrease a little bit

 

like this it will be perfect

 

Capture d'écran 2023-09-24 181348.png

theycallmemakka
Shopify Partner
1487 337 360

Hi @kristibajr ,

 

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

mangitma_0-1695572761793.png

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

theycallmemakka
Shopify Partner
1487 337 360

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

mangitma_0-1695573744235.png

 

Step 2: Search for "theme.liquid"

mangitma_1-1695573744233.png

 

Step 3: Add the CSS above "</head>"

mangitma_2-1695573744226.png

 

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

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

kristibajr
Shopify Partner
16 0 0

It works ! thank you so much 

 

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

theycallmemakka
Shopify Partner
1487 337 360

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

kristibajr
Shopify Partner
16 0 0

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

 

 Capture d’écran 2023-09-24 185754.png

theycallmemakka
Shopify Partner
1487 337 360

Is this for mobile or desktop? Or both?

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

kristibajr
Shopify Partner
16 0 0

Both but a little less on the mobile

theycallmemakka
Shopify Partner
1487 337 360

This is an 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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

kristibajr
Shopify Partner
16 0 0

yes perfect

kristibajr
Shopify Partner
16 0 0

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
Shopify Partner
1487 337 360

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

mangitma_0-1695574193367.png

 

 

Step 2: Search for "theme.liquid"

mangitma_1-1695574193396.png

 

 

Step 3: Add the CSS above "</head>"

mangitma_2-1695574193319.png

 

Step 4: Save the change

 

If you are still confused, please let me know.

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com