Grid theme - how to change 'cart' to a icon, how to align the search bar with navigation

[SummerM]

Hi all,

I am using Grid theme and I am trying to fix the header so that everything is aligned smoothly.

I would like the layout to have the search icon (rather then box), a cart icon (instead of the word cart) and checkout to be all aligned on the top right.

Unsure if this is possible but I’ve been hitting my head against a wall for days.

https://gorgeous-goods-store.myshopify.com/admin

Password: piaray

[SmallTask]

Hi @SummerM ,

We should customize the code to change cart and search as icon

[BSS-Commerce]

Hi @SummerM

1. To be able to change the word “cart” to an icon, you can do it in the following way:

• Step 1: Go to Online Store => Themes => Edit code

• Step 2: Find the file “header.liquid” (here we use the Dawn theme, maybe the Grid theme has a different name. If you don’t find the file, you can contact us for support). Then, navigate to the cart:

Cart

and replace it with:

and save the file.

2. For the Checkout and Search box sections, we saw it looks like what you want. If you need to change it, please provide us with screenshots. Then, we will check it for you.

I hope that this can be useful for you.

[SummerM]

Hi BSS-Commerce,

Thanks for the help, I now have the shopping bag there but I wanted to know how I make it and the number and wishlist are all on the same line. As well as the search bar alongside them?

Very much like the attached?

[BSS-Commerce]

Hi @SummerM

1. We’ve tried the CSS code snippets on your site to fix the errors you’re having. We also edited them to be suitable for both mobile and desktop.

• Desktop:

• Mobile:

2. To change on your site, you need to follow these steps:

• Step 1: Go to Online Store => Themes => Edit code


• Step2: Find the file “theme.css”, scroll to the bottom, paste the CSS code, and save the file:

