What does the general object do? Like {{ 'general.search.submit' }}

dwightco
Excursionist
14 0 2

I stumbled upon this code, but I cannot figure out what "general" does? I can't seem to find any documentation as well.

        <form action="{{ routes.search_url }}" method="get" class="search-bar small--hide" role="search">
          {% comment %}<input type="hidden" name="type" value="product">{% endcomment %}
          <button type="submit" class="search-bar__submit">
            {% include 'icon-search' %}
            <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
          </button>
          <input type="search" name="q" class="search-bar__input" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">
        </form>


Even Shopify's own article uses it for search results...but it's not in the documentation.

I appreciate any help! Thank you!

0 Likes
Mircea_Piturca
Shopify Partner
1485 42 313

A long long time ago, in the dark ages of web development, SVG and font-face were not widely supported. 

{% include 'icon-search' %} is outputting an icon. Probably an SVG or a font-face icon. The element with icon__fallback-text class was displayed when the icon was not supported. It can also have an accessibility role here, telling screen readers what that button does.

{{ 'general.search.submit' | t }} is a language filter. It will output a String from your theme language files. You can read more about it here: https://shopify.dev/tutorials/develop-theme-localization-use-translation-keys

Finally—Add variant descriptions to your products
0 Likes
dwightco
Excursionist
14 0 2

Hi, thanks for the response! But it's not the answer I'm looking for.

I'm wondering about the specific "general" object...what does that do?

And why is it inside quotation marks?

Thank you!

0 Likes