I’m trying to add a slider and “buy now” button to the “collection slider” on the home page of a Minimal version 12.6.1 store. The code is supposed to automatically only show one product on mobile devices with a slider functionality across all device types…except after making the below changes absolutely nothing about the Featured Collection changes from what it originally was before I made the code changes (the “stock” Feature Collection).
What am I doing wrong??? Are the jQuery and slick library CDN links incorrect? The store is not yet published and still in draft mode but I’m assuming this would not cause the issue as one would want to ensure it works before publishing the changes.
I’ve added the following code to theme.liquid in the header (specifically under the Header hook for plugins)
Just above that and still within the header I’ve added the following code
<script>
// Slider code for all devices
$('.feature-collection-slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
// Check for mobile device and adjust slider settings
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('.feature-collection-slider').slick('unslick');
$('.feature-collection-slider').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1
});
}
</script>
In the feature-collection.liquid I’ve added the following code
<div class="feature-collection-slider">
{% for product in collection.products limit:3 %}
<div class="feature-product">
<img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.title }}">
<h3>{{ product.title }}</h3>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ product.id }}">
<input type="submit" value="Buy Now" class="buy-now-button">
</form>
<p>{{ product.price | money }}</p>
</div>
{% endfor %}
</div>
Now the entire feature-collection.liquid is this
{% assign featured = section.settings.featured_collection %}
{% assign products_per_row = section.settings.num_per_row %}
{% assign rows = section.settings.num_rows %}
{% assign total_products = products_per_row | times: rows %}
<div class="feature-collection-slider">
{% for product in collection.products limit:3 %}
<div class="feature-product">
<img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.title }}">
<h3>{{ product.title }}</h3>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ product.id }}">
<input type="submit" value="Buy Now" class="buy-now-button">
</form>
<p>{{ product.price | money }}</p>
</div>
{% endfor %}
</div>
<div data-section-id="{{ section.id }}" data-section-type="featured-products-section">
{% unless section.settings.title == blank %}
<div class="section-header section-header--small">
<h2 class="section-header__title">
{{ section.settings.title | escape }}
</h2>
</div>
{% endunless %}
{% case products_per_row %}
{% when 3 %}
{% assign grid_item_width = 'medium--one-third post-large--one-third' %}
{%- assign product_width = 410 -%}
{% when 4 %}
{% assign grid_item_width = 'medium-down--one-half post-large--one-quarter' %}
{%- assign product_width = 335 -%}
{% when 5 %}
{% assign grid_item_width = 'medium-down--one-half post-large--one-fifth' %}
{%- assign product_width = 335 -%}
{% endcase %}
<div class="grid-uniform">
{% for product in collections[featured].products limit: total_products %}
{% assign featured = product %}
<div class="grid__item {{grid_item_width}}" {{ block.shopify_attributes }}>
{% include 'product-grid-item' %}
</div>
{% else %}
<div class="grid__item">
<div class="helper-section">
<div class="grid-uniform helper-content">
{% for i in (1..total_products) %}
<div class="grid__item {{grid_item_width}}">
<a href="/admin/products" class="grid-link{% if section.settings.center_grid_link %} text-center{% endif %}">
<span class="grid-link__image">
<span class="grid-link__image-centered">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</span>
</span>
<p class="grid-link__title">{{ 'home_page.onboarding.product_title' | t }}</p>
<p class="grid-link__meta">
<strong>$19.99</strong>
</p>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% schema %}
{
"name": {
"cs": "Propagovaná kolekce",
"da": "Udvalgt kollektion",
"de": "Vorgestellte Kategorie",
"en": "Featured collection",
"es": "Colección destacada",
"fi": "Esittelyssä oleva kokoelma",
"fr": "Collection en vedette",
"it": "Collezione in evidenza",
"ja": "特集コレクション",
"ko": "추천 컬렉션",
"nb": "Utvalgt samling",
"nl": "Uitgelichte collectie",
"pl": "Polecana kolekcja",
"pt-BR": "Coleção em destaque",
"pt-PT": "Coleção em destaque",
"sv": "Utvald kollektion",
"th": "คอลเลกชันแนะนำ",
"tr": "Öne çıkan koleksiyon",
"vi": "Bộ sưu tập nổi bật",
"zh-CN": "特色产品系列",
"zh-TW": "精選商品系列"
},
"class": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": {
"cs": "Nadpis",
"da": "Overskrift",
"de": "Titel",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "Titre",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"nb": "Overskrift",
"nl": "Kop",
"pl": "Nagłówek",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"tr": "Başlık",
"vi": "Tiêu đề",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"cs": "Propagovaná kolekce",
"da": "Udvalgt kollektion",
"de": "Vorgestellte Kategorie",
"en": "Featured collection",
"es": "Colección destacada",
"fi": "Esittelyssä oleva kokoelma",
"fr": "Collection en vedette",
"it": "Collezione in evidenza",
"ja": "特集コレクション",
"ko": "추천 컬렉션",
"nb": "Fremhevet samling",
"nl": "Uitgelichte collectie",
"pl": "Polecana kolekcja",
"pt-BR": "Coleção em destaque",
"pt-PT": "Coleção em destaque",
"sv": "Utvald kollektion",
"th": "คอลเลกชันแนะนำ",
"tr": "Öne çıkan koleksiyon",
"vi": "Bộ sưu tập nổi bật",
"zh-CN": "特色产品系列",
"zh-TW": "精選商品系列"
}
},
{
"type": "collection",
"id": "featured_collection",
"label": {
"cs": "Kolekce",
"da": "Kollektion",
"de": "Kategorie",
"en": "Collection",
"es": "Colección",
"fi": "Kokoelma",
"fr": "Collection",
"it": "Collezione",
"ja": "コレクション",
"ko": "컬렉션",
"nb": "Samling",
"nl": "Collectie",
"pl": "Kolekcja",
"pt-BR": "Coleção",
"pt-PT": "Coleção",
"sv": "Produktserie",
"th": "คอลเลกชัน",
"tr": "Koleksiyon",
"vi": "Bộ sưu tập",
"zh-CN": "收藏",
"zh-TW": "商品系列"
}
},
{
"type": "range",
"id": "num_per_row",
"label": {
"cs": "Počet produktů na řádek",
"da": "Produkter pr. række",
"de": "Produkte pro Reihe",
"en": "Products per row",
"es": "Productos por fila",
"fi": "Tuotteet per rivi",
"fr": "Produits par rangée",
"it": "Prodotti per riga",
"ja": "行あたりの商品数",
"ko": "열 별 제품",
"nb": "Produkter per rad",
"nl": "Producten per rij",
"pl": "Liczba produktów na wiersz",
"pt-BR": "Produtos por linha",
"pt-PT": "Produtos por linha",
"sv": "Produkter per rad",
"th": "สินค้าฑ์ต่อแถว",
"tr": "Satır başına ürün",
"vi": "Số sản phẩm trên một hàng",
"zh-CN": "每行产品数",
"zh-TW": "每列產品數"
},
"min": 3,
"max": 5,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "num_rows",
"label": {
"cs": "Řádky",
"da": "Rækker",
"de": "Reihen",
"en": "Rows",
"es": "Filas",
"fi": "Rivit",
"fr": "Rangées",
"it": "Righe",
"ja": "行",
"ko": "열",
"nb": "Rader",
"nl": "Rijen",
"pl": "Wiersze",
"pt-BR": "Linhas",
"pt-PT": "Linhas",
"sv": "Rader",
"th": "แถว",
"tr": "Satırlar",
"vi": "Hàng",
"zh-CN": "行数",
"zh-TW": "列"
},
"min": 1,
"max": 6,
"step": 1,
"default": 1
},
{
"type": "checkbox",
"id": "vendor_enable",
"label": {
"cs": "Zobrazit dodavatele produktu",
"da": "Vis produktleverandør",
"de": "Produktanbieter anzeigen",
"en": "Show product vendor",
"es": "Mostrar proveedor del producto",
"fi": "Näytä tuotteen myyjä",
"fr": "Afficher le distributeur du produit",
"it": "Mostra fornitore prodotto",
"ja": "商品の販売元を表示する",
"ko": "제품 공급 업체 표시",
"nb": "Vis produktleverandør",
"nl": "Productleverancier weergeven",
"pl": "Pokaż dostawcę produktu",
"pt-BR": "Mostrar o fabricante do produto",
"pt-PT": "Mostrar o fornecedor do produto",
"sv": "Visa produktsäljare",
"th": "แสดงผู้ขายสินค้า",
"tr": "Ürün satıcısını göster",
"vi": "Hiển thị nhà cung cấp sản phẩm",
"zh-CN": "显示产品厂商",
"zh-TW": "顯示產品廠商"
}
},
{
"type": "checkbox",
"id": "show_sale_circle",
"label": {
"cs": "Zobrazit kroužek Sleva",
"da": "Vis \"Udsalg\"-cirkel",
"de": "Kreis für 'Sonderangebot' anzeigen",
"en": "Show 'Sale' circle",
"es": "Mostrar el círculo \"Oferta\"",
"fi": "Näytä 'Sale' (Alennusmyynti) -ympyrä",
"fr": "Afficher la vignette « Réduction »",
"it": "Mostra cerchio \"In Offerta\"",
"ja": "丸で囲んだ「セール」を表示する",
"ko": "'판매' 서클 표시",
"nb": "Vis 'Salg'-sirkel",
"nl": "Laat 'Verkoop'-cirkel zien",
"pl": "Pokaż kółko „Wyprzedaż”",
"pt-BR": "Mostrar círculo \"Oferta\"",
"pt-PT": "Mostrar círculo \"Oferta\"",
"sv": "Visa \"Utförsäljning\"-cirkel",
"th": "แสดงวงกลมที่ระบุว่า 'ลดราคา'",
"tr": "\"İndirim\" dairesi göster",
"vi": "Hiển thị biểu tượng \"Giảm giá\"",
"zh-CN": "显示“销售”圆圈",
"zh-TW": "顯示「特價」圓圈"
}
},
{
"type": "checkbox",
"id": "show_sold_out_circle",
"label": {
"cs": "Zobrazit kroužek Vyprodáno",
"da": "Vis \"Udsolgt\"-cirkel",
"de": "Kreis für 'Ausverkauft' anzeigen",
"en": "Show 'Sold out' circle",
"es": "Mostrar el círculo \"Agotado\"",
"fi": "Näytä 'Sold out' (Myyty loppuun) -ympyrä",
"fr": "Afficher la vignette « Épuisé »",
"it": "Mostra cerchio \"Esaurito\"",
"ja": "丸で囲んだ「売り切れ」を表示する",
"ko": "'매진' 서클 표시",
"nb": "Vis 'Utsolgt'-sirkel",
"nl": "Laat cirkel 'Uitverkocht' zien",
"pl": "Pokaż kółko „Wyprzedany”",
"pt-BR": "Mostrar círculo \"Esgotado\"",
"pt-PT": "Mostrar círculo \"Esgotado\"",
"sv": "Visa \"Utsåld\"-cirkeln",
"th": "แสดงวงกลมที่ระบุว่า 'สินค้าหมด'",
"tr": "\"Tükendi\" dairesi göster",
"vi": "Hiển thị biểu tượng \"Hết hàng\"",
"zh-CN": "显示“售罄”圆圈",
"zh-TW": "顯示「售罄」圓圈"
}
},
{
"type": "checkbox",
"id": "center_grid_link",
"label": {
"cs": "Zarovnat text pod obrázky produktu na střed",
"da": "Centrer tekst under produktbilleder",
"de": "Text unter Produktbildern zentrieren",
"en": "Center text below product images",
"es": "Centrar el texto debajo de las imágenes del producto",
"fi": "Keskitä teksti tuotekuvien alla",
"fr": "Centrer le texte sous les images des produits",
"it": "Centra il testo sotto le immagini del prodotto",
"ja": "商品画像下のテキストを中央に寄せる",
"ko": "제품 이미지 아래 가운데 텍스트",
"nb": "Sentrer tekst under produktbilder",
"nl": "Centreer de tekst onder de productafbeeldingen",
"pl": "Wyśrodkuj tekst pod obrazami produktów",
"pt-BR": "Centralizar texto abaixo das imagens do produto",
"pt-PT": "Centrar texto abaixo das imagens de produto",
"sv": "Centrera text under produktbilder",
"th": "จัดข้อความใต้ภาพสินค้าให้อยู่ตรงกลาง",
"tr": "Metni ürün görsellerinin alt kısmına ortala",
"vi": "Căn giữa văn bản bên dưới hình ảnh sản phẩm",
"zh-CN": "使产品图片下方的文本居中显示",
"zh-TW": "將文字置中並置於產品圖片下方"
}
}
],
"presets": [
{
"name": {
"cs": "Propagovaná kolekce",
"da": "Udvalgt kollektion",
"de": "Vorgestellte Kategorie",
"en": "Featured collection",
"es": "Colección destacada",
"fi": "Esittelyssä oleva kokoelma",
"fr": "Collection en vedette",
"it": "Collezione in evidenza",
"ja": "特集コレクション",
"ko": "추천 컬렉션",
"nb": "Utvalgt samling",
"nl": "Uitgelichte collectie",
"pl": "Polecana kolekcja",
"pt-BR": "Coleção em destaque",
"pt-PT": "Coleção em destaque",
"sv": "Utvald kollektion",
"th": "คอลเลกชันแนะนำ",
"tr": "Öne çıkan koleksiyon",
"vi": "Bộ sưu tập nổi bật",
"zh-CN": "特色产品系列",
"zh-TW": "精選商品系列"
},
"category": {
"cs": "Kolekce",
"da": "Kollektion",
"de": "Kategorie",
"en": "Collection",
"es": "Colección",
"fi": "Kokoelma",
"fr": "Collection",
"it": "Collezione",
"ja": "コレクション",
"ko": "컬렉션",
"nb": "Samling",
"nl": "Collectie",
"pl": "Kolekcja",
"pt-BR": "Coleção",
"pt-PT": "Coleção",
"sv": "Produktserie",
"th": "คอลเลกชัน",
"tr": "Koleksiyon",
"vi": "Bộ sưu tập",
"zh-CN": "收藏",
"zh-TW": "商品系列"
},
"settings": {
"title": "Featured collection",
"featured_collection": "frontpage"
}
}
]
}
{% endschema %}