/* START BSS FIX */
/* FOR DESKTOP */
@media only screen and (min-width: 1024px) {
    .cart-count[href="/cart"] {
        display: flex;
        align-items: center;
    }
    .header-tools .aligned-right {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main-header {
        position: relative;
    }
    .header-search-input[name="q"] {
        position: absolute;
        top: -84px;
        left: -172px;
        width: 200px;
    }
}
/* FOR MOBILE */
@media only screen and (max-width: 767px) {
    .mini-cart-wrapper {
        padding-bottom: 0 !important;
    }
    .header-tools .aligned-right {
        display: flex;
        align-items: center;
    }
    .header__icon.h-wishlist-icon.wishlist-page-widget {
        margin-top: 20px;
    }
}
/* END BSS FIX */

I hope that it will work for your site.

[SummerM]

Hi BSS-Commerce,

You have been so helpful. I was hoping to make them icons on desktop as well, is this possible?

Rather than the word account and search and checkout?

[BSS-Commerce]

Hi @SummerM

We tried replacing the words “Account” and “Checkout” with the 2 icons:

But to change it on your site, you need to find the HTML in the liquid file. It’s a little difficult for us to guide you exactly on what file it is in (Online store => Themes => Edit code) since your theme is a paid theme. Usually, it will be located in the file “header.liquid”.

• You find the HTML code:

Account

• And replace the word “Account” with Icon account:

=> Here is the expected result:

• Next, find the HTML snippet:

• Replace the word “Checkout” with Icon checkout:

• Here is the expected result:

I hope the above solution can help you. If you have trouble finding the HTML of the header, please share your store access. We can edit it for you.

[BSS-Commerce]

Hi @SummerM

1. To align Icon Search to the left and the footer to be horizontal, it can’t be like Green Envy because your structure has no child elements. You need to paste the following CSS code into the file “theme.css” and save it

.header-search-form {
    position: relative;
}
.header-search-button {
    height: 40px;
    position: absolute;
    left: 160px !important;
}

@media only screen and (min-width: 1024px) {
    .upper-footer-item.footer-linklist ul {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }
}

• Here are the results:

• Icon search:

• Footer:

I hope that this can help you.

[SummerM]

Hi there,

I would like a thinner icon for the search button (like the profile and cart).

How do I do this?

And was it possible to align the cart counter with the bottom of the cart and profile?

Thanks,

Summer

[BSS-Commerce]

Hi @SummerM

Is this the result you expect?

• First, you need to find the input element in the liquid files (it’s usually in the file: “search.liquid”, “header.liquid”, …) to replace it with the button containing the smaller icon.

• Replace the tag:

to:

Then paste this CSS code at the bottom of the file: theme.css and save it:

form.header-search-form[action="/search"] {
    display: flex;
}

.cart-count[href="/cart"] {
    display: flex;
    align-items: center;
    justify-content: center;
}

I hope that it will work for you. Please let us know by giving us likes or marking it as a solution.

[SummerM]

Hi, unfortunately,

I now cannot see anything but the attention banner on my screen

[SummerM]

Hi there, I have a few things happening with my site since I made the last suggestions you did on my post.

Image 1: mobile screen shot - the search icon is to the middle of the page, can this be to the left?
Am I also able to take it thinner on both mobile and fullscreen?

Image 2: Example of the icon on home screen and the thickness of the icon in comparison to the others.

Image 3: I am really struggling with this footer. I want 3 even areas in the footer, one being the menu, one being the contact details and one being the social icons. I would love if they could be quite centered in the page. Also the white band below the footer is back!

Are you able to help me please?

[BSS-Commerce]

Hi @SummerM

We checked and found that it seems that you have changed the theme, no longer using the old theme. If you still need help from us, please let us know.

[SummerM]

Hi @BSS-Commerce , no it should still be the Grid theme?

[BSS-Commerce]

Hi @SummerM

To solve your problems, we tried the following CSS code:

@media only screen and (max-width: 768px) {
    .header-search-form {
        position: absolute;
        left: -130px;
    }
}

.header-branding {
    padding-top: 0;
    padding-bottom: 0;
}

.upper-footer {
    display: flex;
    justify-content: center;
    padding: 30px 0;
}
.upper-footer-item,
.upper-footer-item.footer-linklist,
.upper-footer-item.footer-blurb,
.upper-footer-item.footer-linklist {
    margin: 0 !important;
}

.upper-footer-item.footer-linklist > ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.upper-footer-item.footer-blurb p {
    text-align: start;
}

Please paste them at the end of the theme.css file and save it.

We hope that this can help you.

[SummerM]

Hi @BSS-Commerce ,

Unfortunately, the icon did not change and the footer is now looking like this:

For full screen it is very left based (I wanted the 3 columns based in the middle of the page.

In mobile it now looks very strange also, it was before centred and looked good.

Please help

Thanks,

Summer

[BSS-Commerce]

Hi @SummerM

To solve your problem, please go to the theme.css file, and paste the following CSS code at the end of the file:

/* start bss fix */
.upper-footer-item-count-3 .upper-footer-item {
    max-width: 20% !important;
}

.upper-footer-item.footer-blurb {
    display: flex;
    justify-content: center;
}

.subfooter__payments-cross-border {
    display: none;
}

@media only screen and (max-width: 768px) {
    .upper-footer-item.footer-blurb {
        display: flex;
        justify-content: start;
        padding-left: 30px;
    }

    .upper-footer-item {
        margin-bottom: 12px !important;
    }
}

/* end bss fix */

• Here are the results:

• On desktop:

• On mobile: we think you should set the left margin to 30px, not should center it on mobile

Please let us know by giving a like or marking it as a solution.

[SummerM]

That’s great thank you. Is there a way to change the search icon thickness?

[BSS-Commerce]

Hi @SummerM

• You need a little CSS code to make the search icon thin:

.header-search-button {
    font-weight: 400 !important;
}

• Here are the results:

• On desktop:

• On mobile:

[SummerM]

Great, is there a way to add the different spacing between the elements like yours on the footer?

Mine has merged into one list