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.
BTW the reason it's using these labels is because all stock is being imported from a third party stock management system.
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 }}
Related
I'm trying to create a section inside the product page where the user chooses a color of a shirt (as well as the size)
I learned that to get separate values for variant options, I should loop through the variants and get variant.option1 for the first option and variant.option2 for the second option.
However, it's rendering each option multiple times since there's a combination (small + red, large + red, hence renders red twice, for example)
How can I render each color once? uniquely?
Also, if anyone could get me a template I could use that renders multiple variants, I'd really appreciate it. Help online is barely available for Shopify.
Use uniq
{% assign options = '' %}
{% for variant in product.variants %}
{% assign options = options | append: ',' | append: variant.option2 %}
{% endfor %}
{% assign options = options | remove_first: ',' | split: ',' | uniq %}
{% for option in options %}
{{ option }}<br/>
{% endfor %}
I am trying to create an automated Commercial Invoice within Shopify, using the Liquid template language. I have everything working, except for the IMPORT/EXPORT Harmonized Codes (HS Tariff Codes) that are stored as variant meta-fields. Whenever I try to print them out using the following code, I get blanks:
{% for line_item in line_items %}
{{ line_item.variant.metafields.global_harmonized_system_code }}
{% endfor %}
Can someone help me pull these HS Codes for each product variant and print them on the Commercial Invoice using liquid to pull the meta-field?
Global is a namespace, try :
{{ line_item.variant.metafields.global.harmonized_system_code }}
The syntax is :
{{ your_object.metafields.namespace.key }}
Your Liquid is insufficient for the task at hand.
{{ line_item.variant.metafields.global_harmonized_system_code }}
That output is not valid. It might point to a set of one or more key value pairs, so you should really iterate on that. Example:
{% for mf in line_item.variant.metafields.global %}
{% if mf | first == 'harmonized_system_code' %}
<p> {{ mf | last }} how is that for some value! </p>
{% endif %}
{% endfor %}
Something like that is more precise and will go through the variant metafields allowning you to choose which ones to print out.
I am able to get the value using this
{{ line_item.variant.metafields.harmonized_system_code.value }}
I'm currently working on a shopify site and need to create a filter on a products page. My goal is to have primer paints show up in a different section of the product collection page. What I'm having trouble with is how to filter for primers. We have a tag set up in the product page named "Primer". What I want is for the loop to check whether a product has the primer tag, and if so, display that as one of the products in the loop. I'm relatively new to Liquid, so I don't know how to combine clauses if that's possible. I've looked up the "Where" clause, but don't entirely understand how it works.
Here is the code as it stands:
<div class="{% if settings.show_collection_sidebar %}desktop-10{% else
%}desktop-12{% endif %} tablet-6 mobile-3" id="bside">
<div id="product-loop">
{% for product in collection.products %}
<div class="product {% if settings.products_per_row == '3' %}
desktop-4{% cycle ' first', '', ' last' %}
{% elsif settings.products_per_row == '4' %}
desktop-3{% cycle ' first', '', '', ' last' %}
{% endif %} tablet-half mobile-half"
id="prod-{{ product.id }}"
data-alpha="{{ product.title }}"
data-price="{{ product.price }}">
{% include 'product-listing' %}
</div>
{% endfor %}
</div>
</div>
How could I filter for the desired results? I've tried {% if product.tags contains 'Primer' %} in quite a few places, but to no avail.
Thanks for your help.
Have you considered using two collections to accomplish what you're after?
If you made a dynamic ("Smart") collection for all your primers (Let's assume the handle for the collection is 'primer'), you can access that collection at any time through Liquid:
{% assign primer_collection = collections['primer'] %}
{% for product in primer_collection.products %}
<h2>HAVE SOME {{ product.title }}!</h2>
{% endfor %}
Then, if you wanted to exclude all of your primer products from the main collection, create a collection named 'all' (or at least with the handle 'all' - the actual title doesn't strictly matter - see footnote). By default, the 'All' collection is, true to its name, every product in your store. However, if you create your own 'all' collection, you can define it to mean "Everything except certain items" - in your case, 'everything but the primer'
Having Shopify pre-filter everything for you through the collections themselves greatly reduces the headaches of trying to apply filters after-the-fact and dealing with misleading item counts, uneven pagination, etc.
Handles: At the bottom of each collection and product in your Shopify admin is the SEO settings. Editing these allows you to change what the handle for the collection/product is, and this is what Shopify uses to look up your collection/product internally
I have a string field called Industry where people will be entering in their Industries. e.g. Agriculture, Manufacturing, IT, Landscaping etc.
I would like to output this data using liquid however, I want to place it into an Web App Search form within a dropdown menu so users can search for the particular field. Therefore I would not like to add any items that are duplicates.
E.g. entries from users include: Agriculture, Manufacturing, Agriculture, IT, Landscaping, Agriculture - you can see Agriculture is used 3 times. If i use the below it will be listed 3 times:
<select>
{module_webapps id="12345" collection="industry" filter="all" template=""}
{% for item in industry.items %}
<option value="{{item.industry}}">{{item.industry}}</option>
{% endfor %}
</select>
How do I use a loop or an array to only display the industry once and hide all other duplicates?
Thanks
You can capture a string of all your items. Then use the string filter split to convert it into an array, based on a delimiter. Then use the uniq array filter to remove all the duplicates. Finally, iterate the resulting array to build your dropdown menu.
<select>
{module_webapps id="12345" collection="industry" filter="all" template=""}
{% capture items %}
{% for item in industry.items %}
{{item.industry}},
{% endfor %}
{% endcapture %}
{% for item in items | split: ',' | uniq %}
<option value="{{item}}">{{item}}</option>
{% endfor %}
</select>
I have the standard Shopify theme Minimal. Products are assigned to Collections.
Related Items on each product just show the first 4 items it finds in the related Collections. As there are many items in each collection, a lot of the time there related items are completely the same on 100s of products.
How do I edit the code to randomize the results on Related Products?
Steph's answer is better but there is also this non-javascript (and also not truly random, but I like it anyway) solution that hacks date:
{% assign relatedCollection = collections['related-products'] %}
{% assign index = 'now' | date: '%S' %}
{% assign index = index | times: relatedCollection.products.size %}
{% assign index = index | divided_by: 60 %}
{% for product in relatedCollection.products offset: index %}
...
{% endfor %}
Take a look at this article on the Shopify wiki: Recommend related products to your customers. The section "Find a relevant Collection to recommend products" provides a jQuery script for randomizing the related products shown.
You can output all products from the relevant collection and pick a limited number of products randomly using this jQuery plugin: https://github.com/carolineschnapp/jquery-pick/blob/master/jquery.pick.js
See also: Feature multiple random products on your home page
Check the below code for showing the related products using metafields -
{% if product.metafields.related_metafield != blank %}
{% assign metafieldArr = product.metafields.related_metafield.sku | split : ',' %} {% for singleMeta in metafieldArr %} {% assign prod = all_products[singleMeta] %}
{{ prod.title | escape }}
{% endfor %}
{% endif %}
Check Example - https://stellacove.com/collections/boys