Shopify basic price indication - shopify

I try to make a basic price indication for my german Shopify store. In this line, I've tried to give out the basic price, which is: product.price / first variant value * 10 but I don't know how to get the value from that. Maybe someone can help me with this.
I hope my description is complete.
(there are 3 sets of variants but only the 1. is important so it has to be something like product options selector = 0 or something)
THX!
<p class="hint">Grundpreis: {{ product.price | divided_by: product.option.selected_value | times: 10 | money }}/Meter</p>
</p>
<p class="product-single__price product-single__price-{{ section.id }}{% unless current_variant.available %} product-price--sold-out{% endunless %}">
{% if current_variant.compare_at_price > current_variant.price %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice-{{ section.id }}">{{ current_variant.compare_at_price | money }}</s>
<span class="product-price__price product-price__price-{{ section.id }} product-price__sale product-price__sale--single">
<span id="ProductPrice-{{ section.id }}"
itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
<span class="product-price__sale-label product-price__sale-label-{{ section.id }}">{{ 'products.product.on_sale' | t }}</span>
</span>
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice-{{ section.id }}" class="hide">{{ current_variant.compare_at_price | money }}</s>
<span class="product-price__price product-price__price-{{ section.id }}">
<span id="ProductPrice-{{ section.id }}"
itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
<span class="product-price__sale-label product-price__sale-label-{{ section.id }} hide">{{ 'products.product.on_sale' | t }}</span>
</span>
{% endif %}
<p class="hint">Grundpreis: {{ product.price | divided_by: product.option.selected_value | money }}/Meter</p>
</p>
<form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}" data-section="{{ section.id }}">
{% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
{% 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>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}

Related

High CLS Product Page - need Ideas

i started my online shop a few months back and since im not a programmer i finally reached a point where i need help.
I was trying to improve Pagespeed according to Google and i managed to get the CLS of my Index page to almost 0. - Lazyload, System Fonts, Aspect Ratio of Pictures and so on... i managed to find it all in the Liquid Code of my Shopify Store and optimize it by myself. ... ok i totally crashed the page a few times but thats what backups are for ;-)
But i have no Idea about the Product Pages.
Lighthouse can tell me the Objects causing a CLS of almost 1(!) - mostly its around 0,9 - but i looked at the code of these Objects for 5 days now and i am lost.
its supposed to be caused by the following:
main#MainContent.main-content
div.col-12.col-md-6.order-1
div.page-container.page-element.is-moved-by-drawer
...and sometimes a few more causing small numbers ob CLS
i tried diffrent Templates of my theme but no change
i googled a lot... and i mean A LOT in 5 days...
i tried many suggestions that i found while googling about this issue
i tried to find Code checkers or HTML code Analyzer but that didnt help
i tried things mentioned in this thread: Cumulative Layout Shift with Bootstrap 4 grid
i dont see the Layout shift supposedly caused by these elements
the only Layout shift i can see is somehow NOT mentioned by google - but results don`t change if i remove the app causing the layout shift that i can see. (app is called Legal Pro - needed for keeping the shop up to the requirements of German law. it injects Product data between the Price and the remaining Stock. I can not change the app, only deactivate it. But even when the app is removed, the Lighthouse data does not change. Not even a little!
i would be willing to totally replace the code of the product page with a code with less CLS but adapting complete new code to the existing pages is out of my league. I can change it but not write it. :-/
I`d be very thankful for any help. Just give me something i can google.
(and yes i know there are more issues on that page but CLS is giving me a bad Google ranking right now - one problem at the time)
an example Page can be found here:
https://besonderes-mit-liebe-handgemacht.de/collections/mannergeschenke/products/edle-kugelschreiber-von-hand-gedrechselt-besondere-holzer
the Product page code for the Page is this:
<div class="row product-single">
<div class="col-md-6">
<div class="photos">
<div class="photos__item photos__item--main">
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
{%- for image in product.images -%}
<div class="product-single__photo product__photo-container product__photo-container-{{ section.id }} js{% unless image == featured_image %} hide{% endunless %}"
id="ProductPhoto"
style="max-width: {% include 'image-width' with image: image, width: 480 %}px;"
data-image-id="{{ image.id }}">
<a href="{{ image | img_url: '1200x1200' }}" data-lightbox="image-product"
class="product__photo-wrapper product__photo-wrapper-{{ section.id }}"
style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="lazyload {% unless image == featured_image %} lazypreload{% endunless %}"
src="{{ image | img_url: '1024x' }}"
data-src="{{ img_url }}"
data-widths="[180, 240, 360, 480, 720, 960, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</a>
</div>
{%- endfor -%}
<noscript>
<a href="{{ featured_image | img_url: '1200x1200' }}">
<img src="{{ featured_image | img_url: product_image_size }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg-{{ section.id }}">
</a>
</noscript>
{% include 'productVideo' %}
</div>
{%- if product.images.size > 1 -%}
<div class="photos__item photos__item--thumbs">
<div class="product-single__thumbnails product-single__thumbnails-{{ section.id }} product-single__thumbnails--static">
{%- for image in product.images -%}
<div class="product-single__thumbnail-item product-single__thumbnail-item-{{ section.id }}{% if image == featured_image %} is-active{% endif %}" data-image-id="{{ image.id }}">
<a href="{{ image.src | img_url: product_image_size }}" data-zoom="{{ image.src | img_url: '1200x1200' }}" class="product-single__thumbnail product-single__thumbnail-{{ section.id }}">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="lazyload {% unless image == featured_image %} lazypreload{% endunless %}"
src="{{ image | img_url: '1024x' }}"
data-src="{{ img_url }}"
data-widths="[180, 240, 360, 480, 720, 960, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</a>
</div>
{%- endfor -%}
</div>
</div>
<script >
{%- capture arrow_left -%}{%- include 'icon-arrow-left' -%}{%- endcapture -%}
{%- capture arrow_right -%}{%- include 'icon-arrow-right' -%}{%- endcapture -%}
{%- capture arrow_up -%}{%- include 'icon-arrow-up' -%}{%- endcapture -%}
{%- capture arrow_down -%}{%- include 'icon-arrow-down' -%}{%- endcapture -%}
var sliderArrows = {
left: {{ arrow_left | json }},
right: {{ arrow_right | json }},
up: {{ arrow_up | json }},
down: {{ arrow_down | json }}
}
</script>
{%- endif -%}
{% if section.settings.positiontab == "left" %}
<div class=" {% unless settings.productpage == "product-1" %}pl-5 {% endunless %}" >
<div class="{% unless settings.productpage == "product-1" %}pl-5 {% endunless %}">
{% if section.settings.enable_tabvertical %}
{%- include 'product-information-vertical' -%}
{% else %}
{%- include 'product-information' -%}
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
<div class="col-12 col-md-6 order-1" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product-single__info-wrapper">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<div class="product-single__meta small--text-center">
<h1 itemprop="name" class="product-single__title">{{ product.title }}<span id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
<span class="product-tag gradient-theme">
{{ 'products.product.on_sale' | t }}
</span>
</span>
</h1>
<ul class="pb-3 product-single__meta-list list--inline{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__price-container{% endif %}">
<li>
{%- unless product.compare_at_price_max > product.price -%}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{%- endunless -%}
<span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
</li>
{% if product.compare_at_price_max > product.price %}
<li>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
{{ current_variant.compare_at_price | money }}
</s>
</li>
{% endif %}
{%- if section.settings.stock_enable -%}
<li>{%- include 'productStock' -%}</li>
{%- endif -%}
</ul>
<div class="review">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>
{% if product.metafields.info.shortdesc != blank %}
<div class=" pb-4 rte product-single__description" itemprop="Beschreibung">
{{product.metafields.info.shortdesc}}
</div>
{% endif %}
</div>
{% if product.metafields.info.affiliate_link != blank %}{% comment %}AFFILIATE PRODUCT{% endcomment %}
<a href="{{product.metafields.info.affiliate_link}}" class="my-3 btn btn-theme btn--full product-form__cart-submit {% if section.settings.enable_payment_button %}product-form__cart-submit--outline{% endif %}">
{{product.metafields.info.affiliate_button}}
</a>
{% else %} {% comment %}NORMAL PRODUCT{% endcomment %}
{% capture "form_class" %}product-form {% if section.settings.product_selector == 'select'%} product-form-select{% endif %} {% if section.settings.enable_payment_button %} product-form--payment-button{% endif %}{%- endcapture %}
{% capture "form_id" %}AddToCartForm-{{ section.id }}{%- endcapture %}
{% form 'product', product, class:form_class, id:form_id %}
{% 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-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
{% include 'productOption' %}
</div>
{% endfor %}
{% endunless %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
{% if variant.available %}
{{ variant.title }} - {{ variant.price | money_with_currency }}
{% else %}
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
{% endif %}
</option>
{% endfor %}
</select>
<div class="product-form__quantity-submit pt-4">
<div class="product-form__item product-form__item--submit {% unless section.settings.enable_payment_button %} btn-disablebuynow {% endunless %}">
<button type="submit"
name="add"
id="AddToCart-{{ section.id }}"
class="btn btn--full btn-theme product-form__cart-submit {% if section.settings.enable_payment_button %}product-form__cart-submit--outline{% endif %}{% unless current_variant.available %} btn--sold-out{% endunless %}"
{% unless current_variant.available %}disabled="disabled"{% endunless %}>
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
</div>
{% if section.settings.enable_payment_button %}
<div class="product-form__buynow">
{{ form | payment_button }}
{% if current_variant.available == false %}<style>.shopify-payment-button{display:none}</style>{% endif %}
</div>
{% endif %}
</div>
<div class="js-contact-soldout {% if current_variant.available %}hide{% endif %}">
<span class="btn btn-waitlist btn-theme" data-toggle="modal" data-target="#jsSoldout" title="{{ 'products.product.soldout_messenger' | t }}">{{'products.product.waitlist' | t}}</span>
</div>
<div class="gr-btnjs d-flex py-4 align-items-center justify-content-between">
<div class="d-flex align-items-center">
<div>
{% if settings.enable_compare %}
<span class="btn js-btn-compare mr-4" data-tooltip="true" title="{{ 'products.product.compare_text' | t }}" data-handle="{{product.handle}}">
{%- include 'icon-exchange' -%}
{%- include 'icon-close' -%}
<span>{{ 'products.product.compare_text' | t }}</span>
</span>
{% endif %}
{% if settings.enable_wishlsit %}
<span data-tooltip="true" class="js-btn-wishlist mr-4" title="{{ 'products.product.wishlist_text' | t }}" data-handle="{{product.handle}}">
{%- include 'icon-heart' -%}
<span class="wishlist-text">{{ 'products.product.wishlist_text' | t }}</span>
</span>
{% endif %}
</div>
<div>
{%- include 'productSizeGuide' -%}
</div>
</div>
<div>
{% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
{% endform %}
{% include 'notifySoldoutProduct' %}
{% endif %}
<div class="row text-left pt-2">
<div class="product-single__information col text-uppercase">
{% if section.settings.product_vendor_enable %}
<p class="product-single__vendor"><small class="text-body">{{'products.product.vendor' | t }}: </small><small>{{ product.vendor }}</small></p>
{% endif %}
{% if section.settings.product_type_enable %}
<p class="product-single__type"><small class="text-body">{{'products.product.type' | t }}: </small><small>{{ product.type }}</small></p>
{% endif %}
{% if section.settings.variant_sku_enable %}
<p class="product-single__sku "><small class="text-body">{{'products.product.sku' | t }}: </small><small class="js-variant-sku">{{ current_variant.sku | default:'null' }}</small></p>
{% endif %}
{% if section.settings.variant_available_enable %}
<p class="product-single__availability "><small class="text-body">{{'products.product.available' | t }}: </small><small>{% if current_variant.available %}{{ 'products.product.available' | t }}{% else %}{{'products.product.sold_out' | t }}{% endif %}</small></p>
{% endif %}
</div>
{% if settings.safe_checkout_detail != blank %}
<div class="safe-checkout-detail col">
<img class="lazyload img-fluid w-100" data-src="{{ settings.safe_checkout_detail | img_url: '600x' }}"/>
</div>
{% endif %}
</div>
{% include 'fake-viewer' %}
{% include 'free-shipping' %}
{% include 'shipping-time' %}
{% if settings.enable_countdown_page %}
{% include 'product-countdown' %}
{% endif %}
{% if section.settings.positiontab == "right" %}
{% if section.settings.enable_tabvertical %}
{%- include 'product-information-vertical' -%}
{% else %}
{%- include 'product-information' -%}
{% endif %}
{% endif%}
</div>
</div>
</div>

I need to display a variant image on a radio button variant selector, but can't seem to find how to properly pull the variant img src. Shopify

So I'm on Shopify product template (using Debut Theme). I changed the default dropdown variant selector to radio buttons and it works great. I wanted the radio buttons to display the variant image, and that's where I'm stuck. (Here's a link to a test product where I want this to work: TEST product link
Here's the radio button form:
{% form 'product', product, class:form_classes %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<label style="font-weight: 700; font-size: 1.2em;"{% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
¡Escoge la versión que quieres!
</label>
{% assign option_position = forloop.index %}
<fieldset class="botones-radio">
{%- for value in option.values -%}
<div class="imagen-mas-boton">
<input type="radio" class="single-option-selector-{{ section.id }} "
{% if option.selected_value == value %} checked="checked"{% endif %}
value="{{ value | escape }}"
data-index="option{{option_position}}"
name="{{ option.name | handleize }}"
id="SingleOptionSelector-{{option_position}}">
<img src="{{ featured_image | img_url: '200x' }}" />
<label style="text-align: center;" for="SingleOptionSelector-{{ forloop.index0 }}">
{{value}}
</label>
</div>
{%- endfor -%}
</fieldset>
{% endfor %}
{% endunless %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
{{ variant.title }}
</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
{% endif %}
{% endfor %}
</select>
{% if section.settings.show_quantity_selector %}
<div class="product-form__item product-form__item--quantity">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
</div>
{% endif %}
<div class="product-form__item product-form__item--submit{% if section.settings.enable_payment_button %} product-form__item--payment-button{% endif %}{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
</div>
{% endform %}
Now, the <img src="{{ featured_image | img_url: '200x' }}" /> obviously displays the featured image so both variants will display the same image, and both will change when selecting the other variant and refreshing the page.
I want to display the image assigned to each variant. I tried <img src="{{ variant| img_url: '200x' }}" /> and <img src="{{ variant.image | img_url: '200x' }}" />
But it doesn't seem to work.
I also would like to display each variants price on the lable, for this I tried the following:
<label style="text-align: center;" for="SingleOptionSelector-{{ forloop.index0 }}"> {{value}} {{current_variant.price | money }} </label>
but this will show the price of the selected variant and will only change when refreshed.

Shopify - Product variant compare price is not updating when changing between variants

Background
on a product page there are multiple variants
certain variants have a compare price (which means its cheaper)
I am trying to show the amount saved when a variant is cheaper than its original price.
The function is working
{% if current_variant.price < current_variant.compare_at_price %}
{{ current_variant.compare_at_price | minus: current_variant.price | times: 100 | divided_by: variant.compare_at_price }}% (<span class="money">{{ variant.compare_at_price | minus: variant.price | money }}</span>)
{% endif %}
The issue is that it only works for the initial page load, and this will show the discount saving.
When I change the variant it keeps the data of saving discount from the previous variant.
So how can I get it to update between change of the variants.
Attached are screenshots -
the 10.95 saving is correct and done on the first page load
then I change the variant and the discount saving is not updating accordingly.
[![10.95 correct][1]][1]
[![variant change but discount not updating][2]][2]
Tried multiple options.
Below is the full product price code.
{% comment %}
Renders a list of product's price (regular, sale, unit)
Accompanies product forms and meant to be updated dynamically
Accepts:
- variant: {Object} Variant Liquid object (optional)
- product: {Object} Product Liquid object (optional)
- show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)
Usage:
{% include 'product-price', variant: current_variant, product: product %}
{% endcomment %}
{%- liquid
if variant.title
assign compare_at_price = variant.compare_at_price
assign price = variant.price
assign available = variant.available
else
assign compare_at_price = 1999
assign price = 1999
assign available = true
endif
assign money_price = price | money
-%}
<dl class="price
{% if available == false %} price--sold-out {% endif %}
{% if compare_at_price > price %} price--on-sale {% endif %}
{% if variant.unit_price_measurement %} price--unit-available {% endif %}"
data-price
>
{% if show_vendor and product %}
<div class="price__vendor">
<dt>
<span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
</dt>
<dd>
{{ product.vendor }}
</dd>
</div>
{% endif %}
{%- comment -%}
Explanation of description list:
- div.price__regular: Displayed when there are no variants on sale
- div.price__sale: Displayed when a variant is a sale
- div.price__unit: Displayed when the first variant has a unit price
- div.price__availability: Displayed when the product is sold out
{%- endcomment -%}
<div class="price__pricing-group">
<div class="price__regular">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--regular" data-regular-price>
{{ money_price }}
</span>
</dd>
</div>
<div class="price__sale">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--sale" data-sale-price>
{{ money_price }}
</span>
</dd>
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s class="price-item price-item--regular" data-regular-price>
{{ compare_at_price | money }}
</s>
</dd>
<dd>
You save {{ current_variant.compare_at_price | minus: current_variant.price | money }}
</dd>
</div>
<div class="price__badges">
<span class="price__badge price__badge--sale" aria-hidden="true">
<!-- <span>{{ 'products.product.on_sale' | t }}</span> -->
<span class="price_bagde_perc_cust">
{% if current_variant.price < current_variant.compare_at_price %}
{{ current_variant.compare_at_price | minus: current_variant.price | times: 100 | divided_by: variant.compare_at_price }}% (<span class="money">{{ variant.compare_at_price | minus: variant.price | money }}</span>)
{% endif %}
{% if variant.price < variant.compare_at_price %} {{ variant.compare_at_price | money }}{% endif %}
You save {{ product.metafields['discountpricepdp']['salespricepdp'] }}
</span>
</span>
<span class="price__badge price__badge--sold-out">
<span>{{ 'products.product.sold_out' | t }}</span>
</span>
</div>
</div>
<div class="price__unit">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
</dt>
<dd class="price-unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span data-unit-price-base-unit>
{%- if variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</dd>
</div>
</dl>
'''
Thanks and hopefully someone will be able to resolve it
[1]: https://i.stack.imgur.com/40I5U.png
[2]: https://i.stack.imgur.com/6Urfk.png

Adding out of stock to product card grid page

I am trying to apply the following "out of stock" code to the product-card-grid.liquid page but it seems to only be working for one item, ie a single listing on the product-template.liquid, instead of all. I think this is because the referenced implementation is only for one page and not for multiple item listings. How do I update it so that this isn't the case?
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
<a class="grid-view-item__link grid-view-item__image-container" href="{{ product.url | within: collection }}">
{% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
{% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% unless product.featured_image == blank %}
{% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
{% endunless %}
<div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper js">
<div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};">
<img id="{{ img_id }}"
class="grid-view-item__image lazyload"
src="{{ product.featured_image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ product.featured_image.alt | escape }}">
</div>
</div>
<noscript>
{% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">
</noscript>
<div class="h4 grid-view-item__title">{{ product.title }}</div>
{% if section.settings.show_vendor %}
<div class="grid-view-item__vendor">{{ product.vendor }}</div>
{% endif %}
<div class="grid-view-item__meta">
{% include 'product-price' %}
</div>
{% unless product.available %}
<div id="sold-out" style="margin-top: 10px">
{% form 'contact' %}
{% if form.posted_successfully? %}
<p class="accent-text">Thanks! We will notify you when this product becomes available!</p>
{% else %}
<p><a id="notify-me" class="product-page-notify-me" href="#" style="color: #788188;">Email me when available</a></p>
{% endif %}
{% if form.errors %}
<div class="error feedback accent-text">
<p>Please provide a valid email address.</p>
</div>
{% endif %}
{% unless form.posted_successfully? %}
<div id="notify-me-wrapper" class="clearfix" style="display:none">
{% if customer %}
<input type="hidden" name="contact[email]" value="{{ customer.email }}" />
{% else %}
<input style="float:left; width:100%;" required="required" type="email" name="contact[email]" placeholder="your#email.com" class="styled-input{% if form.errors contains 'email' %} error{% endif %}" value="{{ contact.fields.email }}" />
{% endif %}
<input type="hidden" name="contact[body]" value="Please notify me when {{ product.title | escape }} becomes available." />
<input style="float:left;" class="btn styled-submit" type="submit" value="Send" />
</div>
{% endunless %}
{% endform %}
</div>
{% endunless %}
</a>
</div>
UPDATE
I've tried editing the jQuery as follows, which fixes it but the submit button sends an email for all the items on the product listing page:
jQuery('.notify-me').click(function() {
jQuery($(this).closest('.contact-form').find('.notify-me-wrapper').fadeIn());
return false;
});

Shopify Limit Tagged Products

I'm currently working on a Shopify theme, I have a list of all products, I've filtered them to only show anything with the following tag 'Neoprene' - how do I not limit the tagged product to only show 4?
Any help would be grateful!
<main class="wrapper">
<div class="grid">
<div class="grid__item">
<div class="large--one-whole">
{% for product in collections.all.products limit: 9999 %}
{% if product.tags contains 'Neoprene' %}
<div class="landing-product grid__item large--one-quarter medium--one-quarter small--one-half">
<a href="{{ product.url }}" class="img">
{% for image in product.images %}
<span class="grid-link__image-centered">
<img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
</span>
{% endfor %}
</a>
<a href="{{ product.url }}" class="title">
{{ product.title }}
</a>
<a href="{{ product.url }}" class="price">
{{ product.price | money }}
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</main>
<main class="wrapper">
<div class="grid">
<div class="grid__item">
<div class="large--one-whole">
{% assign a = 0 %}
{% for product in collections.all.products limit: 9999 %}
{% if a == 4 %}
{% break %}
{% else %}
{% if product.tags contains 'Neoprene' %}
{% assign a = a | plus : 1 %}
<div class="landing-product grid__item large--one-quarter medium--one-quarter small--one-half">
<a href="{{ product.url }}" class="img">
{% for image in product.images %}
<span class="grid-link__image-centered">
<img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
</span>
{% endfor %}
</a>
<a href="{{ product.url }}" class="title">
{{ product.title }}
</a>
<a href="{{ product.url }}" class="price">
{{ product.price | money }}
</a>
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</main>