Hello,
Can you please help moving my search icon on debut theme from the right part of the screen to the left? As the right part of the screen is already crowded with the cart and menu icon.
It would need customization to move the search icon from right to left. You have to find code in sections/header.liquid file. Unfortunately, there is no simple solution otherwise I will be happy to help you.
I would suggest hiring a Shopify expert to assist you OR feel free to contact me.
Thanks!
Would you mind putting me through it with the steps. I really don’t mind search through thousands of codes?
1 Like
Here is the code that you have to move in header.lliquid file.
see below. Hope this helps. After moving the code you have to write some css maybe to arrange it properly.
Thanks!
Please share your website URL and password if any. I will check and provide a solution here but it will take time. I am going off for today.
Thanks!
I just sent you a private message.
Thank very much in advance
1 Like
Open your sections/header.liquid and replace with the following code ( remember to take backup first )
{% if section.settings.message %}
{% endif %}
{% include 'search-drawer' %}
{% if section.settings.message %}
{% if section.settings.home_page_only == false or request.page_type == 'index' %}
{%- unless section.settings.message_link == blank -%}
{%- endunless -%}
{{ section.settings.message_text | escape }}
{%- unless section.settings.message_link == blank -%}
{%- endunless -%}
{% endif %}
{% endif %}
{% if section.settings.align_logo == 'center' %}
{% endif %}
{% if request.page_type == 'index' %}
{% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %}
{% endif %}
{% schema %}
{
"name": {
"cs": "Záhlaví",
"da": "Overskrift",
"de": "Titel",
"en": "Header",
"es": "Encabezado",
"fi": "Ylätunniste",
"fr": "En-tête",
"it": "Header",
"ja": "ヘッダー",
"ko": "헤더",
"nb": "Header",
"nl": "Koptekst",
"pl": "Nagłówek",
"pt-BR": "Cabeçalho",
"pt-PT": "Cabeçalho",
"sv": "Rubrik",
"th": "ส่วนหัว",
"tr": "Üstbilgi",
"vi": "Đầu trang",
"zh-CN": "标头",
"zh-TW": "標頭"
},
"settings": [
{
"type": "radio",
"id": "align_logo",
"label": {
"cs": "Zarovnání loga",
"da": "Logojustering",
"de": "Logo-Ausrichtung",
"en": "Logo alignment",
"es": "Alineación de logo",
"fi": "Logon tasaus",
"fr": "Alignement du logo",
"it": "Allineamento logo",
"ja": "ロゴアラインメント",
"ko": "로고 정렬",
"nb": "Logojustering",
"nl": "Logo-uitlijning",
"pl": "Wyrównanie logo",
"pt-BR": "Alinhamento do logotipo",
"pt-PT": "Alinhamento do logótipo",
"sv": "Logojustering",
"th": "การจัดวางโลโก้",
"tr": "Logo hizalaması",
"vi": "Căn chỉnh logo",
"zh-CN": "logo 对齐方式",
"zh-TW": "商標對齊"
},
"default": "left",
"options": [
{
"value": "left",
"label": {
"cs": "Doleva",
"da": "Venstre",
"de": "Links",
"en": "Left",
"es": "Izquierda",
"fi": "Vasen",
"fr": "Gauche",
"it": "Sinistra",
"ja": "左",
"ko": "왼쪽",
"nb": "Venstre",
"nl": "Links",
"pl": "Do lewej",
"pt-BR": "Esquerda",
"pt-PT": "Esquerda",
"sv": "Vänster",
"th": "ด้านซ้าย",
"tr": "Sol",
"vi": "Bên trái",
"zh-CN": "左侧",
"zh-TW": "左方"
}
},
{
"value": "center",
"label": {
"cs": "Na střed",
"da": "Centreret",
"de": "Mittig",
"en": "Centered",
"es": "Centrada",
"fi": "Keskitetty",
"fr": "Centré",
"it": "Centrato",
"ja": "中央揃え",
"ko": "센터 맞추기",
"nb": "Sentrert",
"nl": "Gecentreerd",
"pl": "Wyśrodkowane",
"pt-BR": "Centralizado",
"pt-PT": "Centrado",
"sv": "Centrera",
"th": "ตรงกลาง",
"tr": "Orta",
"vi": "Giữa",
"zh-CN": "居中",
"zh-TW": "置中"
}
}
]
},
{
"type": "image_picker",
"id": "logo",
"label": {
"cs": "Obrázek loga",
"da": "Logobillede",
"de": "Logo-Foto",
"en": "Logo image",
"es": "Logo",
"fi": "Logokuva",
"fr": "Image du logo",
"it": "Immagine del logo",
"ja": "ロゴ画像",
"ko": "로고 이미지",
"nb": "Logobilde",
"nl": "Afbeelding van logo",
"pl": "Obraz logo",
"pt-BR": "Imagem do logotipo",
"pt-PT": "Imagem do logótipo",
"sv": "Logobild",
"th": "รูปภาพโลโก้",
"tr": "Logo görseli",
"vi": "Hình ảnh logo",
"zh-CN": "logo 图片",
"zh-TW": "標誌圖片"
}
},
{
"type": "range",
"id": "logo_max_width",
"label": {
"cs": "Šířka vlastního loga",
"da": "Tilpasset logobredde",
"de": "Logobreite",
"en": "Custom logo width",
"es": "Ancho del logo personalizado",
"fi": "Mukautetun logon leveys",
"fr": "Largeur personnalisée du logo",
"it": "Larghezza logo personalizzato",
"ja": "ロゴの幅をカスタマイズする",
"ko": "사용자 지정 로고 폭",
"nb": "Tilpasset logobredde",
"nl": "Aangepaste logo-breedte",
"pl": "Niestandardowa szerokość logo",
"pt-BR": "Largura do logotipo personalizado",
"pt-PT": "Largura de logótipo personalizada",
"sv": "Anpassad logotypsbredd",
"th": "ความกว้างของโลโก้แบบกำหนดเอง",
"tr": "Özel logo genişliği",
"vi": "Chiều rộng logo tùy chỉnh",
"zh-CN": "自定义 logo 宽度",
"zh-TW": "自訂商標寬度"
},
"min": 50,
"max": 250,
"step": 5,
"unit": "px",
"default": 100
},
{
"type": "link_list",
"id": "main_linklist",
"label": {
"cs": "Nabídka",
"da": "Menu",
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fi": "Valikko",
"fr": "Menu",
"it": "Menu",
"ja": "メニュー",
"ko": "메뉴",
"nb": "Meny",
"nl": "Menu",
"pl": "Menu",
"pt-BR": "Menu",
"pt-PT": "Menu",
"sv": "Meny",
"th": "เมนู",
"tr": "Menü",
"vi": "Menu",
"zh-CN": "菜单",
"zh-TW": "選單"
},
"default": "main-menu"
},
{
"type": "header",
"content": {
"cs": "Panel oznámení",
"da": "Meddelelseslinje",
"de": "Ankündigungsbereich",
"en": "Announcement bar",
"es": "Barra de anuncios",
"fi": "Ilmoituspalkki",
"fr": "Barre d'annonces",
"it": "Barra degli annunci",
"ja": "告知バー",
"ko": "공지 표시줄",
"nb": "Kunngjøringslinje",
"nl": "Aankondigingsbalk",
"pl": "Pasek ogłoszeń",
"pt-BR": "Barra de avisos",
"pt-PT": "Barra de comunicado",
"sv": "Meddelandefält",
"th": "แถบประกาศ",
"tr": "Duyuru çubuğu",
"vi": "Thanh thông báo",
"zh-CN": "公告栏",
"zh-TW": "公告列"
}
},
{
"type": "checkbox",
"id": "message",
"label": {
"cs": "Zobrazit oznámení",
"da": "Vis meddelelse",
"de": "Ankündigung anzeigen",
"en": "Show announcement",
"es": "Mostrar anuncio",
"fi": "Näytä ilmoitus",
"fr": "Afficher l'annonce",
"it": "Mostra annuncio",
"ja": "告知を表示する",
"ko": "공지 표시",
"nb": "Vis kunngjøring",
"nl": "Aankondiging weergeven",
"pl": "Pokaż ogłoszenie",
"pt-BR": "Exibir comunicado",
"pt-PT": "Mostrar comunicado",
"sv": "Visa tillkännagivande",
"th": "แสดงประกาศ",
"tr": "Duyuruyu göster",
"vi": "Hiển thị thông báo",
"zh-CN": "显示公告",
"zh-TW": "顯示公告"
},
"default": false
},
{
"type": "checkbox",
"id": "home_page_only",
"label": {
"cs": "Jen domovská stránka",
"da": "Kun startside",
"de": "Nur Startseite",
"en": "Home page only",
"es": "Solo página de inicio",
"fi": "Vain etusivu",
"fr": "Page d'accueil uniquement",
"it": "Solo home page",
"ja": "ホームページのみ",
"ko": "홈페이지만",
"nb": "Kun på startsiden",
"nl": "Alleen homepage",
"pl": "Tylko strona główna",
"pt-BR": "Apenas na página inicial",
"pt-PT": "Apenas a página inicial",
"sv": "Endast hemsida",
"th": "หน้าแรกเท่านั้น",
"tr": "Yalnızca ana sayfa",
"vi": "Chỉ trang chủ",
"zh-CN": "仅主页",
"zh-TW": "僅限首頁"
},
"default": true
},
{
"type": "text",
"id": "message_text",
"label": {
"cs": "Text",
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"nb": "Tekst",
"nl": "Tekst",
"pl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"tr": "Metin",
"vi": "Văn bản",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": {
"cs": "Tady můžete zadat oznámení",
"da": "Meddel noget her",
"de": "Hier etwas ankündigen",
"en": "Announce something here",
"es": "Anuncia algo aquí",
"fi": "Ilmoita jotakin tässä",
"fr": "Annoncez quelque chose ici",
"it": "Annuncia qualcosa qui",
"ja": "ここで告知してください",
"ko": "여기에 공지하십시오",
"nb": "Kunngjør noe her",
"nl": "Kondig hier iets aan",
"pl": "Ogłoś coś tutaj",
"pt-BR": "Anuncie algo aqui",
"pt-PT": "Anunciar algo aqui",
"sv": "Meddela något här",
"th": "ประกาศข้อความที่นี่",
"tr": "Buraya bir duyuru ekleyin",
"vi": "Thông báo điều gì đó tại đây",
"zh-CN": "在此处进行公告",
"zh-TW": "在此公告資訊"
}
},
{
"type": "url",
"id": "message_link",
"label": {
"cs": "Odkaz",
"da": "Link",
"de": "Link",
"en": "Link",
"es": "Enlace",
"fi": "Linkki",
"fr": "Lien",
"it": "Link",
"ja": "リンク",
"ko": "링크",
"nb": "Kobling",
"nl": "Link",
"pl": "Link",
"pt-BR": "Link",
"pt-PT": "Ligação",
"sv": "Länk",
"th": "ลิงก์",
"tr": "Bağlantı",
"vi": "Liên kết",
"zh-CN": "链接",
"zh-TW": "連結"
},
"info": {
"cs": "Volitelné",
"da": "Valgfri",
"de": "Optional",
"en": "Optional",
"es": "Opcional",
"fi": "Valinnainen",
"fr": "Facultatif",
"it": "Facoltativo",
"ja": "オプション",
"ko": "선택 사항",
"nb": "Valgfritt",
"nl": "Optioneel",
"pl": "Opcjonalnie",
"pt-BR": "Opcional",
"pt-PT": "Opcional",
"sv": "Valfritt",
"th": "ไม่จำเป็น",
"tr": "İsteğe bağlı",
"vi": "Không bắt buộc",
"zh-CN": "可选",
"zh-TW": "(選填)"
}
},
{
"type": "color",
"id": "color_bg",
"label": {
"cs": "Panel",
"da": "Bjælke",
"de": "Zeile",
"en": "Bar",
"es": "Barra",
"fi": "Palkki",
"fr": "Barre",
"it": "Barra",
"ja": "バー",
"ko": "바",
"nb": "Felt",
"nl": "Balk",
"pl": "Pasek",
"pt-BR": "Barra",
"pt-PT": "Barra",
"sv": "Fält",
"th": "แถบ",
"tr": "Çubuk",
"vi": "Thanh",
"zh-CN": "栏",
"zh-TW": "橫條"
},
"default": "#3a3a3a"
},
{
"type": "color",
"id": "color_text",
"label": {
"cs": "Text",
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"nb": "Tekst",
"nl": "Tekst",
"pl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"tr": "Metin",
"vi": "Văn bản",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": "#ffffff"
}
]
}
{% endschema %}
After replacing the above header code. Please add the following CSS code at the bottom of your assets/theme.css file.
@media only screen and (max-width: 749px){
.site-header__logo {
padding-left: 0px !important;
text-align: left;
}
}
Hope this helps.
Thanks!
Thank you for the help! It worked perfectly
2 Likes