Changing shopify labels in theme

0
votes

I'm quite new to Shopify themes and I'm needing to change the label for the Shopify "Product Size" & "Color" in the theme i'm using but i'm confused by the loop where i change it.

This is the code which im closest to

    {% form 'product', product, class:form_classes, novalidate: 'novalidate' %}
  {% unless product.has_only_default_variant %}
    {% for option in product.options_with_values %}
      <div class="selector-wrapper js product-form__item">
        <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
          {{ option.name }}
        </label>
        
        {% assign optionName = option.name | downcase %}

If i change the option.name it changes both of the label names not just individual ones. I've attached a screenshot of the product page to help explain this. I assume this is a daft question for a seasoned shopify pro. Any help is really appreciated.

enter image description here

BTW the reason it's using these labels is because all stock is being imported from a third party stock management system.

1
shopify
The option.name will be whatever the option name is defined to be for that product in the Shopify admin. You could use string filters to change what gets printed - what is the logic for what needs to change? Is it to always remove a specific prefix? Change dashes to spaces? Something else? – Dave B
Hi @DaveB - the PA_COLOR needs to just be color and size needs to be size. I just need to remove the PA. This is brought in by the external stock management system, the id needs to still be pa_color but the label i literally just need to change. – redrightstudio

1 Answers

0
votes

It sounds like you will have to rely on string manipulation to convert the external names to customer-friendly ones. There are several ways to do so - the best way forward will probably depend on how consistent or varied the imported option names are.

For a full list of string manipulation functions available to you in Liquid, I will also point you towards the Shopify Liquid Reference where you will be able to find a lot more detail.

Approach 1: Simple removal filters

Use | remove to get rid of known bits that we don't want to keep. Like all filters, these can be chained together.

Example:

{{ option.name | remove: 'PA_' | remove: 'CLOTHING-' }}

Approach 2: Split on delimiter characters

The | split filter might be useful if there are lots of different prefixes that you need to remove. This command breaks the string up into an array of pieces, and we can grab the bits that we need using things like the first and last filters.

Example:

{{ option.name | split: '_' | last | split: '-' | last }}

Approach 3: Extensive manual mapping

If the values coming in for your products don't follow any regular patterns, you may be stuck in a position where you have to manually map some or all of your option names to friendly values. If you find yourself in a corner, the case statement is probably your best-of-the-bad options:

Example:

{% case option.name %}
  {% when 'PA_CLOTHING-SIZE' %}
    {% assign friendly_name = 'Size' %}
  {% when 'PA_COLOR' %}
    {% assign friendly_name = 'Color' %}

  {% default %}
    {% assign friendly_name = option.name %}

{% endcase %}
{{ friendly_name }}