Hover effect to another logo image in the store header

Hover effect to another logo image in the store header

stussieberg
Tourist
7 0 1

Hi, I'd like to know the code and the section where I can place both, static logo pic link and animated logo gif link when we hover on it. The theme I'm currently using is the "Refresh" one. Thanks in advance!

Click to expand...
 
Replies 4 (4)

zack_dev
Shopify Partner
92 15 15

hi 

you can check the code on section > header.liquid  and search for logo text that might forward you to where logo is placed . header.liquid can be under different name for some themes but it will help you get started where to look for.



- Helpful? Like or Accept solution, - Buy me Coffee


-

Contact me

stussieberg
Tourist
7 0 1

Thanks for the reply! I found the right place (I guess) and the hover effect still doesn't work. May you see what am I doing wrong? I'm pasting here all my <header> tag.

<header class="header header--{{ section.settings.logo_position }} header--mobile-{{ section.settings.mobile_logo_position }} page-width{% if section.settings.menu_type_desktop == 'drawer' %} drawer-menu{% endif %}{% if section.settings.menu != blank %} header--has-menu{% endif %}{% if has_app_block %} header--has-app{% endif %}{% if social_links %} header--has-social{% endif %}{% if shop.customer_accounts_enabled %} header--has-account{% endif %}{% if localization_forms %} header--has-localizations{% endif %}">
    {%- liquid
      if section.settings.menu != blank
        render 'header-drawer'
      endif

      if section.settings.logo_position == 'top-center' or section.settings.menu == blank
        render 'header-search', input_id: 'Search-In-Modal-1'
      endif
    -%}

    {%- if section.settings.logo_position != 'middle-center' -%}
      {%- if request.page_type == 'index' -%}
        <h1 class="header__heading">
      {%- endif -%}
          <a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">
            {%- if settings.logo != blank -%}
              <div class="header__heading-logo-wrapper">
                {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
                {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
                {% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %}
                {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
                {{ settings.logo | image_url: width: 600 | image_tag:
                  class: 'header__heading-logo motion-reduce',
                  widths: widths,
                  height: logo_height,
                  width: settings.logo_width,
                  alt: logo_alt,
                  sizes: sizes,
                  preload: true
                }}
              </div>
            {%- else -%}
              <span class="h2">{{ shop.name }}</span>
            {%- endif -%}
          </a>
      {%- if request.page_type == 'index' -%}
        </h1>
      {%- endif -%}
    {%- endif -%}

    {%- liquid
      if section.settings.menu != blank
        if section.settings.menu_type_desktop == 'dropdown'
          render 'header-dropdown-menu'
        elsif section.settings.menu_type_desktop != 'drawer'
          render 'header-mega-menu'
        endif
      endif
    %}

    {%- if section.settings.logo_position == 'middle-center' -%}
  {%- if request.page_type == 'index' -%}
    <h1 class="header__heading">
  {%- endif -%}
      <a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">
        {%- if settings.logo != blank -%}
          <div class="header__heading-logo-wrapper">
            {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
            {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
            {% capture sizes %}(min-width: 750px) {{ settings.logo_width }}px, 50vw{% endcapture %}
            {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
            {{ settings.logo | image_url: width: 600 | image_tag:
              class: 'header__heading-logo',
              widths: widths,
              height: logo_height,
              width: settings.logo_width,
              alt: logo_alt,
              sizes: sizes,
              preload: true
            }}
          </div>
        {%- else -%}
          <span class="h2">{{ shop.name }}</span>
        {%- endif -%}
      </a>
      <a href="{{ routes.root_url }}" class="site-header__logo-link">
        <img src="{{ 'holydazestatic.png' | asset_url }}" alt="{{ shop.name }}" class="site-header__logo-image">
        <img src="{{ 'holydazegif.gif' | asset_url }}" alt="{{ shop.name }}" class="site-header__logo-hover">
      </a>
  {%- if request.page_type == 'index' -%}
    </h1>
  {%- endif -%}
{%- endif -%}

    <div class="header__icons{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header__icons--localization header-localization{% endif %}">
      <div class="desktop-localization-wrapper">
        {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
          <noscript class="small-hide medium-hide">
            {%- form 'localization', id: 'HeaderCountryMobileFormNoScript', class: 'localization-form' -%}
              <div class="localization-form__select">
                <h2 class="visually-hidden" id="HeaderCountryMobileLabelNoScript">{{ 'localization.country_label' | t }}</h2>
                <select class="localization-selector link" name="country_code" aria-labelledby="HeaderCountryMobileLabelNoScript">
                  {%- for country in localization.available_countries -%}
                    <option value="{{ country.iso_code }}" {%- if country.iso_code == localization.country.iso_code %} selected{% endif %}>
                      {{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
              <button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
            {%- endform -%}
          </noscript>

          <localization-form class="small-hide medium-hide no-js-hidden" data-prevent-hide>
            {%- form 'localization', id: 'HeaderCountryForm', class: 'localization-form' -%}
              <div>
                <h2 class="visually-hidden" id="HeaderCountryLabel">{{ 'localization.country_label' | t }}</h2>
                {%- render 'country-localization', localPosition: 'HeaderCountry' -%}
              </div>
            {%- endform -%}
          </localization-form>
        {% endif %}

        {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
          <noscript class="small-hide medium-hide">
            {%- form 'localization', id: 'HeaderLanguageMobileFormNoScript', class: 'localization-form' -%}
              <div class="localization-form__select">
                <h2 class="visually-hidden" id="HeaderLanguageMobileLabelNoScript">{{ 'localization.language_label' | t }}</h2>
                <select class="localization-selector link" name="locale_code" aria-labelledby="HeaderLanguageMobileLabelNoScript">
                  {%- for language in localization.available_languages -%}
                    <option value="{{ language.iso_code }}" lang="{{ language.iso_code }}" {%- if language.iso_code == localization.language.iso_code %} selected{% endif %}>
                      {{ language.endonym_name | capitalize }}
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
              <button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
            {%- endform -%}
          </noscript>

          <localization-form class="small-hide medium-hide no-js-hidden" data-prevent-hide>
            {%- form 'localization', id: 'HeaderLanguageForm', class: 'localization-form' -%}
              <div>
                <h2 class="visually-hidden" id="HeaderLanguageLabel">{{ 'localization.language_label' | t }}</h2>
                {%- render 'language-localization', localPosition: 'HeaderLanguage' -%}
              </div>
            {%- endform -%}
          </localization-form>
        {%- endif -%}
      </div>
      {% render 'header-search', input_id: 'Search-In-Modal' %}

      {%- if shop.customer_accounts_enabled -%}
        <a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}" class="header__icon header__icon--account link focus-inset{% if section.settings.menu != blank %} small-hide{% endif %}">
          {% render 'icon-account' %}
          <span class="visually-hidden">
            {%- liquid
              if customer
                echo 'customer.account_fallback' | t
              else
                echo 'customer.log_in' | t
              endif
            -%}
          </span>
        </a>
      {%- endif -%}

      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when '@app' -%}
            {% render block %}
        {%- endcase -%}
      {%- endfor -%}

      <a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
        {%- liquid
          if cart == empty
            render 'icon-cart-empty'
          else
            render 'icon-cart'
          endif
        -%}
        <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
        {%- if cart != empty -%}
          <div class="cart-count-bubble">
            {%- if cart.item_count < 100 -%}
              <span aria-hidden="true">{{ cart.item_count }}</span>
            {%- endif -%}
            <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
          </div>
        {%- endif -%}
      </a>
    </div>
  </header>

 
Would be a great help. Cheers!

stussieberg
Tourist
7 0 1

PS. I only added this part into the original one:

 <a href="{{ routes.root_url }}" class="site-header__logo-link">
        <img src="{{ 'holydazestatic.png' | asset_url }}" alt="{{ shop.name }}" class="site-header__logo-image">
        <img src="{{ 'holydazegif.gif' | asset_url }}" alt="{{ shop.name }}" class="site-header__logo-hover">
      </a>

 

 

 

zack_dev
Shopify Partner
92 15 15

Hi ,

your code looks ok check on page load if this shows the image element  if not  check if you placed in code below {%- if section.settings.logo_position != 'middle-center' -%}  or below {%- if section.settings.logo_position == 'middle-center' -%}  as there are 2 positions for logo on your code .



- Helpful? Like or Accept solution, - Buy me Coffee


-

Contact me