zz-shopify-components 0.25.1-beta.0 → 0.25.1-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.25.1-beta.0",
+  "version": "0.25.1-beta.1",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/snippets/zz-accessories-preview-swiper.liquid

@@ -72,10 +72,10 @@
     </div>
     <div class='swiper-pagination'></div>
     <div class='product-accessories-swiper-button-prev'>
-      {% render 'zz-prev-next-btn', type: 'prev', color_type: 'dark' %}
+      {% render 'zz-prev-next-blur-icon', type: 'prev' %}
     </div>
     <div class='product-accessories-swiper-button-next'>
-      {% render 'zz-prev-next-btn', type: 'next', color_type: 'dark' %}
+      {% render 'zz-prev-next-blur-icon', type: 'next' %}
     </div>
   </div>
 
@@ -104,6 +104,10 @@
   zz-accessories-preview-swiper {
     display: block;
   }
+  zz-accessories-preview-swiper .product-accessories-swiper-button-prev path,
+  zz-accessories-preview-swiper .product-accessories-swiper-button-next path {
+    fill: white;
+  }
   .product-accessories-swiper-container .swiper-pagination {
     --swiper-pagination-color: black;
     --swiper-pagination-bottom: 10px;

package/snippets/zz-product-swiper.liquid

@@ -31,7 +31,7 @@
   </div>
 
   <div class=' tw-absolute tw-bottom-[20px] tw-left-1/2 tw-transform tw-translate-x-[-50%] tw-z-10 tw-w-[80%] '>
-    <div class='swiper product-swiper-list-thumbs tw-opacity-0'>
+    <div class='swiper product-swiper-list-thumbs tw-opacity-0 tw-invisible'>
       <div class='swiper-wrapper tw-flex tw-justify-center'>
         {% for image in product_images %}
           <div class='swiper-slide !tw-w-auto tw-opacity-30'>
@@ -164,7 +164,7 @@
           const wrap = document.createElement('div');
           wrap.className = ' tw-absolute tw-bottom-[20px] tw-left-1/2 tw-transform tw-translate-x-[-50%] tw-z-10 tw-w-[80%] ';
           const thumbs = document.createElement('div');
-          thumbs.className = 'swiper product-swiper-list-thumbs tw-opacity-0';
+          thumbs.className = 'swiper product-swiper-list-thumbs tw-opacity-0 tw-invisible';
           thumbs.innerHTML = `<div class="swiper-wrapper tw-flex tw-justify-center"></div>`;
           wrap.appendChild(thumbs);
           this.appendChild(wrap);
@@ -179,9 +179,10 @@
         if (typeof Swiper === 'undefined') return;
         // Thumbs
         this._thumbs = new Swiper(this._thumbsEl, {
-          slidesPerView: 5,
+          slidesPerView: 3,
           spaceBetween: 8,
           watchSlidesProgress: true,
+
           slideToClickedSlide: true,
           breakpoints: {
             0:   { slidesPerView: 4, spaceBetween: 6 },
@@ -193,7 +194,7 @@
         const initialCount = this._listEl.querySelectorAll('.swiper-slide').length;
         this._swiper = new Swiper(this._listEl, {
           loop: true,
-          effect: 'slide',
+          effect: 'fade',
           loopedSlides: initialCount,
           slidesPerView: 1,
           spaceBetween: 10,
@@ -207,6 +208,8 @@
           },
           thumbs: { swiper: this._thumbs }
         });
+
+       this._thumbsEl.classList.remove('tw-invisible');
       }
 
       _destroySwipers() {