Compatibility: All Shopify 2.0 FREE themes ONLY. Works from lower version to version 11
Product recommendations or related products are essential to any e-commerce site. They provide customers with additional options and increase the chances of making a sale. However, displaying these products can sometimes take up too much space on your product page, leading to a cluttered and overwhelming shopping experience.
One solution to this problem is to convert product recommendations or related products into a slider. By using a slider, you can showcase a variety of products in a visually appealing and organized way. This allows customers to easily browse through the recommendations without having to navigate through a long list of products.
Moreover, a slider provides a more interactive and engaging shopping experience for customers. By allowing them to swipe through a range of products, they can quickly find the ones that catch their eye. This also encourages them to spend more time on your site, increasing the chances of making a purchase.
Implementing a slider for product recommendations or related products is also relatively simple. Many e-commerce platforms offer built-in slider options, or you can use a third-party plugin to create one. With a few clicks, you can transform your product page into a sleek and modern shopping experience.
Explore our DEMO store and see this product in action! Use the password "made4uo" to enter. Please note that quickview functionality is not included.
What you are buying:
- A product recommendation or a related products section in a slider
- No external library being use
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
To start:
1. Go to Admin Shopify store > Themes > Actions > Edit Code
2. In Section folder, find the product-recommendations.liquid or related-products.liquid for newer versions of Shopify 2.0 themes, then replace the default code with the code below.
{{ 'component-card.css' | asset_url | stylesheet_tag }} {{ 'component-price.css' | asset_url | stylesheet_tag }} {% if section.settings.old_version == true %} {{ 'section-product-recommendations.css' | asset_url | stylesheet_tag }} {% else %} {{ 'section-related-products.css' | asset_url | stylesheet_tag }} {% endif %} {% if section.settings.image_shape == 'blob' and section.settings.old_version == false %} {{ 'mask-blobs.css' | asset_url | stylesheet_tag }} {%- endif -%} {%- style -%} recommendation-slider .grid.product-grid { position: relative; flex-wrap: inherit; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-left: 1.5rem; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; } recommendation-slider li { flex-shrink: 0; } recommendation-slider .slider-buttons--wrapper { display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } recommendation-slider .grid.product-grid::-webkit-scrollbar { height: 0.4rem; width: 0.4rem; display: none; } .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 }} color-{{ section.settings.color_scheme_old }} gradient no-js-hidden"> {% if section.settings.old_version == true %}<div class="page-width">{% endif %} <product-recommendations class="related-products page-width section-{{ section.id }}-padding isolate{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" 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 inline-richtext {{ section.settings.heading_size }}"> {{ section.settings.heading }} </h2> <recommendation-slider> <ul class="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"> {% render 'card-product', card_product: recommendation, media_aspect_ratio: section.settings.image_ratio, image_shape: section.settings.image_shape, show_secondary_image: section.settings.show_secondary_image, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating %} </li> {% endfor %} </ul> {% if recommendations.products.size > section.settings.columns_desktop %} <div class="slider-buttons--wrapper"> <button type="button" class="slider-button" name="previous" style="rotate: 90deg" disabled> {% render 'icon-caret' %} </button> <div class="slider-counter--wrapper"> <span class="slider-counter--current">1</span> / <span>{{ recommendations.products.size }}</span> </div> <button type="button" class="slider-button" name="next" style="rotate: -90deg"> {% render 'icon-caret' %} </button> </div> {% endif %} </recommendation-slider> {% endif %} </product-recommendations> {% if section.settings.image_shape == 'arch' and section.settings.old_version == false %} {% render 'mask-arch' %} {% endif %} {% if section.settings.old_version == true %}</div>{% endif %} </div> <script> class RecommendationSlider extends HTMLElement { constructor() { super(); this.container = this.querySelector("ul"); this.slides = this.querySelectorAll("li"); this.currentSlider = this.querySelector(".slider-counter--current"); this.sliderButtons = this.querySelectorAll("button"); this.sliderButtons.forEach((button) => button.addEventListener("click", this.onButtonClick.bind(this)) ); this.container.addEventListener("scroll", this.update.bind(this)); this.init(); const resizeObserver = new ResizeObserver((entries) => this.init()); resizeObserver.observe(this.container); } init() { this.slideOffset = this.slides[1].offsetLeft - this.slides[0].offsetLeft; } update() { this.currentItem = Math.round(this.container.scrollLeft / this.slideOffset) + 1; this.currentSlider.textContent = this.currentItem; this.itemsPerBox = Math.round(this.container.clientWidth / this.slideOffset) - 1; if (this.currentItem <= 1) { this.querySelector('button[name="previous"]').disabled = true; } else { this.querySelector('button[name="previous"]').disabled = false; } if (this.currentItem >= this.slides.length - this.itemsPerBox) { this.querySelector('button[name="next"]').disabled = true; } else { this.querySelector('button[name="next"]').disabled = false; } } onButtonClick(e) { e.preventDefault(); this.slideScrollPosition = e.currentTarget.name === "next" ? this.container.scrollLeft + this.slideOffset : this.container.scrollLeft - this.slideOffset; this.container.scrollTo({ left: this.slideScrollPosition, }); } } customElements.define("recommendation-slider", RecommendationSlider); </script> {% schema %} { "name": "Product Recommendation", "tag": "section", "class": "section", "settings": [ { "type": "checkbox", "id": "old_version", "label": "I have version 8.0 and below" }, { "type": "paragraph", "content": "Dynamic recommendations use order and product information to change and improve over time. [Learn more](https:\/\/help.shopify.com\/themes\/development\/recommended-products)" }, { "type": "inline_richtext", "id": "heading", "default": "You may also like", "label": "Heading" }, { "type": "select", "id": "heading_size", "options": [ { "value": "h2", "label": "Small" }, { "value": "h1", "label": "Medium" }, { "value": "h0", "label": "Large" } ], "default": "h1", "label": "Heading size" }, { "type": "range", "id": "products_to_show", "min": 2, "max": 10, "step": 1, "default": 4, "label": "Maxium products to show" }, { "type": "range", "id": "columns_desktop", "min": 1, "max": 5, "step": 1, "default": 4, "label": "Number of columns on desktop" }, { "type": "color_scheme", "id": "color_scheme", "label": "Color scheme (new version)", "info": "To edit all your theme's colors, go to your theme settings.To change the card color scheme, update your theme settings.", "default": "background-1" }, { "type": "select", "id": "color_scheme_old", "options": [ { "value": "accent-1", "label": "Accent 1" }, { "value": "accent-2", "label": "Accent 2" }, { "value": "background-1", "label": "Background 1" }, { "value": "background-2", "label": "Background 2" }, { "value": "inverse", "label": "Inverse" } ], "default": "background-1", "label": "Color Scheme (Works on version 8 and below ONLY)", "info": "To change the card color scheme, update your theme settings." }, { "type": "header", "content": "Product card" }, { "type": "select", "id": "image_ratio", "options": [ { "value": "adapt", "label": "Adapt to image" }, { "value": "portrait", "label": "Portrait" }, { "value": "square", "label": "Sqaure" } ], "default": "adapt", "label": "Image ratio" }, { "type": "select", "id": "image_shape", "options": [ { "value": "default", "label": "Default" }, { "value": "arch", "label": "Arch" }, { "value": "blob", "label": "Blob" }, { "value": "chevronleft", "label": "Chevron left" }, { "value": "chevronright", "label": "Chevron right" }, { "value": "diamond", "label": "Diamond" }, { "value": "parallelogram", "label": "Parallelogram" }, { "value": "round", "label": "Round" } ], "default": "default", "label": "Image shape (Works on updated Dawn ONLY)", "info": "Standard-styled cards have no borders when an image shape is active." }, { "type": "checkbox", "id": "show_secondary_image", "default": false, "label": "Show second image on hover" }, { "type": "checkbox", "id": "show_vendor", "default": false, "label": "Show vendor" }, { "type": "checkbox", "id": "show_rating", "default": false, "label": "Show product rating", "info": "To display a rating, add a product rating app. [Learn more](https:\/\/help.shopify.com\/manual\/online-store\/themes\/theme-structure\/page-types#search-results-section-settings)" }, { "type": "header", "content": "Mobile layoutt" }, { "type": "select", "id": "columns_mobile", "default": "2", "label": "Number of columns on mobile", "options": [ { "value": "1", "label": "1 Column" }, { "value": "2", "label": "2 Columns" } ] }, { "type": "header", "content": "Section padding" }, { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Top padding", "default": 36 }, { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Bottom padding", "default": 36 } ] } {% endschema %} |
3. Make sure to SAVE.
That's it (",)