ADD IMAGE SWATCH VARIANT IN SHOPIFY DEBUT THEME

-

-------------------------------------------------------------------------------------------------------------------
STEP 0
CREATE NEW SNIPPET productOption.liquid CODE
AND MAKE FILE IN ASSETS FOLDER
Need Files
lodash.min.js
<script src="{{'Lodash.js'|asset_url}}" defer="defer"></script>
https://cdnout.com/cdn/lodash.js@4.5.1/
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.5.1/lodash.min.js"></script>
queryParams.js
<script src="https://cdn.jsdelivr.net/npm/backbone-query-parameters@0.4.0/backbone.queryparams.min.js"></script>
Tocca.min.js
https://shopifyjs.blogspot.com/2021/12/toccaminjs.html
<script src="https://cdn.jsdelivr.net/npm/tocca@2.0.9/Tocca.min.js"></script>
jquery.ba-throttle-debounce.min.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
api.jquery.js
SwatchTheme.css
READ MORE
Positioning Tooltips
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tooltip_pos&stacked=h
-------------------------------------------------------------------------------------------------------------------
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.5.1/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/backbone-query-parameters@0.4.0/backbone.queryparams.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tocca@2.0.9/Tocca.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<script src="{{ 'api.jquery.js' | shopify_asset_url }}" defer="defer"></script>
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<link href='{{ 'SwatchTheme.css' | asset_url }}' rel='stylesheet' type='text/css' media='all' />



{% if section.settings.product_selector == 'radio' %}
{% assign isColor = false %}
{% assign optionName = option.name | handleize %}
{% if optionName contains 'colo' %}
{% assign isColor = true %}
{% endif %}
<fieldset class="single-option-radio"
name="{{ option.name | handleize }}"
id="ProductSelect-option-{{ forloop.index0 }}">
{% assign option_index = forloop.index %}
{% for value in option.values %}
{% assign variant_label_state = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available  %}
{% assign variant_label_state = false %}
{% endunless %}
{% endif %}
{% for variant in product.variants  %}
{% assign vOption = 'option' | append: option_index %}
{% if value ==  variant[vOption] %}
{% assign currenVariant = variant %}
{% break %}
{%  endif %}
{% endfor %}
{% assign hasImage = false %}
{% if isColor and currenVariant.image %}
{% assign hasImage = true %}
{% endif %}
<input type="radio"
{% if option.selected_value == value %} checked="checked"{% endif %}
{% unless variant_label_state %} disabled="disabled"{% endunless %}
value="{{ value | escape }}"
data-index="option{{ option_index }}"
name="{{ option.name | handleize }}"
class="single-option-selector-{{ section.id }} single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
<label {% if hasImage %}data-tooltip="true" title="{{ value | escape }}" style="background-image:url({{currenVariant.image.src | img_url:'100x'}})"{% endif %}
for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>
{% unless hasImage %}{{ value | escape }}{% endunless %}
</label>
{% endfor %}
</fieldset>
{% else %}
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
id="SingleOptionSelector-{{ forloop.index0 }}"
data-name="{{ option.name }}"
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>
{% endif %}
<!-- https://highlight.hohli.com/index.php 🍟below highlight code🥪 -->
<style>
[title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[title]:after {
content: attr(title);
background-color: #00FF00;
color: #111;
font-size: 150%;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -1.6em;
left: 100%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
[title] {
position: relative;
}
</style>
<!-- https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=enable-tooltips-via-jquery -->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"><!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Some custom styles to beautify this example */
.bs-example{
margin: 60px 0;
}
a, button{
margin-right: 30px;
}
i{
font-size: 22px;
}
</style>
<script>
$(document).ready(function(){
$('[data-tooltip="true"]').tooltip();
});
</script>
-------------------------------------------------------------------------------------------------------------------
SwatchTheme.css
-------------------------------------------------------------------------------------------------------------------
.show {
display: block!important
}
.hide {
display: none!important
}
body,button,input,select,textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%
}
img {
max-width: 100%;
border: 0
}
.single-option-radio {
border: 0;
padding: 0;
margin: 0;
position: relative
}
.single-option-radio input {
clip: rect(0 0 0 0);
clip: rect(0,0,0,0);
overflow: hidden;
position: absolute;
height: 1px;
width: 1px
}
.single-option-radio label {
position: relative;
display: inline-block;
line-height: 35px;
padding: 0 6px;
margin: 3px 4px 7px 0;
background-color: #fff;
border: 2px solid #fff;
color: var(--g-main);
background-position: center;
background-size: cover;
min-width: 50px;
text-align: center;
height: 35px;
vertical-align: middle
}
.single-option-radio label.disabled:before {
position: absolute;
content: "";
left: 50%;
top: 0;
bottom: 0;
border-left: 1px solid;
border-color: var(--g-main);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
.single-option-radio input[type=radio]:checked+label {
border-color: var(--g-main);
color: var(--g-main);
border-radius: 4px
}
.single-option-radio input[type=radio]:focus+label {
background-color: #f2f2f2
}
/*!
* Bootstrap v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* https://getbootstrap.com/docs/4.3/getting-started/download/
* Licensed under MIT (https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css)
*/
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
}
*,::after-
@media (min-width: 768px) {
.col-md {
-ms-flex-preferred-size:0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%
}
.col-md-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: 100%
}
.col-md-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%
}
.col-md-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%
}
.col-md-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.col-md-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%
}
.col-md-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%
}
.col-md-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.col-md-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%
}
.col-md-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%
}
.col-md-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
.col-md-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%
}
.col-md-11 {
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%
}
.col-md-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
}
.fade {
transition: opacity .15s linear
}
@media (prefers-reduced-motion:reduce) {
.progress-bar-animated {
-webkit-animation: none;
animation: none
}
}

