Open search box window when user clicks a text link in footer (Dawn 10.0 Theme)

Solved
bet
Shopify Partner
86 4 19

open search box window.png

 

I have a link in my footer that is called "Search". When someone clicks that "Search" link, I would like it to open up the search box window just as if someone had clicked the search icon magnifying glass. Is it possible to add a hyperlink to create this effect for text links?

 

What css / html code changes are required to create this on the Shopify Dawn 10.0 theme at my website:

 

BuyExcelTemplates.com

 

Thank you.

I use Shopify to sell Digital Downloads ❤️
• Top Rated Excel Templates
• Find your perfect Spreadsheet

Accepted Solution (1)
BSS-Commerce
Shopify Expert
2851 383 404

This is an accepted solution.

<script>
      let test = document.querySelectorAll('.footer-block.grid__item ul li a')
      test.forEach(item=>{
        if(item.innerText==='search' || item.innerText==='Search'){
          item.removeAttribute('href') 
          item.setAttribute('style','cursor:pointer') 
          item.addEventListener('click', ()=>{setTimeout(()=>{document.querySelector('details-modal details summary span').click()},100)})
        }
      })
    </script>

Here you are @bet 

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

Replies 6 (6)
BSS-Commerce
Shopify Expert
2851 383 404

Hi @bet ,

 

When you create a new menu item in the menu, you need to enter a link and when you click on that menu item, the browser will switch to the link you have chosen. You cannot override that behavior. You can use the following solution:

 

1. In Shopify Admin, select Online Store -> Navigation, then select the Menu you use for Footer, here I choose Footer menu:

 

view - 2023-11-02T094106.252.png

 

2. At the Search menu item, select Edit (create a new menu item named Search if it does not exist)

 

view - 2023-11-02T094137.509.png

 

3. In the Search or paste a link input box, select Search, and click Apply changes

 

view - 2023-11-02T094329.291.png

 

4. Click Save menu to save the settings

 

view - 2023-11-02T094448.595.png

Result:

view - 2023-11-02T094451.929.png

 

 

 

Hope it helps @bet !

 

 

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

bet
Shopify Partner
86 4 19

Hello @BSS-Commerce , I really appreciate you taking the time to answer. I tested your solution and I learned something new as I didn't know that search was an built in option in the navigation settings. Your solution would normally work fine but that search link takes me to the search results page and I intentionally removed the search box from that page:(see https://www.buyexceltemplates.com/search)

So I was hoping there was a simple way to click a text link in the footer and have the search box window open up just like it does when you click the magnifying glass in the upper left of my website.

 

Thank you.

I use Shopify to sell Digital Downloads ❤️
• Top Rated Excel Templates
• Find your perfect Spreadsheet

BSS-Commerce
Shopify Expert
2851 383 404

1. Create a new menu item named Search, optional link according to my instructions above. The link doesn't matter because we'll override that menu item with the new behavior

 

2. At Themes, select More -> Edit code

 

view - 2023-11-02T140344.708.png

 

3. Click Layout -> theme.liquid, before the body tag ends, add the following code:

 

view - 2023-11-02T151011.881.png

 

Click Save

 

 

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

bet
Shopify Partner
86 4 19

@BSS-Commerce can you provide me your code solution in text format as you sent it as an image. Thanks

I use Shopify to sell Digital Downloads ❤️
• Top Rated Excel Templates
• Find your perfect Spreadsheet

BSS-Commerce
Shopify Expert
2851 383 404

This is an accepted solution.

<script>
      let test = document.querySelectorAll('.footer-block.grid__item ul li a')
      test.forEach(item=>{
        if(item.innerText==='search' || item.innerText==='Search'){
          item.removeAttribute('href') 
          item.setAttribute('style','cursor:pointer') 
          item.addEventListener('click', ()=>{setTimeout(()=>{document.querySelector('details-modal details summary span').click()},100)})
        }
      })
    </script>

Here you are @bet 

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

bet
Shopify Partner
86 4 19

Thank you @BSS-Commerce  for  your code solution!

I use Shopify to sell Digital Downloads ❤️
• Top Rated Excel Templates
• Find your perfect Spreadsheet