https://www.shopify.com/partners/shopify-cheat-sheet
https://www.yahoobaba.net/
edit code, theme liquid
https://store.xyz.in/adminID - abc Password - 123
login and Go to
(1) Online Store -> Themes->oct 2020->action-> Only Preview (not publish)
(2) Online Store -> Themes->oct 2020->action-> Edit Code (go to code part)
(3) Go to Assets->Add a new asset-> mobile_custom.css
and call this on head
<head>
{% include 'booster-seo' %}
{{ 'mobile_custom.css' | asset_url | stylesheet_tag }}
</head>
(4) Go to Section -> create-> mobile-nav-top.liquid
and call this under head section
=====================================================================
ADD INCLUDE CUSTOM SECTION CSS, JS
steps to add a custom section - https://www.tech-prastish.com/blog/how-to-create-custom-sections-in-shopify/
Call JS
{{ 'customer_area.js' | asset_url | script_tag }}
Call CSS
<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}" type="text/css" media="print" onload="this.media='all';onLoadStylesheet()">
or <link rel="stylesheet" href="{{ 'custom.css' | asset_url }}" type="text/css">
{{ 'mobile_custom.css' | asset_url | stylesheet_tag }}
**************************************
How to run Shopify in local
==============================================
1- Install Powershell
2- Install Chocolatey
3- Install Themekit
4- Intall V S code editor
5- Go Terminal-> New Terminal
6- type command -> theme download
7- after then -> theme watch
**********************************************
ADD COMMENT
{% comment %}
code put here
{% endcomment %}
======================================================================
How to find Shopify actual theme name
-------------------------------------------
https://www.youtube.com/watch?v=64CHt6d-DQg
1- Go to inspect website and goto view source
2- and Search => "boomerang"
3- find theme name => window.BOOMR.themeName = "Canopy";
2nd method but not give correct name
------------------------------------------
1- Go to inspect website and goto view source
2- and Search => "shopify.theme"
3- find theme name => window.BOOMR.themeName = "Canopy";
4- Shopify.theme = {"name":"Cross","id":8285892,"theme_store_id":null,"role":"main"};
**********************************************************
How to create a new page in Shopify
Step 1- go to live theme and create template (customize_quiz_steps=page.customize_quiz_steps)
and call under this css, js
<link type="text/css" href="{{ 'customize_atta_itc.css' | asset_url }}" rel="stylesheet">
{{ 'style_quiz.css' | asset_url | stylesheet_tag }}
{{ 'script_quiz.js' | asset_url | script_tag }}
<script src="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/smartwizard@5/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
Step 2- page.customize_quiz_steps
<div class="page-tpl customize-select-atta">
<div class="container">
{% include 'customized-ashirwaad-atta-select' %}
</div>
</div>
Step 3- create snippet
Step 4- Click on pages-> add new-> put page name-> and select template
=========================================================================
How to set any prouct Quantity Min 4 or 2 in shopify
---------------------------------------------------
Step 1- First Create tag Go to Live theme ->Go products->Go Collections->Create Collection
Enter Title->Min Quantity Four, Collection type->Automated, Products must match:All condition
Product tag is equal to (product category name->Dining Chairs)
Step 2- Select tag(Min Quantity Two) which product as you want(Crown Dining Chair)
Step 3- Put This code in product-template.liquid (call tag name using if condition)
<div class="qty-group">
<a href="#" data-minus-qtt class="minus button"></a>
{% if product.tags contains 'Min Quantity Four' %}
<input type="text" data-qtt-id="quantity__{{ product.id }}" id="quantity" name="quantity" value="4" min="4" class="quantity-selector quantity-input" readonly="">
{% else %}
<input type="text" data-qtt-id="quantity__{{ product.id }}" name="quantity" value="1">
{% endif %}
<a href="#" data-plus-qtt class="plus button"></a>
</div>
and show message using this
{% if product.tags contains 'Min Quantity Four' %}
<div class="min_orderf">Minimum Order Quantity is 4.</div>
{% endif %}
Step 4- Add This JS in app.js ot theme.js page
$('document').ready(function () {
$('.qty-group .minus').on('click', function(){
var qty = parseInt($(this).parent('.qty-group').find('.quantity-input').val());
//alert(qty);
if($(this).hasClass('plus')) {
qty++;
}else {
if(qty == '4') {
return false;
//qty--;
}
}
qty = (isNaN(qty))?1:qty;
$(this).parent('.qty-group').find('.quantity-input').val(qty);
});
});
Step 5- Add this code in Cart Page
<div class="qty-group">
<a href="#" data-minus-quantity class="minus button"></a>
{% if item.product.tags contains 'Min Quantity Four' %}
<input type="text" min="4" data-qtt-id="quantity__{{ product.id }}" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" class="quantity-selector quantity-input" readonly="">
{% else %}
<input type="text" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}">
{% endif %}
<a href="#" data-plus-quantity class="plus button"></a>
</div>
and show message using this
{% if item.product.tags contains 'Min Quantity Four' %}
<div class="min_orderf">Minimum Order Quantity is 4.</div>
{% endif %}
=======================================
Mutiple Min Quantity Condition
--------------------------pdp page-------------------------------------
<div class="quantity">
<div class="qty-group">
<a href="#" data-minus-qtt class="minus button"></a>
{% if product.tags contains 'Min Quantity Four' %}
<input type="text" data-qtt-id="quantity__{{ product.id }}" id="quantity" name="quantity" value="4" min="4" class="quantity-selector quantity-input" readonly="">
<input type="hidden" value="4" name="mininquantity_name" id="idminquantity">
{% elsif product.tags contains 'Min Quantity Two' %}
<input type="text" data-qtt-id="quantity__{{ product.id }}" id="quantity" name="quantity" value="2" min="2" class="quantity-selector quantity-input" readonly="">
<input type="hidden" value="2" name="mininquantity_name" id="idminquantity">
{% else %}
<input type="text" data-qtt-id="quantity__{{ product.id }}" name="quantity" value="1">
<input type="hidden" value="0" name="mininquantity_name" id="idminquantity">
{% endif %}
{% comment %}
<input type="text" data-qtt-id="quantity__{{ product.id }}" name="quantity" value="1">
{% endcomment %}
<a href="#" data-plus-qtt class="plus button"></a>
</div>
</div>
{% if product.tags contains 'Min Quantity Four' %}
<p class="qtity-text">Minimum Order Quantity is 4.</p>
{% elsif product.tags contains 'Min Quantity Two' %}
<p class="qtity-text">Minimum Order Quantity is 2.</p>
{% endif %}
--------------------cart page--------------------------------------------------
<div class="qty-group">
<a href="#" data-minus-quantity class="minus button"></a>
{% if item.product.tags contains 'Min Quantity Four' %}
<input type="text" min="4" data-qtt-id="quantity__{{ product.id }}" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="4" class="quantity-selector quantity-input" readonly="">
<input type="hidden" value="4" name="mininquantity_name" id="idminquantity">
{% elsif item.product.tags contains 'Min Quantity Two' %}
<input type="text" min="2" data-qtt-id="quantity__{{ product.id }}" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="2" class="quantity-selector quantity-input" readonly="">
<input type="hidden" value="2" name="mininquantity_name" id="idminquantity">
{% else %}
<input type="text" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}">
<input type="hidden" value="0" name="mininquantity_name" id="idminquantity">
{% endif %}
----------------------theme.js-------------------------------------------------------------------
$('document').ready(function () {
$('.qty-group .minus').on('click', function(){
var qty = parseInt($(this).parent('.qty-group').find('.quantity-input').val());
var minqty = $('#idminquantity').val();
if($(this).hasClass('plus')) {
qty++;
}else {
if(qty == minqty && minqty!=0) {
return false;
//qty--;
}
}
qty = (isNaN(qty))?1:qty;
$(this).parent('.qty-group').find('.quantity-input').val(qty);
});
==========================================================
Change multiple variant images according to the selected color
------------------------------------------------------------
{% for media in product.media %}
{% case media.media_type %}
{% when 'image' %}
<div thumbnail-color=”{{ media.alt }}” class="item altitem filter-{{ media.alt | handle }}">
<div class="product-single__media lalit" data-media-id="{{ media.id }}">
<a href="javascript:void(0)" data-image="{{ media | img_url: 'original' }}" data-zoom-image="{{ media | img_url: 'original' }}">
<img src="{{ media | img_url: 'compact' }}" alt="{{ media.alt | escape }}">
</a>
</div>
</div>
{% endfor %}
--------------------------------------------
<script>
$(document).on('change','#product-selectors-option-1',function () {
$('.altitem').css('display', 'none');
var color= $(this).val();
color= color.toLowerCase();
//alert(color);
//$('.filter-'+color).css('display','block');
});
</script>
or using Visibility in place of Display
$(document).on('change','#product-selectors-option-1',function () {
$('.altitem').css('visibility', 'hidden');
var color= $(this).val();
color= color.toLowerCase();
//alert(color);
$('.filter-'+color).css('visibility','visible');
});
========================================================================
===================================================================
https://www.youtube.com/watch?v=TlgHl-F-crg&list=PLOTfR5AmSOWBTgr6aprfjZWjiYXqkFrU1
Step 1- First create Account https://partners.shopify.com/
Step 2- Go to Store & create Store()
Step 3- Fill store Details Name, URL, Address, City, Zip Code, password, Purpose->Client
Step 4- After than Click on online store
Step 5- Click on Online store -> Themes-> Customize (manage logo, Announcement)
Step 6- Access in Locally -> first intall Shopify Theme Kit-> https://shopify.dev/apps/tools, https://shopify.dev/themes/tools/theme-kit/getting-started
Step 7- What is liquid? https://shopify.github.io/liquid/ | https://www.shopify.in/partners/shopify-cheat-sheet
Ans- Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.
Liquid uses a combination of (objects, tags, and filters) inside template files to display dynamic content.
(a) Objects
Objects contain the content that Liquid displays on a page. Objects and variables are displayed when enclosed in double curly braces: {{ and }}.
Input
{{ page.title }}
Output = Introduction
(b) Tags
Tags create the logic and control flow for templates. The curly brace percentage delimiters {% and %} and the text that they surround do not produce any visible output when the template is rendered. This lets you assign variables and create conditions or loops without showing any of the Liquid logic on the page.
Input-
{% if user %}
Hello {{ user.name }}!
{% endif %}
Output = Hello Adam!
Tags can be categorized into various types:
b1.1- Control flow
b1.2-Iteration
b1.3- Template
b1.4- Variable assignment
(C) Filters
Filters change the output of a Liquid object or variable. They are used within double curly braces {{ }} and variable assignment, and are separated by a pipe character |.
Input
{{ "/my/fancy/url" | append: ".html" }}
Output
/my/fancy/url.html
Multiple filters can be used on one output, and are applied from left to right.
Input
{{ "adam!" | capitalize | prepend: "Hello " }}
Output
Hello Adam!
***************************************************************
---------------------------------------------------------------------------------------------
Step 1- How to create template in shopify
(page.abc-pratice.liquid)
Step 2- call sections in under template
{% section 'abc-pratice' %}
{% section 'image-text-custom' %}
Step 3- Put Content under 'abc-pratice' Section
<section class="welcome">
<div class="container pdp-web-banner-section">
<div class="row">
<div class="col-md-6 pdp-web-banner-section-1">
{{ section.settings.custom_image_1 | img_url: '2048x' | img_tag }}
</div>
<div class="col-md-6 pdp-web-banner-section-1">
<div class="welcome-outter">
<h1 class="section-large-heading">Heading</h1>
<p class="discription">Lorem ipsum is placeholder text commonly used...</p>
</div>
</div>
</div>
</div>
</section>
{% schema %}
{
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "custom_image_1",
"label": "Image"
}
],
"presets": [
{
"name": "Image",
"category": "Content"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Step 4- How to add Dynamic Image In Block
Put Where place you want to display:-
{{ section.settings.custom_image_1 | img_url: '2048x' | img_tag }}
Create Schema:-
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "custom_image_1",
"label": "Image"
}
],
============================================================================ HOW TO CREATE, theme, Index, Snippets, SECTION IN SHOPIFY
1- theme.liquid
{% comment %}
{{ content_for_layout }}
{% endcomment %}
2- index.liquid
{{ content_for_index }}
3- Call Section in theme.liquid
{% section 'header' %}
{% section 'footer' %}
4- IF else condition
{%- if request.page_type contains 'customers/' -%}
<script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>
{%- endif -%}
5- How to create snippets (best-rateing.liquid)
-----------------------------------
<section class="best-rated-section">
<div class="container">
<div class="best-rated-title">
<h2>We Provide The Sweetest Dreams!</h2>
<p class="one-line-decsription-new">For a good night’s sleep, pick the best rated mattresses.</p>
</div>
<div class="row">
<div class="col-4 col-md-4 best-rated">
<a href="https://doctordreams.com/apps/s/review"> <p><img data-srcset="//cdn.shopify.com/s/files/1/0248/7766/2271/files/Icon_G_F_DD-02.png?v=1623410816"
alt="google" itemprop="logo" class="lazyload"
data-sizes="auto" srcset="//cdn.shopify.com/s/files/1/0248/7766/2271/files/Icon_G_F_DD-02.png?v=1623410816"></p>
<span class="rating-count">4.7/5</span>
<p class="star-svg">{% include 'star-svg'%}</p>
<p class="review-number">250+ Reviews</p></a>
</div>
<div class="col-4 col-md-4 best-rated">
<a href="https://doctordreams.com/apps/s/review"> <p> <img data-srcset="//cdn.shopify.com/s/files/1/0248/7766/2271/files/Icon_G_F_DD-01.png?v=1623410816"
alt="doctor-dream" itemprop="logo" class="lazyload"
data-sizes="auto" srcset="//cdn.shopify.com/s/files/1/0248/7766/2271/files/Icon_G_F_DD-01.png?v=1623410816"></p>
<span class="rating-count">4.8/5</span>
<p class="star-svg">{% include 'star-svg'%}</p>
<p class="review-number">400+ Reviews</p> </a>
</div>
<div class="col-4 col-md-4 best-rated">
<a href="https://doctordreams.com/apps/s/review"> <p> <img data-srcset="//cdn.shopify.com/s/files/1/0248/7766/2271/files/Icon_G_F_DD-03.png?v=1623410816"
alt="facebook" itemprop="logo" class="lazyload facebook-logo"
data-sizes="auto" srcset="//cdn.shopify.com/s/files/1/0248/7766/2271/files/Icon_G_F_DD-03.png?v=1623410816"></p>
<span class="rating-count">5/5</span>
<p class="star-svg">{% include 'star-svg'%}</p>
<p class="review-number">300+ Reviews</p></a>
</div>
</div>
</div>
</section>
-------------------------------
6- Snippets call in home-slideshow.liquid section using include function
{% include 'best-rateing' %}
{% include 'Banner-combo-image' %}
7- (home-slideshow.liquid) Section
<section class="homepage-reviews" id="section-{{section.id}}">
<div class="container">
<div class="row">
{% if section.settings.title != blank %}
<div class="col-12 text-center">
<h2 class="main-title">
h12jnArtiivn
{% render 'multilang' with section.settings.title %}
</h2>
</div>
{% endif %}
</div>
<div class="reviews-social-section" >
{% comment %}
<ul class="rating_section1">
</ul>
{% endcomment %}
<div id="filter_add">
</div>
</div>
<div class="review-filter-block">
<div class="slider multiple-items review_html1">
</div>
</div>
<div class="text-center">
<a href="https://india.com/apps/s/review" class="btn secondary-button">Read More</a>
</div>
</div>
</section>
<style>
#section-{{section.id}}{
margin-top: {{ section.settings.space_on }}px;
margin-bottom: {{ section.settings.space_below }}px;
position: relative;
z-index: 1;
}
.video-ds .play-icon-ds {
position: absolute;
top: calc(50% - 10px);
align-items: center;
left: calc(50% - 10px);
}
.video-ds {
position: relative;
}
.video-ds .play-icon-ds div {
background-color: #ffffff;
border-radius: 20px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 10px 20px 0 rgb(0 0 0 / 20%);
}
</style>
{% schema %}
{
"name": "Customer Google Reviews",
"class": "homepage-reviews-sections",
"settings": [
{
"type": "range",
"id": "space_on",
"label": "Space on",
"min": 0,
"max": 100,
"step": 1,
"default": 20
},
{
"type": "range",
"id": "space_below",
"label": "Space below",
"min": 0,
"max": 100,
"step": 1,
"default": 25
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Customer Reviews"
},
{
"type": "select",
"id": "title_style",
"label": "Title Style:",
"options": [
{
"value": "style_1",
"label": "Style 1"
},
{
"value": "style_2",
"label": "Style 2"
}
],
"default": "style_1"
},
{
"type": "select",
"id": "per_row",
"label": "Customer review per row",
"options": [
{
"value": "1",
"label": "1"
},
{
"value": "2",
"label": "2"
},
{
"value": "3",
"label": "3"
},
{
"value": "4",
"label": "4"
},
{
"value": "5",
"label": "5"
}
],
"default": "3"
}
],
"blocks": [
{
"type": "Review",
"name": "Review",
"settings": [
{
"type" : "image_picker",
"id" : "reviews_image",
"label" : "Select Image"
},
{
"type" : "text",
"id" : "reviews_heading",
"label" : "Heading",
"default" : "Awesome..."
},
{
"type": "select",
"id": "rating",
"label": "Rating",
"options": [
{ "value": "star0", "label": "0 star" },
{ "value": "star1", "label": "1 star" },
{ "value": "star2", "label": "2 star" },
{ "value": "star3", "label": "3 star" },
{ "value": "star4", "label": "4 star" },
{ "value": "star5", "label": "5 star" }
],
"default": "star5"
},
{
"type" : "text",
"id" : "reviews_purchased_text",
"label" : "Purchased text",
"default" : "Purchased:"
},
{
"type" : "text",
"id" : "reviews_title",
"label" : "Title",
"default" : "Title"
},
{
"type" : "url",
"id" : "reviews_link",
"label" : "Link"
},
{
"type": "textarea",
"id": "body_review",
"label": "Content of Review",
"default": "Nam tempus turpis at metus scelerisque placerat nulla deumantos delo sollicitudin delos felis. Pellentesque diam dolor an elementum et lobortis at mollis ut risus. Curabitur semper sagittis mi condimentum..."
},
{
"type" : "text",
"id" : "name",
"label" : "Customer Name",
"default" : "Customer Name"
},
{
"type" : "text",
"id" : "date_review",
"label" : "Date",
"default" : "Wednesday, Jan 26, 2019"
}
]
}
],
"presets": [
{
"name": "Customer Google Reviews",
"category": "Reviews"
}
]
}
{% endschema %}
<script>
$('body').on('click', '.show_model_review', function() {
$("#youtube-preview-name").text("");
$("#youtube-preview-src").attr('src',"");
$("#youtube-preview-name").text($(this).data('review_title'));
$("#youtube-preview-src").attr('src',$(this).data('review_src'));
$("#myModal").modal('show');
});
$('body').on('hidden.bs.modal', '#myModal', function() {
$("#youtube-preview-name").text("");
$("#youtube-preview-src").attr('src',"");
});
$('document').ready(function(){
$.ajax({
url: 'https://middleware.doctordreams.com/api/review/filter/dynamic',
type: 'get',
success: function(resp){
if(resp.success == true){
$('#filter_add').html(resp.filter_html);
}
},
error:function(){
console.log('error');
}
});
$.ajax({
url: 'https://middleware.doctordreams.com/api/get/review/data1',
type: 'POST',
success: function(resp){
console.log("arti",resp)
if(resp.success == true){
$('.review_html1').html(resp.review_small_data);
slickSlider();
}
},
error:function(){
console.log('error');
}
});
function slickSlider(){
// slick slider
$('.multiple-items').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
dots: false,
prevArrow: '<button class="slide-arrow prev-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="40.163" height="46.18" viewBox="0 0 40.163 46.18"><defs><style>.a{fill:#083f88;}</style></defs><path class="as" d="M22.75,0,45.5,39.375H0Z" transform="matrix(-0.017, 1, -1, -0.017, 40.163, 0.687)"/></svg></button>',
nextArrow: '<button class="slide-arrow next-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="40.163" height="46.18" viewBox="0 0 40.163 46.18"><defs><style>.a{fill:#083f88;}</style></defs><path class="as" d="M22.75,0,45.5,39.375H0Z" transform="matrix(-0.017, 1, -1, -0.017, 40.163, 0.687)"/></svg></button>',
responsive: [
{
breakpoint: 992,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 400,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
}
});
</script>
---------------------------------------------------------------
How to call Dynamic Heading, Description, Image, Link in Blocks
----------------------------------------------------
<h2> {{ section.settings.fproduct_text_title }} </h2>
<div>{{ section.settings.fproduct_text_body }}</div>
------------------------------------------------
{%for block in section.blocks %}
<div class="col-6 col-md-3">
<div class="collection-item">
<div class="img-box banner-item">
<a href="{{ block.settings.link }}" title="">
<img src={{ block.settings.fproduct_image | img_url: "600x" }} />
</a>
</div>
</div>
</div>
{% endfor %}
{% schema %}
{
"name": "Family products",
"settings": [
{
"id": "fproduct_text_title",
"type": "text",
"label": "heading",
"default": "title"
},
{
"id": "fproduct_text_body",
"type": "richtext",
"label": "Add custom text below",
"default": "<p>Add your text here</p>"
}
],
"blocks": [
{
"type": "image_picker",
"name": "fproduct_image",
"settings": [
{
"id": "fproduct_image",
"type": "image_picker",
"label": "Select image"
},
{
"id": "link",
"type": "url",
"label": "Image link"
}
]
}
],
"presets": [
{
"name": "Family products section",
"category": "fproduct_image"
}
]
}
{% endschema %}
--------------------call image in section------------------------
<div>
<img class="desktop_img" src="https://cdn.shopify.com/s/files/1/0248/7766/2271/files/icefoam_1289X400-01.jpg?v=1650522831" alt="image1">
</div>
{% if section.settings.fproduct_image %}
<img src={{ section.settings.fproduct_image | img_url: "600x" }} />
{% endif %}
{
"id": "fproduct_image",
"type": "image_picker",
"label": "Select image"
}
=====================================================================================================
Custom color swatches Shopify
-----------------------------------------------------
(Snippets-> product-swatch.liquid)
https://www.nilkamalfurniture.com/products/nilkamal-rowan-shoe-cabinet-rack-walnut?variant=39651984015449
https://www.youtube.com/watch?v=UM-CLntvR5Q
https://community.shopify.com/c/shopify-design/product-pages-add-color-swatches-to-products/td-p/616427
Change image url
https://stackoverflow.com/questions/61315571/how-do-i-display-the-variant-image-when-the-color-swatch-of-a-variant-is-hovered
references-
https://shopwithcaa.com/collections/luggage-sets/products/swiss-gear-tyax-3-piece-expandable-hardside-luggage-set-online-only?variant=39558787203123
https://landmarkxcite.com/products/studiowest-lipbar-creme-lipstick-cbr-04
iPhone Menu
---------------------------------------
Nilkamal Furniture - 10 day 10 deals - 15/01/22
https://tympanus.net/Development/ResponsiveMultiLevelMenu/index3.html
https://www.homecentre.in/in/en/c/livingroom-sofas-sofasets
https://app.lambdatest.com/console/realtime
ajaxify cart msg
-----------------------------------------
https://community.shopify.com/c/shopify-design/product-pages-stay-on-the-product-page-after-adding-products-to/m-p/616440
https://www.youtube.com/watch?v=8_DA_cgOZq0
===============================================================================================================
vertical menu (How to add multlevel (4,5,6..etc) menu) using shopify handle (main menu(home,about,contact)->next->start home always)
=======================================================================================================
<div class="vertical-menu">
{% for link in linklists[vertical-menu].links %}
{% if linklists[link.handle] == empty %}
<li><a href="{{ link.url }}" class="top_link {% if link.active %}active{% endif %}" data-dropdown-rel="{{ link.handle }}">{{ link.title }}</a></li>
{% else %}
<li class="sublink"><a data-no-instant href="{{ link.url }}" class="dropdown_link--vertical {% if link.active %}active{% endif %}" data-dropdown-rel="{{ link.handle }}" data-click-count="0">{{ link.title }} <span class="icon-down-arrow"></span></a>
<ul class="vertical-menu_submenu newvermenu">
{% for link in linklists[link.handle].links %}
{% if linklists[link.handle] == empty %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% else %}
<li class="sublink newvermenu-sublink"><a data-no-instant href="{{ link.url }}" data-click-count="0">{{ link.title }} <span class="right icon-down-arrow"></span></a>
<ul class="vertical-menu_sub-submenu">
{% for link in linklists[link.handle].links %}
{% if linklists[link.handle] == empty %}
<li><a href="{{ link.url }}" >{{ link.title }}</a></li>
{% else %}
<li class="sublink"><a data-no-instant href="{{ link.url }}" data-click-count="0" class="lioneactivea">{{ link.title }} <span class="right icon-down-arrow"></span></a>
<ul class="vertical-menu_sub-submenu">
{% for link in linklists[link.handle].links %}
{% if linklists[link.handle] == empty %}
<li><a href="{{ link.url }}" >{{ link.title }}</a></li>
{% else %}
<li class="sublink"><a data-no-instant href="{{ link.url }}" data-click-count="0" class="litwoactivea">{{ link.title }} <span class="right icon-down-arrow"></span></a>
<ul class="vertical-menu_sub-submenu level3custommenu">
{% for link in linklists[link.handle].links %}
{% if linklists[link.handle] == empty %}
<li><a href="{{ link.url }}" >{{ link.title }}</a></li>
{% else %}
<li class="sublink"><a data-no-instant href="{{ link.url }}" data-click-count="0" class="lithreeactivea">{{ link.title }} <span class="right icon-down-arrow"></span></a>
<ul class="vertical-menu_sub-submenu level4custommenu">
{% for link in linklists[link.handle].links %}
<li><a href="{{ link.url }}" >{{ link.title }}</a></li>
{% endfor %}
</ul> </li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</div>
<script>
$(document).ready(function() {
if ($(this).hasClass("vertical-menu--align-right")) {
setTimeout(function () {
$(".vertical-menu .vertical-menu_submenu .vertical-menu_sub-submenu").removeClass("vertical-menu--align-right");
}, 10);
}
});
$('.vertical-menu_submenu ul').addClass(function(){
return "level-"+$(this).parents('ul').length;
});
$(".level4custommenu li:first-child a").addClass("lifouractivea ");
</script>
========================================================
tags according to page url
{% if product.handle contains 'at-home-gift-card' %}
<div class="select col-sm-6 col-md-6">
<select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id" class="testx multi_select">
{% for v in product.variants %}
<option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
{% endfor %}
</select>
</div>
{% endif %}
=======================================================
Add 3D in PDP page using url handle if tag
-----------------------------------------------
{% if product.handle contains 'nilkamal-double-pillow-top-bonnell-spring-mattress' %}
<div class="threed-title">
<h3>Know Your Mattress</h3>
<div class="d-flex layerDesc-block flex-column flex-md-row">
<div class="col-12 col-md-4 col-lg-6 col-xl-6 p-0">
<div class="imgLayeringWrap">
<div class="imgLayering" id="imglayr">
<img class="img-responsive alsoBuy-image vin-lazy-load img-fluid float-right layerImg" style="width:100%;height:auto;object-fit:cover;" data-src="https://cdn.shopify.com/s/files/1/0044/1208/0217/files/FDPT_layer.png?v=1650536562" alt="" src="https://cdn.shopify.com/s/files/1/0044/1208/0217/files/FDPT_layer.png?v=1650536562">
<div class="img-numLayering active" data-layer="layer-num-1">
<div class="layerImgWrap">
</div>
<div class="layerNum"><span>1</span></div>
</div>
<div class="img-numLayering" data-layer="layer-num-2">
<div class="layerImgWrap">
</div>
<div class="layerNum"><span>2</span></div>
</div>
<div class="img-numLayering" data-layer="layer-num-3">
<div class="layerImgWrap">
</div>
<div class="layerNum"><span>3</span></div>
</div>
<div class="img-numLayering" data-layer="layer-num-4">
<div class="layerImgWrap">
</div>
<div class="layerNum"><span>4</span></div>
</div>
<div class="img-numLayering" data-layer="layer-num-5">
<div class="layerImgWrap">
<div class="layerNum"><span>5</span></div>
</div>
</div>
<div class="img-numLayering" data-layer="layer-num-6">
<div class="layerImgWrap">
<div class="layerNum"><span>6</span></div>
</div>
</div>
<div class="img-numLayering" data-layer="layer-num-7">
<div class="layerImgWrap">
<div class="layerNum"><span>7</span></div>
</div>
</div>
<div class="img-numLayering" data-layer="layer-num-8">
<div class="layerImgWrap">
<div class="layerNum"><span>8</span></div>
</div>
</div>
<div class="img-numLayering" data-layer="layer-num-9">
<div class="layerImgWrap">
<div class="layerNum"><span>9</span></div>
</div>
</div>
<div class="img-numLayering" data-layer="layer-num-10">
<div class="layerImgWrap">
<div class="layerNum"><span>10</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-8 col-lg-6 col-xl-5 d-flex justify-content-center flex-direction-column">
<div class="layerDescAccordianWrap" id="layerDescAccordianW">
<div class="layerDescAccordian active" data-layer="layer-num-1">
<h4 class="layerDescAccordian-head" data-layer="layer-num-1">
<span class="textLayerNum"></span>Knitted Fabric
<i class="fa fa-caret-down"></i>
<i class="fa fa-caret-up"></i>
</h4>
<div class="layerDescAccordian-body">
Premium quality knitting creates a super smooth and comfortable outer fabric.
</div>
</div>
<div class="layerDescAccordian" data-layer="layer-num-2">
<h4 class="layerDescAccordian-head" data-layer="layer-num-2">
<span class="textLayerNum"></span>PU Foam Quilt & Soft Wadding
<i class="fa fa-caret-down"></i>
<i class="fa fa-caret-up"></i>
</h4>
<div class="layerDescAccordian-body">
Soft fabric, supportive foam, and thick cushioning combine to provide ultimate relaxing comfort.
</div>
</div>
<div class="layerDescAccordian" data-layer="layer-num-3">
<h4 class="layerDescAccordian-head" data-layer="layer-num-3">
<span class="textLayerNum"></span>Pure PU Foam
<i class="fa fa-caret-down"></i>
<i class="fa fa-caret-up"></i>
</h4>
<div class="layerDescAccordian-body">
Supportive and relaxing, foam supports your spine and muscles as you sleep.
</div>
</div>
<div class="layerDescAccordian" data-layer="layer-num-4">
<h4 class="layerDescAccordian-head" data-layer="layer-num-4">
<span class="textLayerNum"></span>Cotton Felt
<i class="fa fa-caret-down"></i>
<i class="fa fa-caret-up"></i>
</h4>
<div class="layerDescAccordian-body">
Lightweight cotton fabric provides excellent padding and comfort.
</div>
</div>
<div class="layerDescAccordian" data-layer="layer-num-5">
<h4 class="layerDescAccordian-head" data-layer="layer-num-5">
<span class="textLayerNum"></span>Nylon Mesh
<i class="fa fa-caret-down"></i>
<i class="fa fa-caret-up"></i>
</h4>
<div class="layerDescAccordian-body">
Durable fabric that wicks away moisture and improves breathability.
</div>
</div>
<div class="layerDescAccordian" data-layer="layer-num-6">
<h4 class="layerDescAccordian-head" data-layer="layer-num-6">
<span class="textLayerNum"></span>Bonnell Springs
<i class="fa fa-caret-down"></i>
<i class="fa fa-caret-up"></i>
</h4>
<div class="layerDescAccordian-body">
Bouncy, pressure-absorbing springs encourage elevation and support.
</div>
</div>
<div class="layerDescAccordian" data-layer="layer-num-7">
<h4 class="layerDescAccordian-head" data-layer="layer-num-7">
<span class="textLayerNum"></span>Nylon Mesh
<i class="fa fa-caret-down"></i>
<i class="fa fa-caret-up"></i>
</h4>
<div class="layerDescAccordian-body">
Durable fabric that wicks away moisture and improves breathability.
</div>
</div>
<div class="layerDescAccordian" data-layer="layer-num-8">
<h4 class="layerDescAccordian-head" data-layer="layer-num-8">
<span class="textLayerNum"></span>Cotton Felt
<i class="fa fa-caret-down"></i>
<i class="fa fa-caret-up"></i>
</h4>
<div class="layerDescAccordian-body">
Lightweight cotton fabric provides excellent padding and comfort.
</div>
</div>
<div class="layerDescAccordian" data-layer="layer-num-9">
<h4 class="layerDescAccordian-head" data-layer="layer-num-9">
<span class="textLayerNum"></span>Pure PU Foam
<i class="fa fa-caret-down"></i>
<i class="fa fa-caret-up"></i>
</h4>
<div class="layerDescAccordian-body">
Supportive and relaxing, foam supports your spine and muscles as you sleep.
</div>
</div>
<div class="layerDescAccordian" data-layer="layer-num-10">
<h4 class="layerDescAccordian-head" data-layer="layer-num-10">
<span class="textLayerNum"></span>PU Foam Quilt & Soft Wadding
<i class="fa fa-caret-down"></i>
<i class="fa fa-caret-up"></i>
</h4>
<div class="layerDescAccordian-body">
Soft fabric, supportive foam, and thick cushioning combine to provide ultimate relaxing comfort.
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
--------------------------------------------------------
<script>
$('.img-numLayering,.layerDescAccordian').click(function(){
var fav=$(this).data("layer");
$(".layerDescAccordian").removeClass('active');
$(".img-numLayering").removeClass('active');
// $("[data-layer='"+ fav +"']").addClass('img-numLayering active');
$("[data-layer='"+ fav +"']").addClass('active');
//$('.img-numLayering[data-layer="'+fav+'"]').addClass('active');
});
</script>
<style>
.layerDescAccordian-body {
display: none;
}
.layerDescAccordian.active .layerDescAccordian-body {
display: block;
color: #404041;
font-family: 'gothamRounded-medium';
font-size: 16px;
}
.layerDescAccordian {
cursor: pointer;
margin-bottom: 15px;
}
.layerDescAccordian.active i.fa.fa-caret-down {
display: none;
}
.layerDescAccordian i.fa.fa-caret-up {
display: none;
}
i.fa.fa-caret-down, i.fa.fa-caret-up {
float: right;
}
.layerDescAccordian.active i.fa.fa-caret-up {
display: block;
}
</style>
--------------------------------------------------------------
.number-3d-layer span{
background-color: orange;
padding: 10px 17px;
color: #fff;
border-radius: 50%;
}
.number-3d-layer{
text-align: center;
position: absolute;
right: 29%;
margin-top: 40px;
}
.image-3d-layer{
max-width: 80%;
}
.imgLayeringWrap {
padding: 0 0;
left: -200px;
position: relative;
width: 780px;
}
.imgLayering {
position: absolute;
}
.img-numLayering:nth-child(1) {
top: 0px;
z-index: 8;
}
.img-numLayering {
position: relative;
}
.img-numLayering.active .layerImgWrap {
cursor: pointer;
transform: scale(1.02);
}
.img-numLayering .layerImgWrap {
transform: scale(1);
transition: opacity 1s ease,transform 1s ease;
}
.img-numLayering .layerNum {
margin-top: -54px;
}
.img-numLayering .layerNum {
right: 80px;
}
.img-numLayering .layerNum {
position: relative;
right: 80px;
float: right;
z-index: 20;
height: 0;
margin-top: -42px;
width: 30px;
}
.img-numLayering.active .layerNum::before {
width: 280px;
}
.layerNum::before {
content: '';
width: 0;
border-bottom: solid 1px #023e88;
position: absolute;
z-index: 1;
right: 100%;
top: 15px;
display: none;
position: relative;
left: 0;
transition: width 1s ease;
display: block;
}
.img-numLayering .layerNum span::before, .img-numLayering .layerNum span::after {
display: block;
box-shadow: transparent 0 0 0.1875rem 0.1875rem;
width: 3rem;
height: 3rem;
margin-left: -0.5rem;
margin-top: -0.5rem;
content: "";
border: 4px double transparent;
border-radius: 100%;
position: absolute;
opacity:0.2;
}
.img-numLayering.active .layerNum span::after {
animation-name: borderEff2;
}
.img-numLayering:hover .layerNum span::before, .img-numLayering:hover .layerNum span::after, .img-numLayering.active.layerNum span::before, .img-numLayering.active .layerNum span::after {
box-shadow: #023e88 0 0 0.1875rem 0.1875rem;
border-color: #023e88;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
animation-name: borderEff1;
}
.img-numLayering .layerNum span::before, .img-numLayering .layerNum span::after {
display: block;
box-shadow: transparent 0 0 0.1875rem 0.1875rem;
width: 3rem;
height: 3rem;
margin-left: -0.5rem;
margin-top: -0.5rem;
content: "";
border: 4px double transparent;
border-radius: 100%;
position: absolute;
}
.img-numLayering.active .layerNum span {
cursor: pointer;
background: #0093dd;
color: #fff;
}
.img-numLayering .layerNum span {
width: 2rem;
height: 2rem;
z-index: 1;
line-height: 35px;
background: #fff;
color: #023e88;
text-align: center;
display: grid;
vertical-align: bottom;
border-radius: 100%;
transition: background 0.4s ease,color 0.4s ease;
position: relative;
}
.img-numLayering .layerNum {
position: relative;
right: 80px;
float: right;
z-index: 20;
height: 0;
margin-top: -32px;
width: 30px;
}
.img-numLayering:nth-child(2) {
top: -512px;
z-index: 7;
left: -300px;
}
.img-numLayering:nth-child(3) {
top: -468px;
z-index: 6;
left: -59px;
}
.img-numLayering:nth-child(4) {
top: -406px;
z-index: 5;
left: -300px;
}
.img-numLayering:nth-child(5) {
top: -406px;
z-index: 4;
left: -63px;
}
.img-numLayering:nth-child(6) {
top: -354px;
z-index: 3;
left: -158px
}
.img-numLayering:nth-child(7) {
top: -297px;
z-index: 2;
left: -317px
}
.img-numLayering:nth-child(8) {
top: -333px;
z-index: 1;
left: -48px;
}
.img-numLayering:nth-child(9) {
top: -235px;
z-index: 1;
left: -313px;
}
.img-numLayering:nth-child(10) {
top: -248px;
z-index: 1;
left: -48px;
}
.img-numLayering:nth-child(11) {
top: -134px;
z-index: 1;
left: -314px
}
.layerDescAccordianWrap {
max-width: 555px;
margin-top: 0;
top: 0;
padding-bottom: 70px;
background: #fff;
z-index: 20;
padding-left: 10px;
}
.wrapper-header-bt {
z-index: 999 !important;
}
h4.layerDescAccordian-head {
margin-bottom: 0px;
color: #0093dd;
font-size: 22px;
text-transform: capitalize;
}
@media only screen and (max-width: 540px){
.imgLayeringWrap {
padding: 15px 15px 0px;
}
}
@media only screen and (max-width: 767px){
.imgLayeringWrap {
left: 0px;
width: 100%;
display: grid;
max-width: 540px;
margin: auto;
padding: 25px 25px 0px;
}
}
@media only screen and (max-width: 540px){
.img-numLayering:nth-child(2) {
top: -233px!important;
left: -76px;
}
}
@media only screen and (max-width: 540px){
.img-numLayering:nth-child(1) {
top: 0px;
}
}
@media only screen and (max-width: 450px){
.img-numLayering:nth-child(3) {
top: -208px!important;
left: 0;
}
.img-numLayering:nth-child(4) {
top: -178px!important;
left: -75px;
}
.img-numLayering:nth-child(5) {
top: -184px!important;
left: -167px;
}
.img-numLayering:nth-child(6) {
top: -163px!important;
left: 15px;
}
.img-numLayering:nth-child(7) {
top: -145px!important;
left: -77px;
}
.img-numLayering:nth-child(8) {
top: -142px!important;
left: -21px;
}
.img-numLayering:nth-child(9) {
top: -143px!important;
left: -193px;
}
.img-numLayering:nth-child(10) {
top: -80px!important;
left: -86px;}
.img-numLayering:nth-child(11) {
top: -102px!important;
left: 26px;}}
@media only screen and (max-width: 540px){
.layerDescWrap .layerDescAccordianWrap {
padding: 13px 24px 30px;
}
}
@media only screen and (max-width: 767px){
.layerDescWrap .layerDescAccordianWrap {
max-width: none;
z-index: -1;
position: relative;
margin-top: -7px;
margin-bottom: 26px;
padding: 8px 24px 12px;
background: rgb(243, 249, 249);}
.header-bottom { z-index: 999 !important;}
.layerNum::before {border-bottom: none;}
.layerDescAccordianWrap{padding-bottom: 0px;}
.img-numLayering.active .layerNum span::after, .img-numLayering.active.layerNum span::before, .img-numLayering:hover .layerNum span::after, .img-numLayering:hover .layerNum span::before {
box-shadow: #023e88 0 0 0.1875rem 0.1875rem;
border-color: #023e88;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
animation-name: borderEff1;
}
.layerDescAccordian {
display: none;
}
.layerDescAccordian.active {
display: block;
}
}
.threed-title h3{
font-size: 44px;
font-weight: 400;
line-height: 60px;
margin-bottom: 30px;
display: inline-block;
color: #0093dd;
text-align: center;
margin-top: 30px;
text-transform: capitalize;
}
.threed-title {
text-align: center;
}
.svgclr {
fill: white !important;
}
.wishdot {
position: absolute;
right: -4px;
top: -6px;
min-width: 14px;
min-height: 18px;
text-align: center;
padding: 2px 0 0 1px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
z-index: 2;
background-color: #1e1e1e;
color: #ffffff;}
.awrap {
position: relative;
}
@media only screen and (max-width: 540px){
.img-numLayering:nth-child(1) {
top: 0px !important;
}
body#buy-plus-orthopaedic-mattress-online-doctor-dreams .img-numLayering:nth-child(1) {
top: 0px;}
}
.imgcls {
min-height: inherit;
object-fit: unset;
width: 425px;
height: 300px;
max-height: 100%;}
body#buy-nilkamal-flora-double-pillow-top-bonnell-spring-mattress-online .imgLayeringWrap { left: -69px;}
.imgLayering img {width: 90% !important;}
@media only screen and (max-width: 767px){
body#buy-nilkamal-flora-double-pillow-top-bonnell-spring-mattress-online .imgLayeringWrap {
left: 0px;
}
.imgLayering img {width: 100%!important;}
.imgLayering {position: relative;top: 0%; margin-bottom: -40px;}}
=======================================================================
Learn Practical Liquid
------------------------------------------page.demo.liquid------------------------
<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>Liquid {{ page.title }} </h1>
</div>
<div class="rte">
<!-- assign variable here -->
{% assign my_variable = "This is my variable" %}
{% comment %} Print variable here {% endcomment %}
{{ my_variable }}
<!-- using capture variable here -->
{% capture about_me %}
I am Lalit and {{ my_variable }}.
{% endcapture %}
<!-- echo capture object -->
<div> {{ about_me }} </div>
<br>
{% assign num1 = 20 %}
{% assign num2 = 40 %}
Addition = {{ num1 | plus: num2 }}
<br>
Subtraction = {{ num2 | minus: num1 }}
<br>
Multiplication = {{ num1 | times: num2 }}
<br>
Division = {{ num2 | divided_by: num1 }}
<br>
{% if num2 > num1 %}
Greater than number is {{ num2 }}
{% else %}
Greater than number is {{ num1 }}
{% endif %}
<br> <br>
{% assign color = "blue" %}
{% case color %}
{% when "red" %}
Color is {{ color }}
{% when "blue" %}
Color is {{ color }}
{% when "green" %}
Color is {{ color }}
{% else %}
None of the above
{% endcase %}
<br><br>
<!---for loop---->
{% for i in (1..5) %}
The number is : {{ i }} <br>
{% endfor %}
<br>
<!-- use dynamic page object------>
<div> {{ page.title }} </div>
<div> {{ page.content }} </div>
<div> Handle = {{ page.handle }} </div>
<br>
<!-- tags according to page url------>
{% if page.handle contains 'demo' %}
Hi this is a demo.
{% endif %}
<br> <hr>
<!-- call sections------>
{% section 'demo_text' %}
</div>
</div>
</div>
</div>
-------------------------------------------Create Section (demo_text.liquid)-------------------------------------
<!--<div> Section is here</div>-->
{% if section.settings.enable_heading %}
<h4 class="custom_heading" style="text-align: {{ section.settings.text_position }}"> {{ section.settings.text_id }} </h4>
{% endif %}
{% if section.settings.myimage %}
<img src="{{ section.settings.myimage | img_url: "800x" }}" alt="img">
{% endif %}
<hr>
<div class="gallery">
{% for block in section.blocks %}
<div class="gallery_item">
{% if block.settings.enable_gallery_img %}
<img src="{{ block.settings.gallery_image | img_url: "400x" }}" alt="gallery img">
{% endif %}
</div>
{% endfor %}
</div>
{% schema %}
{
"name": "Demo page text",
"settings": [
{
"type": "text",
"id": "text_id",
"label": "Enter text",
"default": "Section Heading is here"
},
{
"type": "checkbox",
"id": "enable_heading",
"label": "Enter your text",
"default": true
},
{
"type": "select",
"id": "text_position",
"label": "Position your text",
"options": [
{"value": "left", "label": "Left" },
{"value": "center", "label": "Center" },
{"value": "right", "label": "Right" }
],
"default": "left"
},
{
"type": "image_picker",
"id": "myimage",
"label": "Select image"
}
],
"blocks": [
{
"type": "gallery",
"name": "gallery",
"settings": [
{
"type": "checkbox",
"id": "enable_gallery_img",
"label": "Enable Gallery Image",
"default": true
},
{
"type": "image_picker",
"id": "gallery_image",
"label": "Gallery image"
}
]
}
],
"presets": [
{
"name": "My Custom Text",
"category": "text",
"blocks": [
{
"type": "gallery"
}
]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
https://www.shopify.com/partners/shopify-cheat-sheet
https://www.yahoobaba.net/