.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px
}
/*# sourceMappingURL=/s/files/1/0042/9811/3117/t/203/assets/SwatchTheme.css.map?v=867796768445340749 */
-------------------------------------------------------------------------------------------------------------------
CHANGE ALL CODE IN SECTION FOLDER FILE  product-template.liquid
-------------------------------------------------------------------------------------------------------------------
<!-- product-template.liquid -->

<div class="container js-recently-view" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true" data-ajax="true" data-stock="{{ section.settings.stock_enable }}" data-handle="{{product.handle}}">
{%- assign product_image_size = '480x480' -%}
{%- assign current_variant = product.selected_or_first_available_variant -%}

<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"
data-image-id="{{ image.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 }}">
</div>
{%- endfor -%}

<div class="selector-wrapper js product-form__item"style="margin-left:100px">
{%- form 'product', product, class:form_class, id:form_id -%}
{%- unless product.has_only_default_variant -%}
{%- for option in product.options_with_values -%}
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
{%- include 'productOption' -%}
{%- endfor -%}
{%- endunless -%}

<select name="id" id="ProductSelect-{{ section.id }}" class="">
{%- 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>
{%- endform -%}
</div>

</div>
</div>

</div>
</div>

{% schema %}
{
"name": {
"en": "Product pages"
},
"settings": [
//==========ColorCodeStartUnderSetting==========//
{
"type": "checkbox",
"id": "product_type_enable",
"label": "Show product type",
"default": true
},
{
"type": "checkbox",
"id": "variant_sku_enable",
"label": "Show variant sku",
"default": true
},
{
"type": "checkbox",
"id": "variant_available_enable",
"label": "Show variant availability",
"default": true
},
{
"type": "select",
"id": "product_selector",
"label": "Option type",
"options": [
{
"value": "radio",
"label": "Button"
},
{
"value": "select",
"label": "Dropdown"
}
]
}
//==========ColorCodeEndUnderSetting==========//
]
}
{% endschema %}
 
{%- unless product == empty -%}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{%- endunless -%}
-------------------------------------------------------------------------------------------------------------------
CHANGE CODE  IN ASSET FOLDER FILE  theme.js
Theme.js

IF YOU DON'T CHANGE THEME JS FILE SO MAKE JS LIQUID FILE Swatch.js.liquid IN ASSET FOLDER
ADD LIQUID FILE LINK IN LAYOUT THEME LIQUID FILE
  <script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
 <script src="{{ 'Swatch.js' | asset_url }}" defer="defer"></script>
-------------------------------------------------------------------------------------------------------------------
iFrames SLATE RATE CODE CHANGE
-------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------
SLATE VARIANT SELECTION CODE CHANGE
slate.Variants = (function() {↔})();
https://shopifyjs.blogspot.com/2021/12/themejs_27.html
-------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------
SECTION PRODUCT THEME CODE CHANGE

theme.Product = (function() {↔})();

https://shopifyjs.blogspot.com/2021/12/themejs-theme-product-change.html
-------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------
ADD SWATCH  CARD AND NOTICE SOLDOUT CODE AFTER THEME INT
-------------------------------------------------------------------------------------------------------------------
theme.init = function() {↔};

https://shopifyjs.blogspot.com/2021/12/themejs-add-code-after-theme-int.html
-------------------------------------------------------------------------------------------------------------------


Comments

Post a Comment

Popular posts from this blog

ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY DEBUT THEME 5️⃣

-
Image
  ------------------------------------------------------------------------------------------------------------------------ ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY READ MORE https://youtu.be/acTT5_lkrCg https://stackoverflow.com/questions/45477730/ajax-jquery-autocomplete-in-search-box-shopify https://stackoverflow.com/questions/39593169/sorting-json-results-by-10-max-results DOWNLOAD: https://fbgadgets.myshopify.com/admin/files/0e841afc73cd3152ebf447feabe7abfa/theme_export__fbgadgets-myshopify-com-shopify-debut-theme__05JUL2022-0654am.zip/download ------------------------------------------------------------------------------------------------------------------------ 1) NEEDS JQUERY FILE WITHOUT ASYNC OR DEFFER IN LINK LIKE <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> --> OR CHANGE VENDOR JS FILE LINK IN  LAYOUT>THEME LIQUID FILE <script src="{{ 'vendor.js' | asset_url }}"></script> ...
Read more