ADD PRODUCT THUMBANAIL OWL SCROLLER CAROUSEL IN SHOPIFY

 

-----------------------------------------------------------------------------------------------------------------
OR USE THIS CODE
OR USE CDN ALL CSS FILE READ MORE

🅰🅻🅻🅼🅸🅽🅲🆂🆂 🅵🅸🅻🅴 🆁🅴🅿🅻🅰🅲🅴🅼🅴🅽🆃

https://cdnjs.com/libraries/font-awesome
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css
<script src='https://use.fontawesome.com/826a7e3dce.js'></script>

WITHOUT FONT FILE ALL MIN FILE OR JS FONT FILE USE THIS LINE

navText: ['<img src="https://www.isagenix.com/Assets/images/icon-arrow-left_lg.svg"width="48" height="48"/>', '<img src="https://www.isagenix.com/Assets/images/icon-arrow-right_lg.svg" width="48" height="48"/>'],

READ MORE:

https://www.youtube.com/watch?v=g9z0BlmWvps

🅾🆆🅻 🅲🅰🆁🅾🆄🆂🅴🅻 🅵🅸🅻🅴🆂

https://shopifyjs.blogspot.com/2021/03/owl-carousel-css-or-js-files.html
-------------------------------------------------------------------------------------------------------------------

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js'></script>
<!--❤❤FOR ARROW AND FONT ERROR CONTROL FILES all.min.css AND theme-custom.css❤❤-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<style>
/* {{'theme-custom.css' | asset_url | stylesheet_tag }} */
/* 🅲🅾🅳🅴 🅵🆁🅾🅼 🆃🅷🅴🅼🅴 🅲🆄🆂🆃🅾🅼 🅲🆂🆂 */
.owl-nav div {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.owl-nav div {
background: none;
color: #fff;
cursor: pointer;
display: block;
font-size: 30px;
height: 40px;
left: 0;
line-height: 40px;
opacity: 0;
position: absolute;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;
width: 40px;
z-index: 8;
color: #222222;
}
.owl-nav div:hover {
background: none;
color: #79a206;
}
.owl-nav div.owl-next {
right: 0;
left: auto;
}
.owl-carousel:hover .owl-nav div {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.owl-nav div {
font-size: 50px;
height: 50px;
line-height: 50px;
width: 50px;
}
.owl-stage-outer {
padding: 10px;
margin: -20px -10px; 
}
.owl-stage-outer .owl-item {
padding: 10px; 
}
i.fa.fa-angle-right {

/* 🅼🅰🆁🅶🅸🅽🅰🆁🆁🅾🆆🆂🅿🅰🅸🅽🅲🅸🅽🅶 */
margin-right:-30px;
position: relative;
}
</style>

<div class="product-template__container page-width"
id="ProductSection-{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="product"
data-enable-history-state="true"
>
{% comment %}
Get first variant, or deep linked one
{% endcomment %}
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign product_image_scale = '2' -%}
{%- assign enable_zoom = section.settings.enable_zoom -%}
{%- assign compare_at_price = current_variant.compare_at_price -%}
{%- assign price = current_variant.price -%}
{% case section.settings.image_size %}
{% when 'small' %}
{%- assign product_image_width = 'medium-up--one-third' -%}
{%- assign product_description_width = 'medium-up--two-thirds' -%}
{%- assign product_thumbnail_width = 'medium-up--one-third' -%}
{%- assign height = 345 -%}
{% when 'medium' %}
{%- assign product_image_width = 'medium-up--one-half' -%}
{%- assign product_description_width = 'medium-up--one-half' -%}
{%- assign product_thumbnail_width = 'medium-up--one-quarter' -%}
{%- assign height = 530 -%}
{% when 'large' %}
{%- assign product_image_width = 'medium-up--two-thirds' -%}
{%- assign product_description_width = 'medium-up--one-third' -%}
{%- assign product_thumbnail_width = 'medium-up--one-fifth' -%}
{%- assign height = 720 -%}
{% when 'full' %}
{%- assign product_image_width = '' -%}
{%- assign product_description_width = '' -%}
{%- assign product_thumbnail_width = 'medium-up--one-eighth' -%}
{%- assign height = 1090 -%}
{%- assign enable_zoom = false -%}
{% endcase %}
<div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.image_size }}-image{% endif %}">
<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
{% for image in product.images %}
{% capture img_id %}FeaturedImage-{{ section.id }}-{{ image.id }}{% endcapture %}
{% capture img_class %}product-featured-img{% endcapture %}
{% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
{% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with small_style: true, width: height, height: height, wrapper_id: img_wrapper_id, img_id: img_id %}
<div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">
<div
id="{{ zoom_img_id }}"
style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"
class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}"
data-image-id="{{ image.id }}"
{% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<img id="{{ img_id }}"
class="feature-row__image {{ img_class }} lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
src="{{ image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
tabindex="-1"
alt="{{ image.alt | escape }}">
</div>
</div>
{% endfor %}
<noscript>
{% capture product_image_size %}{{ height }}x{% endcapture %}
<img src="{{ featured_image | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_image.alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img" style="max-width: {{ height }}px;">
</noscript>
{% if product.images.size > 1 %}
{% if product.images.size > 3 %}
{%- assign enable_thumbnail_slides = true -%}
{% endif %}
<div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }} ">
{% include 'icon-chevron-left' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
</button>
{% endif %}
<ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}🅰🅳🅳 🅾🆆🅻 🅲🅰🆁🅾🆄🆂🅴🅻 🅲🅻🅰🆂🆂  active_thumb_carousel owl-carousel">
{% for image in product.images %}
<li class="grid__item 🆁🅴🅼🅾🆅🅴🅲🆂🆂🅲🅻🅰🆂🆂🅿🅰🆁🆃🅷🅴🆁🅴 product-single__thumbnails-item js">
<a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
data-thumbnail-id="{{ image.id }}"
{% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<img class="product-single__thumbnail-image" src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: image.alt | escape }}">
</a>
</li>
{% endfor %}
</ul>
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
{% include 'icon-chevron-right' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
</button>
{% endif %}
</div>
{% endif %}
</div>
<div class="grid__item {{ product_description_width }}">
<div class="product-single__meta">
<h1 class="product-single__title">{{ product.title }}</h1>
<div class="product__price">
{% include 'product-price', variant: current_variant %}
</div>
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte">
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}
{% if section.settings.show_quantity_selector %}
<div id="error-quantity-{{ section.id }}" class="form-message form-message--error product__quantity-error hide" tabindex="-1">
{% include 'icon-error' %} {{ 'products.product.quantity_minimum_message' | t }}
</div>
{% endif %}
{% capture "form_classes" -%}
product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}{% if section.settings.enable_payment_button and product.has_only_default_variant%} product-form--payment-button-no-variants{% endif %}
{%- endcapture %}
{% form 'product', product, class:form_classes, novalidate: 'novalidate' %}
{% 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-{{ 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 %}
<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-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ section.id }}" 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 %}">
<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>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}
</div>
{%- comment -%}
Live region for announcing updated price and availability to screen readers
{%- endcomment -%}
<p class="visually-hidden" data-product-status
aria-live="polite"
role="status"
></p>
<div class="product-single__description rte">
{{ product.description }}
</div>
{% if section.settings.show_share_buttons %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
</div>
{% if collection %}
<div class="text-center return-link-wrapper page-width">
<a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
{% include 'icon-arrow-left' %}
{{ 'products.product.back_to_collection' | t: title: collection.title }}
</a>
</div>
{% endif %}

{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% endunless %}
<script>
$('.active_thumb_carousel').owlCarousel({
loop: false,
nav: true,
dots:false,
// 🅼🅰🆁🅶🅸🅽🅸🆃🅴🅼🆂🆂🅿🅰🅸🅽🅲🅸🅽🅶
margin:-25,
autoplay: false,
autoplayTimeout: 5000,
navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
item: 4,
responsive: {
0: {
items: 2
},
480: {
items: 3
},
992: {
items: 3,
},
1170: {
items: 3,
},
1200: {
items: 3
}
}
});
</script>
{% schema %}
{
"name": {
"de": "Produktseiten",
"en": "Product pages",
"es": "Páginas de productos",
"fr": "Pages de produits",
"it": "Pagine di prodotto",
"ja": "商品ページ",
"pt-BR": "Páginas de produtos"
},
"settings": [
{
"type": "select",
"id": "image_size",
"label": {
"de": "Foto-Größe",
"en": "Image size",
"es": "Tamaño de la imagen",
"fr": "Taille des images",
"it": "Dimensione immagine",
"ja": "画像のサイズ",
"pt-BR": "Tamanho da imagem"
},
"options": [
{
"value": "small",
"label": {
"de": "Klein",
"en": "Small",
"es": "Pequeña",
"fr": "Petite",
"it": "Piccolo",
"ja": "小",
"pt-BR": "Pequeno"
}
},
{
"value": "medium",
"label": {
"de": "Mittel",
"en": "Medium",
"es": "Mediana",
"fr": "Moyenne",
"it": "Medio",
"ja": "中",
"pt-BR": "Médio"
}
},
{
"value": "large",
"label": {
"de": "Groß",
"en": "Large",
"es": "Grande",
"fr": "Grande",
"it": "Grande",
"ja": "大",
"pt-BR": "Grande"
}
},
{
"value": "full",
"label": {
"de": "Volle Breite",
"en": "Full-width",
"es": "Ancho completo",
"fr": "Pleine largeur",
"it": "Intera larghezza",
"ja": "全幅",
"pt-BR": "Largura completa"
}
}
],
"default": "medium"
},
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": {
"de": "Quantitäts-Auswahl anzeigen",
"en": "Show quantity selector",
"es": "Mostrar selector de cantidad",
"fr": "Afficher le sélecteur de quantité",
"it": "Mostra selettore quantità",
"ja": "数量セレクターを表示する",
"pt-BR": "Exibir seletor de quantidade"
},
"default": false
},
{
"type": "checkbox",
"id": "show_variant_labels",
"label": {
"de": "Varianten-Etiketten anzeigen",
"en": "Show variant labels",
"es": "Mostrar etiquetas de variantes",
"fr": "Afficher le nom des variantes",
"it": "Mostra etichette varianti",
"ja": "バリエーションのラベルを表示する",
"pt-BR": "Exibir etiquetas de variantes"
},
"default": true
},
{
"type": "checkbox",
"id": "show_vendor",
"label": {
"de": "Lieferanten anzeigen",
"en": "Show vendor",
"es": "Mostrar proveedor",
"fr": "Afficher les vendeurs",
"it": "Mostra fornitore",
"ja": "販売元を表示する",
"pt-BR": "Exibir fornecedor"
},
"default": false
},
{
"type": "checkbox",
"id": "enable_zoom",
"label": {
"de": "Foto-Zoom zulassen",
"en": "Enable image zoom",
"es": "Habilitar zoom de imagen",
"fr": "Activer le zoom d'image",
"it": "Abilita lo zoom dell'immagine",
"ja": "画像ズームを有効にする",
"pt-BR": "Ativar o zoom da imagem"
},
"default": true
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": {
"de": "Dynamischen Checkout Button anzeigen",
"en": "Show dynamic checkout button",
"es": "Mostrar botón de pago dinámico",
"fr": "Afficher le bouton de passage à la caisse dynamique",
"it": "Mostra pulsante di check-out dinamico",
"ja": "ダイナミックチェックアウトボタンを表示する",
"pt-BR": "Exibir botão dinâmico de finalização da compra"
},
"info": {
"de": "Jeder Kunde sieht seine bevorzugte Zahlungsmethode aus den in Ihrem Shop verfügbaren Zahlungsmethoden wie PayPal oder Apple Pay. [Mehr Infos](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"en": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"es": "Cada cliente verá su forma de pago preferida entre las disponibles en tu tienda, como PayPal o Apple Pay. [Más información](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"fr": "Chaque client verra son moyen de paiement préféré parmi ceux qui sont proposés sur votre boutique, tels que PayPal ou Apple Pay. [En savoir plus](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"it": "Ogni cliente vedrà il suo metodo di pagamento preferito tra quelli disponibili nel tuo negozio, come PayPal o Apple Pay. [Maggiori informazioni](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"ja": "PayPalやApple Payなど、ストアで利用可能な希望の決済方法がお客様に表示されます。[もっと詳しく] (https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"pt-BR": "Cada cliente verá seu método de pagamento preferido dentre os disponíveis na loja, como PayPal ou Apple Pay. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
},
"default": true
},
{
"type": "checkbox",
"id": "show_share_buttons",
"label": {
"de": "Buttons für Social Media anzeigen",
"en": "Show social sharing buttons",
"es": "Mostrar botones para compartir en redes sociales",
"fr": "Affichez les boutons de partage sur les médias sociaux",
"it": "Mostra i pulsanti per la condivisione sui social",
"ja": "ソーシャル共有ボタンを表示する",
"pt-BR": "Exibir botões de compartilhamento em redes sociais"
},
"default": true
}
]
}
{% endschema %}