Symmetry theme: Need to add store name below the logo in the header

Hi Team, I am trying to update my online Shopify store.

URL: https://visheshstudio.com/

My requirement is add a NEW logo with store name below the logo separated by the light gray horizontal lines just like we have one above MENU.

Refer to the mock up below:

Appreciate your help on this.

Looking forward to hearing from you.

Thanks,

VS

1 Like

@JHKCreate Can you please check on this and guide me on the same?

@VisheshStudio

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your header code so i will update,
I will check out the issue and provide you a solution here.

1 Like

Where do i look for header code I mean what file should i refer?

@VisheshStudio

can you please go to edit code > section > header file

1 Like

{% if template == 'gift_card' %}

{% comment %} Gift card template logo {% endcomment %}

{% if section.settings.logo != blank %}
# 
  {% capture img_size %}{{ section.settings.logo_img_width | times: 2 }}x{% endcapture %}
  

{% else %}
# {{ shop.name }}
{% endif %}

{% else %}

  {% if section.settings.announcement_show %}
  {% unless template != 'index' and section.settings.announcement_home_only %}
    
    
      {% if section.settings.announcement_link != blank %}{% endif %}
      

        {{ section.settings.announcement_text }}
      

      {% if section.settings.announcement_link != blank %}{% endif %}
    

  {% endunless %}
  {% endif %}

  

    {% capture logo_html %}
    

      
        {% if section.settings.logo != blank %}
        {% capture img_size %}{{ section.settings.logo_img_width | times: 2 }}x{% endcapture %}
        
        {% else %}
        {{ shop.name }}
        {% endif %}
      
    

    {% endcapture %}

    
      
      {{ logo_html }}
      
        ({{ cart.item_count }})
        {% render 'svg-cart' %}
      
    

    

      {% unless section.settings.logo_pos == 'below' %}
{{ logo_html }}
{% endunless %}

      
        

          

          {% if section.settings.show_social_icons %}
            {% capture icon_size %}{% if settings.soc_icons_double %}x46{% else %}x30{% endif %}{% endcapture %}
            {% render 'social-icons', icon_setting: settings.social_custom_icon, icon_size: icon_size %}
          {% endif %}
        

        
          {% if shop.customer_accounts_enabled %}
            {% if customer %}
              

                ## {{- 'layout.customer.account' | t -}}
                
                  
                  

                    - {{ 'layout.customer.my_account' | t }}
                    

                    - {{ 'layout.customer.log_out' | t }}
                    
                  

                  
                

              

            {% elsif section.settings.nav_show_reg %}
              
                ## {{- 'layout.customer.account' | t -}}
                
                  
                  

                    - {{ 'layout.customer.log_in' | t }}
                    

                    - {{ 'layout.customer.register' | t }}
                    
                  

                  
                

              

            {% else %}
              
                
{{ 'layout.customer.log_in' | t }}

              

            {% endif %}
          {% endif %}

          {% if section.settings.show_locale_selector or section.settings.show_currency_selector %}
            
              {% render 'localization', input_prefix: 'header' %}
            

          {% endif %}

          
            
              {{ 'layout.header.cart' | t }} ({{ cart.item_count }})
              {% unless section.settings.use_btn_style_cart_link %}
                {% render 'svg-cart' %}
              {% endunless %}
            
          

        

      

      {% if section.settings.logo_pos == 'below' %}{{ logo_html }}
{% endif %}

    

  

  {% assign featured_links = section.settings.nav_featured_link | split: ', ' %}
  
    

      
    

    
      

        

          {% for link in linklists[section.settings.menu_linklist].links %}
          - {{ link.title }}
                {% if link.links != blank %}
                {% render 'icon-toggle-menu' %}
                {% endif %}
            

              {% if link.links != blank %}
            
  = 2 and section.settings.nav_nested_layout contains 'columns' %} class="nav-columns nav-columns--count-{{ link.links.size }}"{% endif %}>
                {% for child_link in link.links %}
                - {{ child_link.title }}
                        {% if child_link.links != blank %}
                        {% render 'icon-toggle-menu' %}
                        {% endif %}
                

                      {% if child_link.links != blank %}
                

                        {% for child_child_link in child_link.links %}
                        - {{ child_child_link.title }}
                  
                        {% endfor %}
                
                      {% endif %}
              
                {% endfor %}
            
              {% endif %}
          
          {% endfor %}
        

        {% if section.settings.show_social_icons %}
          {% capture icon_size %}{% if settings.soc_icons_double %}x46{% else %}x30{% endif %}{% endcapture %}
          {% render 'social-icons', icon_setting: settings.social_custom_icon, icon_size: icon_size, container_class: 'mobile-social' %}
        {% endif %}

        {% if shop.customer_accounts_enabled %}
        
          {% if customer %}
            - {{ 'layout.customer.account' | t }}

            - {{ 'layout.customer.log_out' | t  }}

          {% else %}
            {% if section.settings.nav_show_reg %}
              - {{ 'layout.customer.register' | t }}

            {% endif %}
            - {{ 'layout.customer.log_in' | t }}
          {% endif %}
        

        {% endif %}
      

    

    {% if section.settings.show_locale_selector or section.settings.show_currency_selector %}
      
        {% render 'localization', input_prefix: 'header-mobile' %}
      

    {% endif %}
  

  {% if section.settings.head_not_home_only == false or template == 'index' %}

  
    

      {% for block in section.blocks %}

      

        {% if block.settings.link_url != blank %}
        
          {% endif %}

          {% if block.settings.heading != blank %}
            ###### {{ block.settings.heading | escape }}
          {% endif %}
          {% if block.settings.subheading != blank %}
            {{ block.settings.subheading | escape }}
          {% endif %}

          {% if block.settings.link_url != blank %}
        
        {% endif %}

        {% unless forloop.first %}

