What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Header Adjustments for a Jewellery Shopify Store

Solved

Header Adjustments for a Jewellery Shopify Store

middlebeats
Shopify Partner
19 0 6
Hi,

I'm using the Monaco theme for a Shopify store. Could anyone please assist with the following adjustments?

  1. Remove the digit zero from next to the cart (bag) icon.
  2. Ensure that no words (e.g., "search") appear next to the icons in the computer view, keeping the icons only.
  3. Center the logo in the mobile view.
  4. Change the color of the header background, header text, and header icons.

Shopify Store: https://www.fatatjewellery.com
Password: fatat

Thank you!

Accepted Solution (1)
Sweans
Shopify Partner
428 88 126

This is an accepted solution.

Hi @middlebeats ,

1. Ensure that no words (e.g., "search") appear next to the icons in the computer view, keeping the icons only.

Sweans: Could you please edit the header.liquid file and search for the text "Search" or the class name "header__icon-name". If you do not want the text, you can remove it from the code.

 

2. Center the logo in the mobile view.

Sweans: For this, you have to add the media query css. Edit the theme.css and check whether is already added any css code under the mobile resolution. If not, you can add the below code.

 

@media only screen and ( max-width: 500px) {
    .header > .header__heading, 
    .header > .header__heading-link {
      margin-left: 20%;
 }
}

 

3. Change the color of the header background, header text, and header icons.

Sweans: Please check the theme settings and you can see the option to change the header background color.

If you can't see the option, please share the theme settings screenshots. So we can check it and find out the settings.

Otherwise, you can add the below code in your theme.css above the @media query css.

 

.header {
  background-color: #000 !important;
}

 

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

 

Regards,

Sweans

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

View solution in original post

Replies 5 (5)

Sweans
Shopify Partner
428 88 126

Hi @middlebeats ,

We have checked your store and requirements.

Remove the digit zero from next to the cart (bag) icon.

Ensure that no words (e.g., "search") appear next to the icons in the computer view, keeping the icons only.

Center the logo in the mobile view.

Change the color of the header background, header text, and header icons.

These can be done from the code level. It would be great if you could direct message us and give the store access. So we can make these adjustments in the store.

 

I hope this helps! If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!


Regards,

Sweans

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

middlebeats
Shopify Partner
19 0 6

Hi @Sweans,

Thank you for checking the store and the detailed feedback.

I am familiar with coding and have fixed some issues before. I just need guidance on the specific codes or instructions to:

  1. Ensure that no words (e.g., "search") appear next to the icons in the computer view, keeping the icons only.
  2. Center the logo in the mobile view.
  3. Change the color of the header background, header text, and header icons.
Sweans
Shopify Partner
428 88 126

This is an accepted solution.

Hi @middlebeats ,

1. Ensure that no words (e.g., "search") appear next to the icons in the computer view, keeping the icons only.

Sweans: Could you please edit the header.liquid file and search for the text "Search" or the class name "header__icon-name". If you do not want the text, you can remove it from the code.

 

2. Center the logo in the mobile view.

Sweans: For this, you have to add the media query css. Edit the theme.css and check whether is already added any css code under the mobile resolution. If not, you can add the below code.

 

@media only screen and ( max-width: 500px) {
    .header > .header__heading, 
    .header > .header__heading-link {
      margin-left: 20%;
 }
}

 

3. Change the color of the header background, header text, and header icons.

Sweans: Please check the theme settings and you can see the option to change the header background color.

If you can't see the option, please share the theme settings screenshots. So we can check it and find out the settings.

Otherwise, you can add the below code in your theme.css above the @media query css.

 

.header {
  background-color: #000 !important;
}

 

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

 

Regards,

Sweans

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

middlebeats
Shopify Partner
19 0 6

Screenshot 2024-08-06 at 4.04.01 PM.png

Thank you so much. Regarding the header, yes, I have the color settings, but if I can't change the color for only the header background or header text, it forces me to change many other things with it. That's why I need to do it by coding. Now, I need to make the header text and icons white

Sweans
Shopify Partner
428 88 126

Hi @middlebeats ,

 

Can you please add the below code in your theme.css above the @media query css. So only the header section will be black background color. You can change the icons and other text color to white from the theme settings.

 

 

.header {

  background-color: #000 !important;

}

 

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

 

Regards,

Sweans

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com