Metfields - Shopify - Code Snippet (trying to add product color swatch via metafield and Code Snippet) - shopify

I'm trying to display a color-swatch on the product page in which clicking on a product's color redirects to another product url. The way I've done this is set-up the metafields in Shopify Settings (picture displayed below)
[1]: https://i.stack.imgur.com/RsSCa.png
And then created a Code Snippet in the theme's code called " linkedProducts.liquid", code displayed below:
{% assign linked = product.metafields.my_fields.linked_products | split: ',' %}
{% assign linkedcolors = product.metafields.my_fields.linked_products_colors | split: ',' %}
{% assign linkednames = product.metafields.my_fields.linked_products_names | split: ',' %}
{% assign size = linked | size %}
{% assign currentHandle = product.handle %}
{% if size > 0 %}
<div class="linkedColors custom_swatch_elements">
<label class="single-option-radio__label label-color_swatches" data-label="Color">
Color
</label>
<div class="swatch clearfix" data-option-index="1">
{% for i in (1..size) %}
{% assign index = i | minus:1 %}
{% assign color = linkedcolors[index] | strip %}
{% assign name = linkednames[index] | strip %}
{% assign url = linked[index] | strip %}
<a data-value="{{ color }}" class="swatch-element {% if currentHandle == url %}active{%endif%}" href="{{shop.url}}/products/{{url}}">
<label class=" linkedLabel text-center text-ellipsis" style="background:{{color}};"></label>
<div class="tooltip spacer-bottom text-center">{{ name }}</div>
</a>
{% endfor %}
</div>
</div>
{% endif %}
<style>
.linkedColors{
}
.linkedLabel{
cursor:pointer
}
.swatch-element.active{
border:1px solid #292929 !important;
}
</style>
The store theme used is debutify (v 4.9.0), store url https://miesha.com.au/collections/bottoms/products/aura-scrunch-black
As you can see, the product color swatch does not show (if you see color swatches there it is the native debutify color swatch addon (as shown when inspected).
Please do let me know if there is a solution to this as it is giving me a headache.

Related

Shopify: Product grid - how overwrite a Product STOCK-OUT msg, with "Coming Soon" if it's in a ComingSoon collection

Our existing theme displays a 'Stock Out' banner over the product image if there is no stock.
We want to change this banner to "Coming Soon" if the Product is in a ComingSoon Collection.
The theme's 'product-grid-item.liquid file contains:
<a href="{{ product.url | within: current_collection }}" class="product-grid-item">
<div class="product-grid-image">
<div class="product-grid-image--centered">
{% if sold_out %}
<div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div>
{% endif %}
...
Which I changed to:
<!-- added ###For Test ### -->
{% assign found_collection = false %}
{% for collection in product.collections %}
{% if collection.handle contains 'Coming Soon' %}
{% assign found_collection = true %}
{% break %}
{% endif %}
{% endfor %}
{% if found_collection %}
<div class="badge badge--sold-out"><span class="badge-label">Coming Soon</span></div>
{% else %}
<div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div> <!-- this is the original line of code -->
{% endif %}
<!-- end of added code -->
But is doesn't work, all 'no-stock' products display with the banner "Stock out"
Nb The actual Title of the ComingSoon collection is "Coming Soon ..." - so the contains statement should work?
We could change the code to look for a Tag, but admin maintaining a tag would be more work.
Most likely this is because 'Coming Soon' is not the correct handle. A handle is part of your URL that can be found under Collection SEO inside the admin panel
e.g. store.myshopify.com/collections/my-collection -> my-collection is the handle

Assigning a collection to a custom created collection page in Shopify?

I am using a free Venture theme on Shopify and i am trying to make a custom collection page.
I found a solution in stackoverflow but it was able to help someplace.
How to add collection.liquid to an existing page?
The summery of the solution is:
Copy everything that's in collection.liquid and paste it into a new snippet (let's say you call it collection-copy.liquid).
Then, in the page you want to add the collections page to, just add {% include 'collection-copy' %}
This solution worked well but there is one more issue for me. In the custom created page it says "Sorry, there are no products in this collection" In the customization of the same page there is a "collection" section. But in the "collection" section there is no option to choose a collection. There is only "Enable tag filtering" and "Enable sorting" check boxes.
Webpage: https://mottomfreedom.com/pages/less-is-more
Do you have any idea of assigning a collection with this custom created snippet?
{% paginate collections[settings.frontpage_collection].products by 20 %}
<div class="page-width">
<header class="grid medium-up--grid--table section-header small--text-center">
<div class="grid__item medium-up--one-half section-header__item">
<h1 class="section-header__title">
{{ collection.title }}
{% if current_tags %}
– {% assign title_tags = current_tags | join: ', ' %}
{{ title_tags }}
{% endif %}
</h1>
{% if collection.description != blank %}
<div class="section-header__subtext rte">
{{ collection.description }}
</div>
{% endif %}
</div>
<div class="grid__item medium-up--one-half medium-up--text-right section-header__item">
{% section 'collection-filters' %}
</div>
</header>
<div class="grid grid--no-gutters grid--uniform">
{% for product in collection.products %}
<div class="grid__item small--one- medium-up--one-third">
{% include 'product-card', product: product %}
</div>
{% else %}
{% comment %}
Add default products to help with onboarding for collections/all only.
The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if shop.products_count == 0 %}
<div class="grid__item">
<div class="grid grid--no-gutters grid--uniform">
{% assign collection_index = 1 %}
{% for i in (1..10) %}
{% case i %}
{% when 7 %}
{% assign collection_index = 1 %}
{% when 8 %}
{% assign collection_index = 2 %}
{% when 9 %}
{% assign collection_index = 3 %}
{% when 10 %}
{% assign collection_index = 4 %}
{% endcase %}
<div class="grid__item small--one-half medium-up--one-fifth">
<a href="/admin/products" class="product-card">
<div class="product-card__image-container">
<div class="product-card__image-wrapper">
<div class="product-card__image">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
</div>
<div class="product-card__info">
<div class="product-card__name">{{ 'homepage.onboarding.product_title' | t }}</div>
<div class="product-card__price">
$19.99
</div>
</div>
<div class="product-card__overlay">
{% assign view_string_length = 'products.product.view' | t | size %}
<span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
</div>
</a>
</div>
{% assign collection_index = collection_index | plus: 1 %}
{% endfor %}
</div>
</div>
{% else %}
{% comment %}
If collection exists but is empty, display message
{% endcomment %}
<div class="grid__item small--text-center">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>
{% endif %}
{% endfor %}
</div>
{% if paginate.pages > 1 %}
<div class="pagination">
{{ paginate | default_pagination | replace: '« Previous', '←' | replace: 'Next »', '→' }}
</div>
{% endif %}
</div>
{% endpaginate %}
You are right about giving some time before accepting an answer :)) The solution worked but forced me to create 1 page and 4 liquid files per collection. And at the end, i figured out that some sections like "collection.list" doesn't directs to the page which i have created. I think you were talking about this at the beginning of the answer :)
After that, i found a much better solution. Just creating a new section.liquid file and placing it in "collection.liquid" with an "if" statement solved my problem.
{% if collection.handle == 'less-is-more' %}
{% section 'custom-featured-products-LESSisMORE' %}
{% endif %}
But in any way, i'm grateful for your interest. Thank you very much Dave.
It looks like there's nothing defining the collection variable anywhere.
I would suggest changing the beginning of your code snippet from:
{% paginate collections[settings.frontpage_collection].products by 20 %}
To:
{% assign collection = collections[settings.frontpage_collection] %}
{% paginate collection.products by 20 %}
There is an implicit collections variable whenever you're on a page that includes /collections/[something] in the URL, but when you're on a URL that's /page/[something], you have an implicit page variable in Liquid instead.
Note: if the collection set in your theme's value for settings.frontpage_collection isn't the one you want, you can possibly:
a. Change the value using the 'Customize' link beside your theme (most easily found on the /admin/themes page), useful if you're not going to use that setting for anything else;
b. Hard-code a collection handle, eg: collections['i-am-sure-this-will-never-change'], but hard-coded strings are ugly and should generally be avoided;
c. Create your own theme setting by adding an entry to config/settings_schema.json - see https://help.shopify.com/en/themes/development/theme-editor/settings-schema if you're still getting up to speed with custom theme settings; or
d. If all your content is in a section, you can use section settings (similar to theme settings) to make a variable that's tied specifically to just that block of code.
If you need to make these special pages for multiple collections, and each of these pages is largely reusing the same code, you can make your life easier by moving the common code to a snippet and passing variables to it from your page template. To do so:
Create a file in the 'snippets' folder of your theme. (For this example, let's say the file is called collection-in-page.liquid. We will be passing a collection into this snippet, so you can remove the assign statement.
In your page-specific template, figure out what the collection handle is going to be
a. This might be hard-coded, or it might be something you could look up by using metafields or tags on the page. Examples:
{% assign collection_handle = 'hardcoded-handle' %}, {% assign collection_handle = page.metafields.related_items.collection %}
In your page template, include the snippet you created. I find it helps to explicitly pass any variables I want to use, like so:
{% include 'collection-in-page', collection: collections[collection_handle] %}
Hope this helps!

How to change blog.tags to become clickable images

I am looking to create clickable images, like clickable tabs on the blogs.liquid page that filters the page into relevant blogs categories/posts. Currently, the code below just lists the tags and filters correctly.
I have tried to assign an image to each category and while it shows, it is not clickable and therefore does not filter. My hope is to just have the image be clickable and then hide the text.
<ul>
{% for tag in blog.all_tags %}
{% if current_tags contains tag %}
<li class="{{ tag | handleize }} current">{{ tag | link_to_tag: tag }} - current tag</li>
{% else %}
<li class="{{ tag | handleize }}">{{ tag | link_to_tag: tag }}</li>
{% if tag == 'cat1' %}
<img src="#1">
{% endif %}
{% if tag == 'cat2' %}
<img src="#2">
{% endif %}
{% if tag == 'cat3' %}
<img src="#3">
{% endif %}
{% endif %}
{% endfor %}
</ul>
If any of you have any suggestions that will work on the Shopify platform I would be really grateful as I still haven't managed to work it out. I am using the Supply theme in case this is helpful.
Thanks.
Silly me, if you just use the URL link that it triggers there is no need for liquid at all... e.g just link the a normal:
<a href="www.randomsite.com/blogs/education/cat1">
It will achieve the same thing.

Display name of colour variant selected on Shopify

On this page I have some swatches that when selected they don't display the variant name.
Basically, I need to add a paragraph text under the variant swatches that indicate the name of the variant selected...
I'm not good on javascript and online I didn't found any complete guide about that
Thanks a lot for your help!
That looks like a theme I've seen before. If I recall correctly, that theme uses a file called swatch.liquid to make those colour circles. I'm writing this answer using a version of a swatch file that I happen to have on hand, so the specific code may not be exactly what your theme has, but hopefully I'll be able to help you find what you need.
Here is the code from my swatch.liquid file that prints out the swatches. (This is roughly the bottom half of the swatch.liquid file, found in the snippets folder)
<div class="product-options">
<div class="swatch clearfix" data-option-index="{{ option_index }}">
<div class="header">
{% assign values = '' %}
{% for variant in product.variants %}
{% assign value = variant.options[option_index] %}
{% unless values contains value %}
{% assign values = values | join: ',' %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}
<div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% else %}size {% endif %}{{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">
<input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} {% unless variant.available %}disabled{% endunless %} />
{% if is_color %}
<label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }};">
<img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
</label>
{% else %}
<label for="swatch-{{ option_index }}-{{ value | handle }}">
{{ value }}
<img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
</label>
{% endif %}
</div>
{% endunless %}
{% if variant.available %}
<script>
jQuery('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
</script>
{% endif %}
{% endfor %}
</div>
</div>
</div>
That looks a bit messy, I know - so let's try and find the part that you'll want to modify.
Here's the part from the above example that prints the swatch element when the swatch is a colour:
{% if is_color %}
<label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }};">
<img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
</label>
{% else %}
In between those <label> tags you should be able to add any text that you need - such as a <span class="swatch-color-name">{{ value }}</span>
Adding extra HTML in here may throw off the current styles of your page, so you may need to add some extra CSS rules to apply to any elements you add to get things to line up nicely again.
Hope this helps!
NB: If you're using Chrome, there's a useful extension called "Search All" that lets you search your entire Shopify theme if you're having trouble finding the file that needs to be edited. Searching for keywords like 'color' or 'variant.options' should help point you in the right direction.

