Ensure that your customers see your products where ever they are on your website, this could be within your pages, blog posts or even the shopping cart with a carousel of featured products from any collection.
Editing your theme code to add this feature
Required files: section [shop-the-look.liquid]
- In the Section directory, Create a new file called
selected-products.liquid
and add the following code:
<div class="page-width section--feature-collection"> {% if section.settings.title != blank %} <h2 class="title">{{ section.settings.title | escape }}</h2> {% endif %} {%- assign collection = collections[section.settings.collection] -%} {%- assign prod_limit = section.settings.limit -%} {%- assign autoplay = section.settings.autoplay_time | times: 1000 -%} <div class="main-carousel" data-flickity='{ "lazyLoad": true, "freeScroll": true, "wrapAround": true, "autoPlay": {{autoplay}}, "prevNextButtons": {{section.settings.show_arrow}}, "pageDots": {{section.settings.show_dots}} }'> {% for product in collection.products limit: prod_limit %} <div class="carousel-cell"> <div class="product-detail"> {%- assign img_max_height = '300x300' -%} {%- assign featured_image = product.featured_image -%} {%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} <img class="feature-row__image lazyload" src="{{ featured_image | img_url: img_max_height }}" data-src="{{ img_url }}" data-widths="[360, 480, 620, 740, 860, 980, 1100]" data-aspectratio="{{ featured_image.aspect_ratio }}" data-sizes="auto" tabindex="-1" alt="{{ featured_image.alt | escape }}"> <div class="product-desc {% if section.settings.desc_on_hover == true %} pd-on-hover{% endif %}"> <h4 class="title">{{product.title}}</h4> {% include 'product-price', variant: product.selected_or_first_available_variant %} </div> </div> </div> {% endfor %} </div> </div> <style> .section--feature-collection>.title{ text-align: center; } .carousel-cell{ width: 300px; } .carousel-cell .product-detail{ position: relative; margin: 10px; } .carousel-cell .feature-row__image{ width:100%; } .carousel-cell .product-desc{ padding: 10px; } .product-desc .title{ margin: 0; padding: 0 0 5px; } .pd-on-hover{ position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity 0.8s; background-color: rgba(255,255,255,0.75); } .carousel-cell .product-detail:hover .pd-on-hover{ opacity: 1; transition: opacity 0.8s; } </style> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/flickity.min.css"> <script src="https://unpkg.com/[email protected]/dist/flickity.pkgd.min.js" defer></script> {% schema %} { "name": "Featured Collection", "settings": [ { "type": "text", "id": "title", "label": "Heading", "default": "Featured collection" }, { "id": "collection", "type": "collection", "label": "Collection" }, { "type": "range", "id": "limit", "min": 5, "max": 30, "step": 1, "label": "Products shown", "default": 5 }, { "type": "checkbox", "id": "desc_on_hover", "label": "Show product description on hover", "default": false }, { "type": "header", "content": "Carousel Controls" }, { "type": "range", "id": "autoplay_time", "min": 0, "max": 5, "step": 1, "label": "Autoplay in second/s", "default": 0 }, { "type": "checkbox", "id": "show_arrow", "label": "Show arrow", "default": true }, { "type": "checkbox", "id": "show_dots", "label": "Show dots", "default": true } ] } {% endschema %} {% stylesheet %} {% endstylesheet %} {% javascript %} {% endjavascript %}
- In the Layout directory, open the
theme.liquid
file, locate the{% section 'footer' %}
and add the following code right above footer code :
{% if template contains 'index' or template contains 'page' %} {% section 'selected-products' %} {% endif %}
- Congrats, You’ve completed the coding parts.
- Now it’s available in the Theme section. You can modify through
Themes>customize
page section settings. You could add a collection which you want to show in the carousel