BLOG

Hide unavailable variant option from the swatch and dropdown Shopify PDP

<script> const variantSelects = (document.querySelector('variant-selects')) ? document.querySelector('variant-selects') : document.querySelector('variant-radios'); const pickerType = (variantSelects.querySelectorAll('fieldset').length > 0) ? 'radios' : 'selects'; const fieldsets = (pickerType == 'radios') ? Array.from(variantSelects.querySelectorAll('fieldset')) : Array.from(variantSelects.querySelectorAll('.product-form__input--dropdown')); const productJson = JSON.parse(variantSelects.querySelector('[type="application/json"]').textContent); let selectedOptions = []; variantSelects.addEventListener('change', rebuildOptions); this.rebuildOptions(); function validCombo(inputValue, optionLevel) { for(let...

Hide and show section based on date time selection countdown timer

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}{{ 'component-slider.css' | asset_url | stylesheet_tag }}{{ 'component-slideshow.css' | asset_url | stylesheet_tag }} {%- if section.settings.slide_height == 'adapt_image' and section.blocks.first.settings.image != blank -%} {%- style -%} @media screen and (max-width: 749px) { #Slider-{{ section.id }}::before, #Slider-{{ section.id }} .media::before,...

Ajax Single/ First variant add to cart button without page load Shopify

{%- assign current_variant = product.selected_or_first_available_variant -%} <span id="color"></span> <button id="color" type="button" {% unless current_variant.available %} disabled="disabled" {% endunless %} onclick="add_to_cart_grid({{current_variant.id}}, 1)" class="btn btn--full" > {% if current_variant.available %} Add to Cart {% else %} Out of Stock {% endif %} </button> <script> function add_to_cart_grid(variantid,qty){ var...

Shopify Meta field uses

file type image: {{ product.metafields.product.variant_swatch_1 | img_tag }} product type url: {{ product.metafields.custom.prod_link_1.value.url}} Multiple product type: {% assign cust_product = product.metafields.custom.complete_the_look_products.value %}{% for cust_product in cust_product %} {{ cust_product.title }} {% endfor %}  

swatch as a variant image shopify 2.0

{%- for variant in product.variants -%} {%- if variant.title contains value -%} {%- assign variantImgSrc = variant.image.src | img_url: '300x' -%} {%- break -%} {%- endif -%} {%- endfor -%} {% if option.name == 'color' or option.name == 'Color' or option.name == 'Colour' or option.name...

Slick Slider main image zoom on mouse hover Shopify

<div class="product-main-image"> {% for media in product.media %} <div onmousemove="zoom(event)" style="background-image: url({{ media |img_url: '' }})" data-src="{{ media |img_url: '' }}" class="zoom item-slick {{ media.alt | replace: '/', ''}}" > <img class="item-slick {{ media.alt | replace: '/', ''}}" src="{{ media |img_url: '' }}" alt="{{ media.alt...