BLOG

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...

Get Order details any page

{% for order in customer.orders %} <tr> <td>{{ order.name | link_to: order.customer_url }}</td> <td>{{ order.created_at | date: format: 'short' }}</td> <td>{{ order.financial_status_label }}</td> <td>{{ order.fulfillment_status_label }}</td> <td>{{ order.total_price | money }}</td> </tr> {% for line_item in order.line_items %} <tr> <td>{{ line_item.title | link_to: line_item.product.url }}</td>...

Create Shopify blank theme from local

Create the theme folders as per shopify (templates, sections, snippets, etc.) In the config folder create on json file called settings_schema.json and add below details  [   {     "name": "theme_info",     "theme_name": "latest Devang",     "theme_version": "1.0.0",     "theme_author": "Rock",     "theme_documentation_url": "https:\/\/help.shopify.com\/manual\/online-store\/themes",     "theme_support_url": "https:\/\/support.shopify.com\/"   } ] In the layout...