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 %}
Related
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 }}
One of the Collections on the Shopify theme that I'm editing uses the settings: Products must match - Variant's Title contains Red
How would I go about tweaking the collection-loop.liquid template (or other snippets?) to have this collection use the relevant variant product images associated with Red as the thumbnails, without messing up the other collections?
A: Make an alternate template and apply it to the collection(s) in question
Shopify allows you to make multiple templates for each of the main types of pages and set which one you want to use in the admin.
Step 1: Open the theme editor for your live theme
Go to [your-shopify-store].myshopify.com/admin/themes
The top half of the admin screen should be a showcase of your live theme. Click 'Actions' (right above the main preview) and select 'Edit HTML/CSS'
Step 2: Create your 'red' template
In the folder list on the left-hand side of the editor, open the 'Templates' folder and click 'New Template'
Select 'Collection' as the type and give it a name that makes sense.
Step 3: Make any desired updates to the file to show off your redness.
Eg: Where images are being displayed, first loop through the variants on the product and get the image of the first variant with 'red' as an option value.
Depending on how your theme is set up, you may need to edit and/or duplicate-and-change one or more snippets. You can find which one(s) by following the 'include' and 'section' tags. The 'include' tag points to files in the 'snippets' folder, and the 'section' tag points to files in the 'sections' folder.
For drastic changes, I would recommend creating new snippets and including those in your alternate template instead. For minor changes, though, you can find out if you're on an alternate template through the liquid variable template.suffix
For example, you could loop through variants to find one where variant.title contains template.suffix - then you could make collections.blue, collections.green, etc. and not need to make further edits to the snippet.
Step 4: Preview your alternate template to make sure it does what you want
If your collection is called 'shirts' and your alternate template is simply called 'red', you would preview your template as: /collections/shirts?view=red - the view=red part is what tells Shopify to load the alternate template.
Step 5: Repeat steps 3 & 4 until you're happy with the results.
Step 6: Apply the new collection template to the collection(s) you want to default to this cool (hot?) new style.
In the Shopify admin, select (from the left-hand navigation) 'Products' then 'Collections'
Select the collection you want to apply the template to
Now that you have at least 1 alternate template, a template selector should now be visible in the right-hand column.
Change the template from the default to your new one, click save, kick back and relax!
Finding an appropriate image to show
This part will vary in complexity depending on how your products are set up. I am going to assume that there is an option on each product named 'Color', but that 'Color' can be any of the three option columns on the product (ie, that we can't assume that the first option will always be the colour option)
Step 1: Make a new snippet to contain the image-finding logic (it keeps our code clean and reusable)
In the theme editor, make sure the 'Snippets' folder is expanded in the right-hand pane
Click the 'Add new snippet' link
Give the file a meaningful name (such as 'find-color-image')
Step 2: In your alternate collection template, find your product loop and include the new snippet
First, find the product loop. It should look something like {% for product in collection.products %}
Immediately after the above line, add {% include 'find-color-image', color: template.suffix, product:product %}(assuming that your template name matches the colour you are looking for - otherwise, change template.suffix to the colour you want (wrapped in quotes), such as 'red')
Step 3: Build the find-color-image snippet. The following code should do what you're looking for.
{% comment %} find-color-image.liquid: Given a product and a colour,
set a variable named color_image as the first variant image that matches the specified colour {% endcomment %}
{% comment %} Clear any leftover variables from previous includes {% endcomment %}
{% assign color_image = nil %}
{% comment %} Loop through the variants to find one matching our colour {% endcomment %}
{% for variant in product.variants %}
{% comment %} We don't care about any variants without a featured image - skip those using continue {% endcomment %}
{% unless variant.featured_image %}{% continue %}{% endunless %}
{% comment %}Make sure the comparison is case-insensitive. The variable named color is expected to be passed when this snippet is included {% endcomment %}
{% assign opt1 = variant.option1 | downcase %}
{% assign opt2 = variant.option2 | downcase %}
{% assign opt3 = variant.option3 | downcase %}
{% assign target_color = color | downcase %}
{% comment %} Check to see if one of the above options matches our target colour {% endcomment %}
{% if opt1 == target_color or opt2 == target_color or opt3 == target_color %}
{% assign color_image = variant.featured_image %}
{% break %}
{% endfor %}
{% endfor %}
Step 4: Update image links in your collection template
Change references to the product's image to the color_image variable set in the above snippet.
Hope this helps!
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>
We have a primary collection of t-shirts for the product type of clothing (product type is just in case, so, nobody would bring it up).
And all of them are also in a few other collections like "linen t-shirts", "silk t-shirts" etc.
Let's say i'm on the page of t-shirts collections, and I need to display a list of all the secondary collections like linen, silk and so on. How do I do that?
What I've got so far, is I can get a list of collections for each individual product with following code. Further, I'd pull them and sort with js. But I was really hoping for an easier way to get the list.
Here's the liquid code I'm using for each product's collection list:
{% for product in collection.products %}
{% for collection in product.collections %}
<div>{{collection.title}}</div>
{% endfor %}
{% endfor %}
p.s.
variants are not an option neither
On collection page, fetch all the collections. If your current collection handle is t-shirt and your sub collection handle is linen-t-shirt. Check for all the collections which contains current collection handle, then show the details.
{% assign currentCol = collection.handle %}
{% for collection in collections %}
{% if collection.handle contains currentCol %}
{{ collection.title }}
// further code
{% endif %}
{% endfor %}
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