Solved

Add animation effect to search in header

flammagreg
Trailblazer
235 0 38

Hi guys,

 

Website: seraneeva.com

 

How can I add the same animation when a user clicks in the newsletter in the footer to the search in the header? I'd like everything to be the same, but just as "Email" turns white to match the underline in the newsletter, I'd like "Search" to turn black to match the underline in the Search tab.

Accepted Solution (1)

BSSCommerce-HDL
Shopify Expert
666 204 219

This is an accepted solution.

Hi @flammagreg
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file footer-main.liquid
Step 3: Find "right-drawer.liquid" file and inside "search-input-group" replace to this code: 

BSSCommerceHDL_0-1717895992173.png

 <label for="Search"  class="hidden-label">Search</label>
                <input
                  type="search" name="q" id="search-input" placeholder="{{ 'general.search.placeholder' | t }}"
                  class="input-group-field" aria-label="{{ 'general.search.placeholder' | t }}" autocomplete="off" autocorrect="off" spellcheck="false" ref="searchText"
                  v-model="searchQuery" @keydown.enter="onSearchSubmit"
                />
                <button type="button" aria-label="{{ 'general.search.clear' | t }}" class="search-drawer--clear icon-fallback-text standalone-icon--wrapper" v-if="searchQuery.length > 0" v-on:click="clearSearchInput">
                  <span class="fallback-text">{{ 'general.search.clear' | t }}</span>
                  {% render 'theme-icon' with icon: 'close', iconSize: 20 %}
                </button>
              </div>

Step 4: Pls insert this code to your file css: 

.search-input-group {
    position: relative;
  }
  
  .hidden-label {
    overflow: initial !important;
    clip: unset !important;
  }
  
  .search-input-group:has(input:placeholder-shown) > label
  {
    top: 0;
    left: 0;
    transform: translate(30px, 10px);
    margin-bottom: 0;
    transition: all 1s cubic-bezier(.5,0,0,1);
    color: gray !important;
  }
  
 .search-input-group input::placeholder {
   color: transparent !important; 
 }
  
 .search-input-group:has(input[type="search"]:focus) > label,
 .search-input-group:has(input[type="search"]:not(:placeholder-shown)) > label
 {
   transform: translate(0, -5px) scale(.6428571429);
   color: black !important;
 }

Here is result: 

BSSCommerceHDL_1-1717896185139.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Reply 1 (1)

BSSCommerce-HDL
Shopify Expert
666 204 219

This is an accepted solution.

Hi @flammagreg
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file footer-main.liquid
Step 3: Find "right-drawer.liquid" file and inside "search-input-group" replace to this code: 

BSSCommerceHDL_0-1717895992173.png

 <label for="Search"  class="hidden-label">Search</label>
                <input
                  type="search" name="q" id="search-input" placeholder="{{ 'general.search.placeholder' | t }}"
                  class="input-group-field" aria-label="{{ 'general.search.placeholder' | t }}" autocomplete="off" autocorrect="off" spellcheck="false" ref="searchText"
                  v-model="searchQuery" @keydown.enter="onSearchSubmit"
                />
                <button type="button" aria-label="{{ 'general.search.clear' | t }}" class="search-drawer--clear icon-fallback-text standalone-icon--wrapper" v-if="searchQuery.length > 0" v-on:click="clearSearchInput">
                  <span class="fallback-text">{{ 'general.search.clear' | t }}</span>
                  {% render 'theme-icon' with icon: 'close', iconSize: 20 %}
                </button>
              </div>

Step 4: Pls insert this code to your file css: 

.search-input-group {
    position: relative;
  }
  
  .hidden-label {
    overflow: initial !important;
    clip: unset !important;
  }
  
  .search-input-group:has(input:placeholder-shown) > label
  {
    top: 0;
    left: 0;
    transform: translate(30px, 10px);
    margin-bottom: 0;
    transition: all 1s cubic-bezier(.5,0,0,1);
    color: gray !important;
  }
  
 .search-input-group input::placeholder {
   color: transparent !important; 
 }
  
 .search-input-group:has(input[type="search"]:focus) > label,
 .search-input-group:has(input[type="search"]:not(:placeholder-shown)) > label
 {
   transform: translate(0, -5px) scale(.6428571429);
   color: black !important;
 }

Here is result: 

BSSCommerceHDL_1-1717896185139.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development