How to Display a Metafield in Shopify

We have a group of products that we want to have FREE Shipping. In order to do so, I have made their weight =0 and created a weight based shipping for 0lbs.
That way the shipping passes through the cart. But...I would like to display the actual weight on the product page.
I have created a metafield for the shipping weight, and I am trying to call that value to the product page, but not having any luck......
Here is what I am trying for code....
//------SHIPPING WEIGHT-------------------------//
{% if product.vendor == 'American Chains' %}
$('.wt').text((variant.ShippingWeight)+'lb');
// {{ variant.metafields.ShippingWeight.shipping_weight }}
{% else %}
$('.wt').text(parseInt(variant.weight * 0.0022046, 10) + 'lb');
{% endif %}
//------SHIPPING WEIGHT-------------------------//
Thanks for any help or direction on this one.
In Product.liquid you only have access to the Product. If you want to access a specific Product Variant you have to loop through the Product Variants. Within the loop you have access to the metafields for a variant.
{% for variant in product.variants %}
// to display the variant metafields use {{resource.metafields.namespace.key}}
{{ variant.metafields.ShippingWeight.shipping_weight }}
{% endfor %}
http://docs.shopify.com/themes/liquid-documentation/objects/metafield
go threw with this link
simple...
{% for field in product.metafields.instructions %}
{{ field | first }}: {{ field | last }}
{% endfor %}
Meta fields are created by using ( metafields or shopify FD ) shopify app for products edit page
Then enter the following values in form fields (Namespace,Key,Value)
After entering values,you can retrive values like following code..,
Namespace = metafield_values,
Key= color,
Value= red,
{% assign value = product.metafields.metafield_values%}
<p>{{ value.color }}</p>
output: red
------------------------------
{{metafields.namespace.key}}
------------------------------
Namespace = prod_video,
{{ product.metafields.prod_video.prod_video }}
{{ collection.metafields.prod_video.prod_video }}
---------metafield loop with same namespace & different key------------
<div class="prod_add_img">
{% for collection in product.collections %}
{% for field in collection.metafields.additional_images %}
<img src="{{ field | last | asset_url }}">
{% endfor %}
{% endfor %}
</div>
In metafield section, shopify show's shortcode. For below screenshot the code is
{{product.metafields.custom.theme_color}}