Change of search bar in dawn theme

[Anonymous]

Hello,

How can i make my search bar like this 

Thanks

[Shadab_dev]

Mostly with css modifications in your theme code you can achieve this layout. You can try this from the customizer but for some  stuffs you might need to edit code 

[Anonymous]

Hello,

How can i do that by edit code

[Shadab_dev]

There are two options here. Either you can give me collaborator access to your store and I can do it for you.

Or you can share your store url and will try updating you with the code.

[Anonymous]

Hello,
I can give you collaboration access and please share with what you have done

[MooseDesk · Accepted solution]

Hi, @Anonymous 

Thanks for reaching out to the community. We are MooseDesk, a comprehensive Live Chat, FAQ & Helpdesk App designed to elevate your customer support experience.

1. Access the Theme Editor

• Log in to your Shopify account
• Select "Online Store" > "Themes"
• Click the "Customize" button on your current theme
  

2. Add Custom CSS

• In the Theme Editor, select "Theme settings"
• Scroll down and find the "Custom CSS" or "Additional CSS" section
• Add your CSS code in the text box
  

3. Find Classes and IDs

Before writing your CSS, it's crucial to identify the correct classes and IDs of the elements you want to modify:

• Open your Shopify store in a web browser
• Right-click on the element you want to customize and select "Inspect" or press F12 to open Developer Tools
• In the HTML panel, locate the element and note its classes and IDs
• You can also use the element selector tool (usually an icon with a cursor pointing at a box) to click directly on page elements
• Look for classes like header, product-title, or search-bar, depending on what you're customizing
• Note that class names may vary depending on your theme

4. Write CSS Code

Now that you have the correct classes and IDs, you can write your CSS. For example:

/* Change the background color of the header */
.header {
background-color: #f0f0f0;
}

/* Customize the font for product titles */
.product-title {
font-family: 'Arial', sans-serif;
font-size: 24px;
color: #333;
}

/* Change the color of the "Add to Cart" button */
.add-to-cart-button {
background-color: #4CAF50;
color: white;
}

If this is helpful for you, please let me know by giving MooseDesk a 'LIKE'. If your question is answered please mark this as 'SOLUTION’.

If you are looking for a customer support solution to help drive more conversion to your Shopify store, I suggest exploring MooseDesk, a FREE LiveChat, FAQ & Helpdesk App that can help your support experience easier, better, faster!

With MooseDesk, you can engage with customers through omnichannel support, manage inquiries with a robust ticket system, and provide quick responses.

• Or you can let customers resolve questions faster with in-built FAQ, Order tracking module, and more.

Once again, thank you for reading. Wishing you a great day ahead!

[Anonymous]

Hello, @MooseDesk 

Can you please help me out on this also I want to set Header on a banner on homepage in dawn theme similar like on boldfit Website

Thank You.

[Anonymous]

Hello, @MooseDesk