How to create random Product Sales Pop In Shopify

random Product Sales Pop

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="{{ 'https://code.jquery.com/jquery-3.5.0.min.js'}}"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all" />
    {{ content_for_header }}
  

Step 2: Add Section Link after content Layout.

  
    {{ content_for_layout }}
    {% if settings.ena_random_prod %}
      {% include 'salespop' %}
    {% endif%}
  

Step 3: Create a Snippet and paste below code

  
    {% if settings.ena_random_prod %}
        {% if settings.best_product_collection != blank %}
        <div class="popup_random_prod" style="{% if settings.lr_randomprod == "left" %} left: 40px; right: auto{% elsif settings.lr_randomprod == "right" %} left: auto ; right: 40px {% endif %}">
        <div class="close_popup">
        <span class="ti-close"></span>
        </div>
        <ul class="prod_sidebar">
        {% assign col = settings.best_product_collection %}
        {% for product in collections[col].products%}
        <li class="product_info d-none">  
        <div class="d-flex align-items-md-center align-items-start">
        <div class="img_left">
        <a href="{{ product.url | within: collection }}">
        <img width="80" height="80" src="{{ product.featured_image.src | img_url: 'master' }}" class="img-responsive" alt="{{ product.featured_image.alt | escape }}">
        </a>
        </div>
        <div class="info_right">
        <p class="info_puchare"><span class="js-name"></span> in <span class="js-address"></span> purchased a </p>
        <a class="product-title" href="{{ product.url | within: collection }}">{{ product.title |truncatewords: 8}}</a>
        <div class="minute_random">About <span class="random_minute"></span> minutes ago</div>
        </div>
        </div>
        </li>
        {% endfor %}
        </ul>
        <div class="read_name">
        {% assign name = settings.name_purchare | split: ", " %}
        <ul class="d-none js-readname" data-max={{name.size}}>
        {% for xxx in name %}
        <li>{{xxx}}</li>
        {% endfor %}
        </ul>
        </div>
        <div class="read_address">
        {% assign address = settings.address_purchare | split: ", " %}
        <ul class="d-none js-readaddress" data-max={{address.size}}>
        {% for address in address %}
        <li>{{address}}</li>
        {% endfor %}
        </ul>
        </div>
        </div>
        <script>
        function random(min,max){
        return Math.floor(Math.random()*(max-min+1)+min);
        }
        var max = $('.js-readname').attr('data-max')-1;
        var text = $('.js-readname').children().eq(random(0,max)).text();
        $('.js-name').text(text);
        var max2 = $('.js-readaddress').attr('data-max')-1;
        var text2 = $('.js-readaddress').children().eq(random(0,max2)).text();
        $('.js-address').text(text2);
        jQuery(document).ready(function($) { 
        var dem = {{ collections[col].all_products_count }} - 1;
        var initial2 = random(0,dem);
        var count2 = initial2;
        $( '.popup_random_prod' ).find('ul').children().eq(count2).removeClass('d-none');
        var initial = random(1,60);
        var count = initial;
        var x = document.getElementsByClassName("random_minute");
        x[count2].innerHTML = count;
        });
        jQuery(document).ready(function($) { 
        setInterval(function() {
        $('.popup_random_prod').addClass('hide_popup_random_prod');
        }, 5000) 
        $('.close_popup').on('click', function() {
        $('.popup_random_prod').addClass('hide_popup_random_prod');
        });
        setInterval(function() {
        $('.popup_random_prod').removeClass('hide_popup_random_prod');
        var dem = {{ collections[col].all_products_count }} - 1;
        var initial2 = random(0,dem);
        var count2 = initial2;
        $( '.popup_random_prod' ).find('ul').children().addClass('d-none');
        $( '.popup_random_prod' ).find('ul').children().eq(count2).removeClass('d-none');
        var initial = random(1,60);
        var count = initial;
        var x = document.getElementsByClassName("random_minute");
        x[count2].innerHTML = count;
        var max = $('.js-readname').attr('data-max')-1;
        var text = $('.js-readname').children().eq(random(0,max)).text();
        $('.js-name').text(text);
        var max2 = $('.js-readaddress').attr('data-max')-1;
        var text2 = $('.js-readaddress').children().eq(random(0,max2)).text();
        $('.js-address').text(text2);
        }, 10000)  
        })  
        </script>
        {% endif %}
        {% endif %}
  

Step 4: Create a css file and paste below code

