Metaobjects: The Key to Simplifying Complex Code Management

As Shopify experts, we are always looking for ways to improve the functionality and ease of management of our clients' stores. For one of our projects, which we have been working on since 2021, we developed custom code that automated the management of washing instruction codes directly from the theme on the product page.

The challenge

Initially, we managed the logic related to washing instructions directly from the theme code. Each product has a metafield for washing_instructions, which corresponds to a combination of 5 icons and their respective washing instructions.

Within a Liquid snippet, we created a case statement to output the icons based on the metafield value. Here’s a simplified part of this snippet.

{%- case codice -%}
{%- when 'L01' -%}
  {% assign icone  = 'LAV2.svg, CAN1.svg, STI3.svg, SEC2.svg, ASC1.svg' | split:',' %}
  {% assign icon_description = "Lavaggio: lavare a mano, Non candeggiare, Stiratura: medie temperature, A secco: tutti meno tricloroetilene, Asciugatura: non asciugare in macchina" | split:',' %}
{%- when 'L02' -%}
  {% assign icone  = 'LAV2.svg, CAN1.svg, STI2.svg, SEC2.svg, ASC1.svg' | split:',' %}
  {% assign icon_description = "Lavaggio: lavare a mano, Non candeggiare, Stiratura: basse temperature, A secco: tutti meno tricloroetilene, Asciugatura: non asciugare in macchina" | split:',' %}
{%- endcase -%}
{%- render 'tabs_icons', icone: icone, icon_description: icon_description -%}

Over time, the number of washing codes increased, and the introduction of multi-language support added complexity. Maintaining this system became increasingly difficult, as we had to update the theme code every time a new washing code was added.

The solution: metaobjects

With the introduction of metaobjects in Shopify, we saw an opportunity to simplify this system. Metaobjects allow for efficient storage of structured information, improving our workflow.

Here’s how we approached the migration:

1. Metaobject Definitions: We created metaobjects for each washing icon, including the image, alt text, and translations in multiple languages using the Translate & Adapt app.

2. Washing Code Metaobject: We defined another metaobject to encapsulate the washing code, including its name and the corresponding combination of icons. This structure allows for easy updates without modifying the theme code.

3. Refactoring the Theme Code: Finally, we refactored the theme code to identify the correct washing code metaobject and display the associated icons directly on the product page. This change reduces the need for constant updates and minimizes the risk of errors.

Here’s an example of the new code used in the theme to show the value of the metaobjects on the product page. The value of the washing code used to retrieve the correct metaobject is passed to the snippet from the product page.

{% assign metaobject_lavaggio = shop.metaobjects.codice_lavaggio[codice] %}
ion: icon_description -%}
 {% for icon in metaobject_lavaggio.icone.value %}
 <li {% if forloop.first %}class="current"{% endif %}>
 <a href="#" data-link="tab{{forloop.index}}">
 {{
 icon.image.value | image_url: width: 200 | image_tag: widths: '256, 480', sizes: sizes, class: 'Icon Icona_Lavaggio', loading: 'lazy', alt: icona_alt_tag
 }} </a>
 </li>
 {% endfor %}

Conclusion

Transitioning to metaobjects for managing washing instructions has led to a more efficient, scalable, and user-friendly solution for our client. We are curious to know how other Shopify experts have utilized metaobjects in their Shopify stores. What challenges have you faced and what innovative solutions have you found? Share your experiences and ideas; we would love to discuss!