How can I separate and fix blocks section on my website?

Store Design
, , ,

Topic summary

A user is seeking help to reorganize their website header by separating elements into distinct blocks—specifically isolating the search bar and icons into their own sections.

Current Issue:

  • Header elements (search bar, category dropdown, icons) appear grouped together
  • User wants visual/structural separation between these components

Proposed Solution:

  • Extract the search bar from its current block containing the category dropdown
  • Create a separate custom block for the search element
  • Implementation requires editing the header.liquid file (Online Store > Sections > Edit Code)
  • Place the newly created block into the header.liquid template

Status: Solution provided but implementation pending. The fix involves Liquid template customization, which requires basic coding knowledge to execute properly.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

I need to divide into blocks , search separately icons also separately

Can you tell me how to fix this?

AntonysaleBK_0-1706524042247.png
AntonysaleBK_0-1706524042247.png1920×1080 361 KB

AntonysaleBK_1-1706524062618.png
AntonysaleBK_1-1706524062618.png1920×1080 360 KB

site: https://salebk.com/

2

@AntonysaleBK

First of all you need to take out the search bar from the same block in the category drop down it and once its take out make your own block and place it into your header.liquid file

Online Store > Edit Code > Sections > header.liquid

Thanks