How to rearrange icons in Prestige Theme header?

Store Design
,
1

Hi there!
I want to change the position of the search icon with the account icon!

needsomemore.com

Screenshot 2023-03-13 at 14.07.51.png
Screenshot 2023-03-13 at 14.07.51.png502×150 4.29 KB

2

@User27272727272

please share the password?

3

Ah sorry @oscprofessional
Password: nsm123321

4

Hello @User27272727272

It’s GemPages support team and glad to support you today.

Can you share the password?

5

Hi @GemPages
pw:nsm123321

6

@User27272727272

I would like to give you a solution to support you.

  1. Go to Online Store → Theme → Edit code.

  2. Open your assets/theme.css theme file.

  3. Add the code at the end of the file:

.Header__FlexItem.Header__FlexItem--fill  a[href="/account"]{
    margin-left: 25px;
    order: 2;
}
.Header__FlexItem.Header__FlexItem--fill  a[href="/search"]{
    order: 1;
}
.Header__FlexItem.Header__FlexItem--fill  a[href="/cart"]{
   order: 3;
}

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

1 Like
7

@User27272727272

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

a.Header__Icon.Icon-Wrapper.Icon-Wrapper--clickable:nth-child(3) {
    order: 3;
}
a.Header__Icon.Icon-Wrapper.Icon-Wrapper--clickable.hidden-phone {
    order: 2;
    display: flex;
}
a.Header__Icon.Icon-Wrapper.Icon-Wrapper--clickable:nth-child(1) {
    margin-left: 25px;
}
1 Like
8

@GemPages

It is working!
Thanks for you quick and professional help!

1 Like
9

Hi @oscprofessional Thanks for your kindness to help me out!

10

@User27272727272

I am so glad that suggestion solution can help.