Style slider and adjust swiper

layout/theme.liquid

@@ -279,6 +279,36 @@
       >
     {%- endif -%}
 
+    <style>
+      @font-face {
+        font-family: "Satoshi";
+        font-weight: 500;
+        font-style: normal;
+        font-display: swap;
+        src: url('{{ "Satoshi-Medium.otf" | asset_url | font_url }}')
+            format("opentype"),
+          url('{{ "Satoshi-Medium.woff2" | asset_url  | font_url}}')
+            format("woff2"),
+          url('{{ "Satoshi-Medium.woff" | asset_url }}') format("woff"),
+          url('{{ "Satoshi-Medium.ttf" | asset_url }}') format('truetype');
+      }
+
+      @font-face {
+        font-family: "Satoshi";
+        font-weight: 700;
+        font-style: normal;
+        font-display: swap;
+        src: url('{{ "Satoshi-Bold.otf" | asset_url }}')
+            format("opentype"),
+          url('{{ "Satoshi-Bold.woff2" | asset_url }}')
+            format("woff2"),
+          url('{{ "Satoshi-Bold.woff" | asset_url }}') format("woff"),
+          url('{{ "Satoshi-Bold.ttf" | asset_url }}') format('truetype');
+      }
+    </style>
+    <script src="{{ 'x-index.js' | asset_url }}" type="module"></script>
+    {{ 'x-index.css' | asset_url | stylesheet_tag }}
+
     <script>
       if (Shopify.designMode) {
         document.documentElement.classList.add('shopify-design-mode');

scripts/index.ts

@@ -0,0 +1 @@
+import '../styles/index.scss';

scripts/products-slider-top.ts

@@ -0,0 +1,44 @@
+import 'swiper/css';
+
+import '../styles/products-slider-top.scss';
+
+import { Swiper } from 'swiper';
+import { Navigation } from 'swiper/modules';
+
+Swiper.use([Navigation]);
+
+new Swiper('.x-products-slider-top__swiper', {
+  direction: 'horizontal',
+  loop: false,
+  spaceBetween: 16,
+  slidesPerView: 1.3,
+
+  speed: 100,
+  grabCursor: true,
+  freeMode: true,
+
+  breakpoints: {
+    600: {
+      slidesPerView: 2.3,
+      spaceBetween: 16,
+    },
+    768: {
+      slidesPerView: 3.3,
+      spaceBetween: 16,
+    },
+    1024: {
+      slidesPerView: 3.3,
+      spaceBetween: 24,
+      speed: 200,
+    },
+    1240: {
+      slidesPerView: 4.3,
+      spaceBetween: 24,
+    },
+  },
+
+  navigation: {
+    nextEl: '.swiper-button-next',
+    prevEl: '.swiper-button-prev',
+  },
+});

sections/products-slider-top.liquid

@@ -0,0 +1,128 @@
+<script src="{{ 'x-products-slider-top.js' | asset_url }}" type="module"></script>
+{{ 'x-products-slider-top.css' | asset_url | stylesheet_tag }}
+
+{% assign filter_tag = 'Bestseller' %}
+{% assign product_limit = section.settings.slider_limit %}
+{% assign filtered_product_ids = "" %}
+
+{% for collection in product.collections %}
+  {% for product in collection.products %}
+    {% for tag in product.tags %}
+      {% if filter_tag contains tag %}
+        {% if filtered_product_ids == blank %}
+          {% assign filtered_product_ids = filtered_product_ids | append: product.id %}
+        {% else %}
+          {% assign filtered_product_ids = filtered_product_ids | append: "," | append: product.id %}
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+  {% endfor %}
+{% endfor %}
+
+{% assign filtered_product_ids = filtered_product_ids | split: "," | uniq %}
+
+{% assign pre = 'x-products-slider-top' %}
+
+<div class="{{pre}}">
+  <div class="content-wrapper">
+    <div class="{{pre}}__header">
+      <h2 class="{{pre}}__title">{{section.settings.slider_title}}</h2>
+      <a href="{{section.settings.button_link}}" class="{{pre}}__button-link {{pre}}__button-link--desktop">
+        <button class="x-button">
+          {{section.settings.button_text}}
+        </button>
+      </a>
+    </div>
+    {% if filtered_product_ids.size > 0 %}
+      <div class="swiper x-products-slider-top__swiper">
+        <div class="swiper-wrapper">
+          {% for id in filtered_product_ids limit: product_limit %}
+            {% for collection in product.collections %}
+              {% for product in collection.products %}
+                {% if id contains product.id %}
+                  {% assign found_product = product %}
+                {% endif %}
+              {% endfor %}
+            {% endfor %}
+            {% if found_product %}
+              <div class="swiper-slide">
+                {% render 'product-card', product: found_product %}
+              </div>
+            {% endif %}
+          {% endfor %}
+        </div>
+
+      <div class="swiper-button-prev">
+        <div class="swiper-navigation-button">
+          <div class="swiper-navigation-icon-wrapper">
+            {% render 'icon-chevron-left' %}
+          </div>
+        </div>
+      </div>
+      <div class="swiper-button-next">
+        <div class="swiper-navigation-button">
+          <div class="swiper-navigation-icon-wrapper">
+            {% render 'icon-chevron-right' %}
+          </div>
+        </div>
+      </div>
+    </div>
+    {% else %}
+      <p class="{{pre}}__not-found">{{section.settings.not_found_message}}</p>
+    {% endif %}
+    <a href="{{section.settings.button_link}}" class="{{pre}}__button-link {{pre}}__button-link--mobile">
+      <button class="x-button">
+        {{section.settings.button_text}}
+      </button>
+    </a>
+  </div>
+</div>
+
+
+{% schema %}
+{
+  "name": "Top Products Slider",
+  "tag": "section",
+  "class": "section",
+  "enabled_on": {
+    "templates": ["product"]
+  },
+  "settings": [
+    {
+      "type": "text",
+      "id": "slider_title",
+      "label": "Slider Title",
+      "default": "Bestseller Products"
+    },
+    {
+      "type": "range",
+      "id": "slider_limit",
+      "label": "Slider Limit",
+      "default": 10,
+      "min": 1,
+      "max": 30,
+      "step": 1
+    },
+    {
+      "type": "text",
+      "id": "not_found_message",
+      "label": "No products message",
+      "default": "Sorry, we couldn't find any products."
+    },
+    {
+      "type": "url",
+      "id": "button_link",
+      "label": "Button link"
+    },
+    {
+      "type": "text",
+      "id": "button_text",
+      "label": "Button text",
+      "default": "View All"
+    }
+  ],
+  "presets": [{
+    "name": "Top Products Slider"
+  }]
+}
+{% endschema %}

snippets/icon-chevron-left.liquid

@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.25 20.5834L8.6667 13L16.25 5.41673" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

snippets/icon-chevron-right.liquid

@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.75 5.41666L17.3333 13L9.75 20.5833" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

snippets/icon-star.liquid

@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0L10.3982 4.69921L15.6085 5.52786L11.8803 9.26079L12.7023 14.4721L8 12.08L3.29772 14.4721L4.11969 9.26079L0.391548 5.52786L5.60184 4.69921L8 0Z" fill="currentColor"/>
+</svg>

snippets/product-card.liquid

@@ -8,18 +8,43 @@
 {% assign pre = "x-product-card" %}
 
 {% assign variant = product.selected_or_first_available_variant %}
+{% assign product_rating = 5 %}
+{% if product.metafields.custom.rating %}
+  {% assign product_rating = product.metafields.custom.rating %}
+{% endif %}
 
 <a href="{{product.url}}" class="{{pre}}__card">
   <div class="{{pre}}__product">
     <div class="{{pre}}__image-wrapper">
-      {{product.featured_image | image_url: width: 533 | image_tag}}
+      {{product.featured_image | image_url: width: 336 | image_tag: widths: '200, 336'}}
+      {% if product.compare_at_price_max > product.price %}
+        <div class="{{pre}}__chips">
+          <span class="{{pre}}__chip {{pre}}__chip--sale">{{product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price }}% zniżki</span>
+        </div>
+      {% endif %}
     </div>
     <div class="{{pre}}__content-wrapper">
-      <h4 class="{{pre}}__title">{{product.title}}</h4>
+      <div class="{{pre}}__product-details">
+        <div class="{{pre}}__product-rating">
+          {% for i in (1..5) %}
+            {% if i > product_rating %}
+              <span class="{{pre}}__star-icon">
+                {% render 'icon-star' %}
+              </span>
+            {% else %}
+              <span class="{{pre}}__star-icon {{pre}}__star-icon--active">
+                {% render 'icon-star' %}
+              </span>
+            {% endif %}
+          {% endfor %}
+        </div>
+        <h3 class="{{pre}}__title">{{product.title}}</h3>
+        <p class="{{pre}}__description">{{product.description | strip_html}}</p>
+      </div>
       <div class="{{pre}}__price-wrapper">
         {% if product.compare_at_price %}
+          <span class="{{pre}}__price">{{product.price | money}}</span>
           <span class="{{pre}}__price {{pre}}__price--compare">{{product.compare_at_price | money}}</span>
-          <span class="{{pre}}__price {{pre}}__price--sale">{{product.price | money}}</span>
         {% else %}
           <span class="{{pre}}__price">{{product.price | money}}</span>
         {% endif %}