{% endunless %}
      

      {% endfor %}
    

  

  {% if section.settings.head_not_mob_show %}
  
    

      {% if section.settings.head_not_mob_url != blank %}
      
        {% endif %}
        {{ section.settings.head_not_mob_text | escape }}
        {% if section.settings.head_not_mob_url != blank %}
      
      {% endif %}
    

  

  {% endif %}

  {% endif %}

{% endif %}

{% schema %}
  {
    "name": "Header",
    "class": "section-header",
    "max_blocks": 3,
    "settings": [
      {
        "type": "checkbox",
        "id": "use_btn_style_cart_link",
        "label": "Show cart link as button",
        "info": "Only applies to desktop layout"
      },
      {
        "type": "checkbox",
        "id": "nav_show_reg",
        "label": "Show 'Register' account link",
        "info": "Requires customer accounts to be enabled in Settings > Checkout",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_social_icons",
        "label": "Show social icons",
        "default": true
      },
      {
        "type": "header",
        "content": "Navigation"
      },
      {
        "type": "link_list",
        "id": "menu_linklist",
        "label": "Menu",
        "default": "main-menu"
      },
      {
        "type": "select",
        "id": "nav_nested_layout",
        "label": "Nested navigation layout",
        "info": "On desktop and tablet screens",
        "default": "rows click",
        "options": [
          {
            "label": "Columns - on click",
            "value": "columns click"
          },
          {
            "label": "Columns - on hover",
            "value": "columns hover"
          },
          {
            "label": "Rows - on click",
            "value": "rows click"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "nav_autoexpand",
        "label": "Automatically expand navigation to current page",
        "info": "When using 'Rows - on click' layout",
        "default": false
      },
      {
        "type": "text",
        "id": "nav_featured_link",
        "label": "Featured link",
        "info": "Enter the title of a link to highlight it in a different color",
        "default": "Sale"
      },
      {
        "type": "header",
        "content": "Logo"
      },
      {
        "type": "image_picker",
        "id": "logo",
        "label": "Custom logo image",
        "info": "520 x 200px (recommended)"
      },
      {
        "type": "text",
        "id": "logo_img_width",
        "label": "Logo width",
        "info": "Defined in pixels. Do not add the 'px' unit.",
        "default": "300"
      },
      {
        "type": "select",
        "id": "logo_pos",
        "label": "Logo position",
        "options": [
          {
            "value": "",
            "label": "Same row as search\/cart"
          },
          {
            "value": "above",
            "label": "Above search\/cart"
          },
          {
            "value": "below",
            "label": "Below search\/cart"
          }
        ]
      },
      {
        "type": "header",
        "content": "Language Selector",
        "info": "To add a language, go to your [language settings.](/admin/settings/languages)"
      },
      {
        "type": "checkbox",
        "id": "show_locale_selector",
        "label": "Show language selector",
        "default": true
      },
      {
        "type": "header",
        "content": "Currency Selector",
        "info": "To add a currency, go to your [payment settings.](/admin/settings/payments)"
      },
      {
        "type": "checkbox",
        "id": "show_currency_selector",
        "label": "Show currency selector",
        "default": true
      },
      {
        "type": "header",
        "content": "Announcement bar"
      },
      {
        "type": "checkbox",
        "id": "announcement_show",
        "label": "Show announcement bar",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "announcement_home_only",
        "label": "Home page only",
        "default": false
      },
      {
        "type": "text",
        "id": "announcement_text",
        "label": "Text",
        "default": "Announce something here"
      },
      {
        "type": "url",
        "id": "announcement_link",
        "label": "Link"
      },
      {
        "type": "color",
        "id": "announcement_bar_col",
        "label": "Bar",
        "default": "#4a4a4a"
      },
      {
        "type": "color",
        "id": "announcement_text_col",
        "label": "Text",
        "default": "#ffffff"
      },
      {
        "type": "header",
        "content": "Store messages"
      },
      {
        "type": "paragraph",
        "content": "These are displayed under the main menu - great for promotions and notices"
      },
      {
        "type": "checkbox",
        "id": "head_not_home_only",
        "label": "Show only on home page"
      },
      {
        "type": "header",
        "content": "Mobile store message"
      },
      {
        "type": "checkbox",
        "id": "head_not_mob_show",
        "label": "Enable",
        "default": false
      },
      {
        "type": "text",
        "id": "head_not_mob_text",
        "label": "Text"
      },
      {
        "type": "url",
        "id": "head_not_mob_url",
        "label": "Link URL"
      }
    ],
    "blocks": [
      {
        "type": "message",
        "name": "Store message",
        "settings": [
          {
            "type": "text",
            "id": "heading",
            "label": "Heading"
          },
          {
            "type": "text",
            "id": "subheading",
            "label": "Subheading"
          },
          {
            "type": "url",
            "id": "link_url",
            "label": "Link URL"
          }
        ]
      }
    ]
  }
{% endschema %}

@KetanKumar Provided the header file code for your reference.

1 Like

@VisheshStudio

thanks for the code.

can you please update code


{% if template == 'gift_card' %}

{% comment %} Gift card template logo {% endcomment %}

{% if section.settings.logo != blank %}
# 
  {% capture img_size %}{{ section.settings.logo_img_width | times: 2 }}x{% endcapture %}
  

{% else %}
# {{ shop.name }}
{% endif %}

{% else %}

  {% if section.settings.announcement_show %}
  {% unless template != 'index' and section.settings.announcement_home_only %}
    
    
      {% if section.settings.announcement_link != blank %}{% endif %}
      

        {{ section.settings.announcement_text }}
      

      {% if section.settings.announcement_link != blank %}{% endif %}
    

  {% endunless %}
  {% endif %}

  

    {% capture logo_html %}
    

      
        {% if section.settings.logo != blank %}
        {% capture img_size %}{{ section.settings.logo_img_width | times: 2 }}x{% endcapture %}
        
{{ shop.name }}
        {% else %}
        {{ shop.name }}
        {% endif %}
      
    

    {% endcapture %}

    
      
      {{ logo_html }}
      
        ({{ cart.item_count }})
        {% render 'svg-cart' %}
      
    

    

      {% unless section.settings.logo_pos == 'below' %}
{{ logo_html }}
{% endunless %}

      
        

          

          {% if section.settings.show_social_icons %}
            {% capture icon_size %}{% if settings.soc_icons_double %}x46{% else %}x30{% endif %}{% endcapture %}
            {% render 'social-icons', icon_setting: settings.social_custom_icon, icon_size: icon_size %}
          {% endif %}
        

        
          {% if shop.customer_accounts_enabled %}
            {% if customer %}
              

                ## {{- 'layout.customer.account' | t -}}
                
                  
                  

                    - {{ 'layout.customer.my_account' | t }}
                    

                    - {{ 'layout.customer.log_out' | t }}
                    
                  

                  
                

              

            {% elsif section.settings.nav_show_reg %}
              
                ## {{- 'layout.customer.account' | t -}}
                
                  
                  

                    - {{ 'layout.customer.log_in' | t }}
                    

                    - {{ 'layout.customer.register' | t }}
                    
                  

                  
                

              

            {% else %}
              
                
{{ 'layout.customer.log_in' | t }}

              

            {% endif %}
          {% endif %}

          {% if section.settings.show_locale_selector or section.settings.show_currency_selector %}
            
              {% render 'localization', input_prefix: 'header' %}
            

          {% endif %}

          
            
              {{ 'layout.header.cart' | t }} ({{ cart.item_count }})
              {% unless section.settings.use_btn_style_cart_link %}
                {% render 'svg-cart' %}
              {% endunless %}
            
          

        

      

      {% if section.settings.logo_pos == 'below' %}{{ logo_html }}
{% endif %}

    

  

  {% assign featured_links = section.settings.nav_featured_link | split: ', ' %}
  
    

      
    

    
      

        

          {% for link in linklists[section.settings.menu_linklist].links %}
          - {{ link.title }}
                {% if link.links != blank %}
                {% render 'icon-toggle-menu' %}
                {% endif %}
            

              {% if link.links != blank %}
            
  = 2 and section.settings.nav_nested_layout contains 'columns' %} class="nav-columns nav-columns--count-{{ link.links.size }}"{% endif %}>
                {% for child_link in link.links %}
                - {{ child_link.title }}
                        {% if child_link.links != blank %}
                        {% render 'icon-toggle-menu' %}
                        {% endif %}
                

                      {% if child_link.links != blank %}
                

                        {% for child_child_link in child_link.links %}
                        - {{ child_child_link.title }}
                  
                        {% endfor %}
                
                      {% endif %}
              
                {% endfor %}
            
              {% endif %}
          
          {% endfor %}
        

        {% if section.settings.show_social_icons %}
          {% capture icon_size %}{% if settings.soc_icons_double %}x46{% else %}x30{% endif %}{% endcapture %}
          {% render 'social-icons', icon_setting: settings.social_custom_icon, icon_size: icon_size, container_class: 'mobile-social' %}
        {% endif %}

        {% if shop.customer_accounts_enabled %}
        
          {% if customer %}
            - {{ 'layout.customer.account' | t }}

            - {{ 'layout.customer.log_out' | t  }}

          {% else %}
            {% if section.settings.nav_show_reg %}
              - {{ 'layout.customer.register' | t }}

            {% endif %}
            - {{ 'layout.customer.log_in' | t }}
          {% endif %}
        

        {% endif %}
      

    

    {% if section.settings.show_locale_selector or section.settings.show_currency_selector %}
      
        {% render 'localization', input_prefix: 'header-mobile' %}
      

    {% endif %}
  

  {% if section.settings.head_not_home_only == false or template == 'index' %}

  
    

      {% for block in section.blocks %}

      

        {% if block.settings.link_url != blank %}
        
          {% endif %}

          {% if block.settings.heading != blank %}
            ###### {{ block.settings.heading | escape }}
          {% endif %}
          {% if block.settings.subheading != blank %}
            {{ block.settings.subheading | escape }}
          {% endif %}

          {% if block.settings.link_url != blank %}
        
        {% endif %}

        {% unless forloop.first %}

{% endunless %}
      

      {% endfor %}
    

  

  {% if section.settings.head_not_mob_show %}
  
    

      {% if section.settings.head_not_mob_url != blank %}
      
        {% endif %}
        {{ section.settings.head_not_mob_text | escape }}
        {% if section.settings.head_not_mob_url != blank %}
      
      {% endif %}
    

  

  {% endif %}

  {% endif %}

{% endif %}

{% schema %}
  {
    "name": "Header",
    "class": "section-header",
    "max_blocks": 3,
    "settings": [
      {
        "type": "checkbox",
        "id": "use_btn_style_cart_link",
        "label": "Show cart link as button",
        "info": "Only applies to desktop layout"
      },
      {
        "type": "checkbox",
        "id": "nav_show_reg",
        "label": "Show 'Register' account link",
        "info": "Requires customer accounts to be enabled in Settings > Checkout",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_social_icons",
        "label": "Show social icons",
        "default": true
      },
      {
        "type": "header",
        "content": "Navigation"
      },
      {
        "type": "link_list",
        "id": "menu_linklist",
        "label": "Menu",
        "default": "main-menu"
      },
      {
        "type": "select",
        "id": "nav_nested_layout",
        "label": "Nested navigation layout",
        "info": "On desktop and tablet screens",
        "default": "rows click",
        "options": [
          {
            "label": "Columns - on click",
            "value": "columns click"
          },
          {
            "label": "Columns - on hover",
            "value": "columns hover"
          },
          {
            "label": "Rows - on click",
            "value": "rows click"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "nav_autoexpand",
        "label": "Automatically expand navigation to current page",
        "info": "When using 'Rows - on click' layout",
        "default": false
      },
      {
        "type": "text",
        "id": "nav_featured_link",
        "label": "Featured link",
        "info": "Enter the title of a link to highlight it in a different color",
        "default": "Sale"
      },
      {
        "type": "header",
        "content": "Logo"
      },
      {
        "type": "image_picker",
        "id": "logo",
        "label": "Custom logo image",
        "info": "520 x 200px (recommended)"
      },
      {
        "type": "text",
        "id": "logo_img_width",
        "label": "Logo width",
        "info": "Defined in pixels. Do not add the 'px' unit.",
        "default": "300"
      },
      {
        "type": "select",
        "id": "logo_pos",
        "label": "Logo position",
        "options": [
          {
            "value": "",
            "label": "Same row as search\/cart"
          },
          {
            "value": "above",
            "label": "Above search\/cart"
          },
          {
            "value": "below",
            "label": "Below search\/cart"
          }
        ]
      },
      {
        "type": "header",
        "content": "Language Selector",
        "info": "To add a language, go to your [language settings.](/admin/settings/languages)"
      },
      {
        "type": "checkbox",
        "id": "show_locale_selector",
        "label": "Show language selector",
        "default": true
      },
      {
        "type": "header",
        "content": "Currency Selector",
        "info": "To add a currency, go to your [payment settings.](/admin/settings/payments)"
      },
      {
        "type": "checkbox",
        "id": "show_currency_selector",
        "label": "Show currency selector",
        "default": true
      },
      {
        "type": "header",
        "content": "Announcement bar"
      },
      {
        "type": "checkbox",
        "id": "announcement_show",
        "label": "Show announcement bar",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "announcement_home_only",
        "label": "Home page only",
        "default": false
      },
      {
        "type": "text",
        "id": "announcement_text",
        "label": "Text",
        "default": "Announce something here"
      },
      {
        "type": "url",
        "id": "announcement_link",
        "label": "Link"
      },
      {
        "type": "color",
        "id": "announcement_bar_col",
        "label": "Bar",
        "default": "#4a4a4a"
      },
      {
        "type": "color",
        "id": "announcement_text_col",
        "label": "Text",
        "default": "#ffffff"
      },
      {
        "type": "header",
        "content": "Store messages"
      },
      {
        "type": "paragraph",
        "content": "These are displayed under the main menu - great for promotions and notices"
      },
      {
        "type": "checkbox",
        "id": "head_not_home_only",
        "label": "Show only on home page"
      },
      {
        "type": "header",
        "content": "Mobile store message"
      },
      {
        "type": "checkbox",
        "id": "head_not_mob_show",
        "label": "Enable",
        "default": false
      },
      {
        "type": "text",
        "id": "head_not_mob_text",
        "label": "Text"
      },
      {
        "type": "url",
        "id": "head_not_mob_url",
        "label": "Link URL"
      }
    ],
    "blocks": [
      {
        "type": "message",
        "name": "Store message",
        "settings": [
          {
            "type": "text",
            "id": "heading",
            "label": "Heading"
          },
          {
            "type": "text",
            "id": "subheading",
            "label": "Subheading"
          },
          {
            "type": "url",
            "id": "link_url",
            "label": "Link URL"
          }
        ]
      }
    ]
  }
{% endschema %}
1 Like

@KetanKumar Could you please share what specific change did you make in the code? I would like to understand for my development interest. Thanks!

1 Like

@VisheshStudio

yes, sure i have added this code see attachment

1 Like

Thanks for sharing this @KetanKumar

I have updated the header code.

Now the shop name is showing next to logo. I want it to be below logo. Can you please guide me?

FYR @KetanKumar

1 Like

@VisheshStudio

yes, sure but i think you have fixed this issue

1 Like

Hi @KetanKumar , yes, I was trying to find out how can I have a new line character in place. Then I added a
tag in the code you provided.

Refer to the attachment.

Let me know if this is the right way or not. If not, then please share the solution.

Thanks in advance!

Looking forward to hear from you.

@VisheshStudio

Yes, fine doesn’t any issue if you have use this code it’s working fine

Thanks for update

1 Like

Thanks @KetanKumar for the help and guidance! Appreciate it!

1 Like

@VisheshStudio

it’s my pleasure to help us

1 Like