{{‘pop.css’ | asset_url | stylesheet_tag }}

  
    .popup_random_prod{visibility:visible;opacity:1;transform:none;transition:.8s;position:fixed;z-index:9;width:500px;max-width:100%;left:40px;padding:20px 20px;bottom:40px;font-size:14px;line-height:28px;min-width:inherit;right:auto;color:white;background-color:#fff;text-align:center;border-radius:5px;box-shadow:0 0 4px 0 rgba(0,0,0,0.4);}
    .popup_random_prod .close_popup{color:#fff;border-radius:50%;background:#000;font-size:7px;font-weight:600;height:20px;width:20px;line-height:20px;position:absolute;top:5px;right:5px;cursor:pointer;transition:.3s;}
    .popup_random_prod .prod_sidebar{padding-left:0;margin-bottom:0;}
    .popup_random_prod .prod_sidebar .product_info{overflow:hidden;list-style:none;position:relative;}
    .popup_random_prod .prod_sidebar .product_info .img_left{margin-right:20px;border:2px solid #e5e5e5;}
    .popup_random_prod .prod_sidebar .product_info .info_right{text-align:left;}
    .popup_random_prod .prod_sidebar .product_info .info_right .info_puchare{font-size:14px;color:#868686;font-weight:500;margin-bottom:0;line-height:19px;}
    .popup_random_prod .prod_sidebar .product_info .info_right .product-title{font-family:Poppins;font-size:15px;font-weight:500;color:#000;}
    .popup_random_prod .prod_sidebar .product_info .info_right .product-title:hover{color:#fb5858;}
    .popup_random_prod .prod_sidebar .product_info .info_right .minute_random{font-size:14px;color:#333333;}
    .popup_random_prod .prod_sidebar .product_info .info_right .minute_random span{color:#fb5858;font-weight:600;}
    .hide_popup_random_prod{visibility:hidden;opacity:0;transform:translateY(-30px);transition:.4s!important;}
    .ti-close:before{content:"\f00d"; /* NEED FONT FILE FOR CLOSE ICON */font-family:'FontAwesome';font-style:normal;}
    .border-bottom{border-bottom:1px solid #dee2e6!important}
    .d-none{display:none!important}
    .d-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}
  

Step 5: Add below code in Config File

  
    //==========Sales Pop Start==========//
    "ena_random_prod": true,
    "best_product_collection": "frontpage",
    "name_purchare": "John Smith, Alex Telles, Chris Evans, Jack Hoob, James Laura, Daniel Packer",
    "address_purchare": "North Caroline St, Herkimer NY 13350-Lynnway, Lynn MA 1905-State Route 3, Fulton NY 13069 Fairgrounds Memorial Pkwy, Ithaca NY 14850 Fairhaven Commons Way, Fairhaven MA 2719",
    "lr_randomprod": "left",
    "ena_popup_cookie": false,
    "content_cookie": "This website uses cookies to ensure you get the best experience on our website.",
    "color_background_fv1": "#3b3c41",
    "color_title_fv1": "#fff",
    "color_content_fv1": "#868686",
    "color_border_bottom_top_fv1": "#434448",
    "color_background_fv2": "#ffffff",
    "color_title_fv2": "#000000",
    "color_content_fv2": "#9a9a9a",
    "color_border_bottom_top_fv2": "#dddddd",
    "color_bordertop_fv3": "#e8e8e8",
    "color_content_fv3": "#000",
    "color_hover_content_fv3": "#2dbbf0",
    "color_social_fv3": "#222222",
    "color_bg_social_fv3": "#f2f2f2",
    "color_background_fv4": "#f3f6fa",
    "color_title_fv4": "#000",
    "color_content_fv4": "#868686",
    "color_bordercopyright_fv4": "#e8e8f2",
    "color_hover_content_fv4": "#83b735",
    "color_bgnewletter_fv4": "#2d2d2d",
    "color_placehover_fv4": "#5e5e5e",
    "color_background_fv5": "#333a3a",
    "color_title_fv5": "#fff",
    "color_content_fv5": "#9e9e9e",
    "color_border_social_fv5": "#363636",
    "color_social_fv5": "#000000",
    "color_bordertop_fv6": "#e8e8e8",
    "color_content_fv6": "#000000",
    "color_hover_content_fv6": "#2dbbf0",
    "color_social_fv6": "#000000",
    "color_bg_social_fv6": "#000000",
    "color_hover_social_fv6": "#fff",
    "color_background_fv6": "#f6f6f6",
    "color_title_fv6": "#000",
    "color_bgsocial_fv6": "#333",
    "color_border_center_fv6": "#dadada",
    "color_copyright_fv6": "#a5a5a5",
    "color_bg_fv3": "#f4f4f4",
    "color_menu_fv3": "#333333",
    "color_hover_menu_fv3": "#000",
    "color_copyright_fv3": "#aaa9a9",
    "color_social_ok_fv3": "#fff",
    "color_bgsocial_fv3": "#222222",
    "color_bgsocial_fv1": "#222",
    "color_placehover_fv1": "#495057",
    "color_bordertop_fv2": "#e5e5e5",
    "color_border_fv2": "#e1e1e1",
    "color_social_fv2": "#000",
    "icon_mail_fv4": "icon-mail",
    "enable_sticky_hdv1": true,
    "hdv1_enable_absolute": false,
    "hdv1_bg_header_normal": "#ffffff",
    "hdv1_bg_header": "#fff",
    "hdv1_color_text": "#000000",
    "hdv2_bg_header": "#fff",
    "hdv2_bg_header_sticky": "#ffffff",
    "hdv2_color_text": "#1e1e1e",
    "hdv3_bg_header_normal": "#ffffff",
    "hdv3_bg_header_sticky": "#ffffff",
    "hdv3_color_text": "#000000",
    "hdv4_bg_header_normal": "#ffffff",
    "hdv4_bg_header_sticky": "#ffffff",
    "hdv4_color_text": "#000000",
    "hdv5_bg_header_normal": "#ffffff",
    "hdv5_bg_header_sticky": "#ffffff",
    "hdv5_color_text": "#000000",
    "hdv3_bg_header": "rgba(0,0,0,0)",
    "hot_label_color": "#000000",
    "hot_label_text_color": "#ffffff",
    "sold_out_label_color": "#000000",
    "sold_out_label_text_color": "#ffffff",
    "body_color": "#ffffff",
    "dark_color": "#000000",
    "gray_color": "#555555",
    "white_color": "#ffffff",
    "primary_color": "#000000",
    "sliver_color": "#999999",
    "navi_color": "#1b2b3a",
    "blue_color": "#43567e",
    "smoke_color": "#cccccc",
    "border_color": "#e5e5e5",
    //==========Sales Pop Finish==========//
  

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top