Add slick slider for related product(Dawn theme)

__10
Shopify Partner
9 0 0

How can I add a slick slider to the related product section on the product page???


{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'section-related-products.css' | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

<div class="color-{{ section.settings.color_scheme }} gradient no-js-hidden">
<product-recommendations
class="related-products page-width section-{{ section.id }}-padding isolate"
data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit={{ section.settings.products_to_show }}"
>
{% if recommendations.performed and recommendations.products_count > 0 %}
<h2 class="related-products__heading {{ section.settings.heading_size }}">
{{ section.settings.heading }}
</h2>
<ul
class="related-products-slider grid product-grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down"
role="list"
>
{% for recommendation in recommendations.products %}
<li class="grid__item asd ">
{% render 'card-product',
card_product: recommendation,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating
%}
</li>
{% endfor %}
</ul>
{% endif %}
</product-recommendations>
</div>

<script>
$(document).ready(function() {
setTimeout(function() {
$('.related-products-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
// Add any additional configuration options as needed
});
}, 1000); // Change the delay time (in milliseconds) as needed
});
</script>


{% schema %}
{
"name": "t:sections.related-products.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "paragraph",
"content": "t:sections.related-products.settings.paragraph__1.content"
},
{
"type": "inline_richtext",
"id": "heading",
"default": "You may also like",
"label": "t:sections.related-products.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "range",
"id": "products_to_show",
"min": 2,
"max": 10,
"step": 1,
"default": 4,
"label": "t:sections.related-products.settings.products_to_show.label"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 4,
"label": "t:sections.related-products.settings.columns_desktop.label"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info"
},
{
"type": "header",
"content": "t:sections.related-products.settings.header__2.content"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.related-products.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.related-products.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.related-products.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.related-products.settings.image_ratio.label"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.related-products.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.related-products.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.related-products.settings.show_rating.label",
"info": "t:sections.related-products.settings.show_rating.info"
},
{
"type": "header",
"content": "t:sections.related-products.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "t:sections.related-products.settings.columns_mobile.label",
"options": [
{
"value": "1",
"label": "t:sections.related-products.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.related-products.settings.columns_mobile.options__2.label"
}
]
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
]
}
{% endschema %}

 

Replies 4 (4)

NomtechSolution
Astronaut
1245 113 148

To add a Slick slider to the related product section on the product page using the code you provided, follow these steps:

  1. From your Shopify admin, go to "Online Store" and then "Themes."
  2. Find the theme you are using and click on the "Actions" button, then select "Edit code."
  3. In the theme code editor, locate the file for the related product section. The file should be named something like section-related-products.liquid or similar.
  4. Replace the existing code with the code you provided. Make sure to keep the {% schema %} and {% endschema %} tags intact.
  5. Save the changes and preview the related product section on the product page.
  6. If the Slick slider is not working as expected, you may need to ensure that the Slick library is properly loaded in your theme. Add the following code to the theme.liquid file just before the closing </head> tag:

 

 

{{ 'slick.min.js' | asset_url | script_tag }}
{{ 'slick.css' | asset_url | stylesheet_tag }}
​

 

 

__10
Shopify Partner
9 0 0

Thanks for your response. The slick slider is working when we the set timeout function.
https://carevyn1.myshopify.com/products/quality-pro

poshify
Visitor
3 0 0

Hi,

I have added your code but not working for me. Could you please let me know how did you set the timeout and made it to work?

 

1. I have downloaded slick-theme.css and slick-min.js and added them in Assets folder. And included the below two lines in theme.liquid as suggested.

{{ 'slick.min.js' | asset_url | script_tag }}

{{ 'slick-theme.css' | asset_url | stylesheet_tag }}

 

2. Also I have added the below script in related-products.liquid but still not working.

<script>
$(document).ready(function() {
setTimeout(function() {
$('.related-products-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
// Add any additional configuration options as needed
});
}, 1000); // Change the delay time (in milliseconds) as needed
});
</script>

__10
Shopify Partner
9 0 0

Thankyou, I have solved it 🙂