Shopify themes, liquid, logos, and UX
Hey, anybody who could help me, currently I am trying to create a search icon, that when clicked on expands into a search bar, in the simple theme. I currently have the following elements, in my header.liquid,I only need to tie them together with the javascript code, but I have no idea where to start:
<div class="top-bar__search">
<a class="medium-up--hide">
{% include 'icon-search' %}
</a>
{% comment %}Search Button Click{% endcomment %}
<div class="search-bar small--hide">
{% comment %}<input type="hidden" name="type" value="product">{% endcomment %}
{% comment %}Search Bar{% endcomment %}
<input type="search" name="q" class="search-bar__input" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">
{% comment %}Search Icon{% endcomment %}
<button type="submit" class="search-bar__submit">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</div>
</div>
</div>
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024