Category: Shopify


How to Add Collection Slider In Shopify

In this post we talk about How to Add Collection Slider In Shopify Step 1: Crate a section collection slider and paste below code {% if section.settings.title != blank %} <div class=”section-header text-center”> <h2>{{ section.settings.title | escape }}</h2> </div> {% endif %} {%- assign collection = collections[section.settings.collection] -%} {% case section.settings.grid %} {% when 2 […]


How to create random Product Sales Pop In Shopify

In this post we talk about How to create custom Product notifications with Sales Pop In Shopify Step 1: Add There File Link before content Header. {{‘pop.css’ | asset_url | stylesheet_tag }} <script src=”{{ ‘’}}”></script> <link href=”” rel=”stylesheet” type=”text/css” media=”all” /> {{ content_for_header }} Step 2: Add Section Link after content Layout. {{ content_for_layout }} […]


How to add breadcrumbs in Shopify

In this post, we will talk about the How to add the Breadcrumbs In Shopify Step 1: Create a new file in your theme under the “Snippets” section and call this Breadcrumbs. {% unless template == ‘index’ or template == ‘cart’ or template == ‘list-collections’ %} Home {% if template contains ‘page’ %} {{ page.title […]


How to add plus + and minus – buttons to the quantity input on the product page in Shopify

In this post, we will talk about the quantity feature Step 1: Add Code in Product File {% if section.settings.show_quantity_selector %} <div class=”qtydiv”> <label for=”Quantity-{{ }}”>{{ ‘products.product.quantity’ | t }}</label> <div class=”qtybox”> <span class=”btnqty qtyminus icon icon-minus”>-</span> <input type=”text” id=”quantity” name=”quantity” value=”1″ min=”1″ class=”quantity-selector quantity-input” readonly=””> <span class=”btnqty qtyplus icon icon-plus”>+</span> </div> </div> {% […]


Debut Theme 2021 Product Thumbnail Slider In Desktop

Debut Theme Product Thumbnail Slider In Desktop. if you have some technical skills can be made yourself. Let’s see how to make Thumbnail Slider In theme.js, search for initDesktopBreakpoint. Replace it with this updated code: _initDesktopBreakpoint: function() { if (this.mqlMediumUp.matches) { if ( this.container.querySelectorAll(this.selectors.productThumbImages) .length > 3 ) { this._initThumbnailSlider(); } if (this.settings.zoomEnabled) { this.imageZoomWrapper.forEach( […]

Back To Top