How to Create Fake Sales Pop-Ups on Your Shopify Store

Adding sales pop-ups to your Shopify store can create a sense of urgency and social proof, encouraging potential customers to make a purchase. While it's always best to be transparent and honest with your customers, some store owners may choose to implement fake sales pop-ups to simulate recent purchases. Here's a step-by-step guide on how to create such pop-ups using custom code in your Shopify store.

Step 1: Create a New Section

First, you'll need to create a new section in your Shopify theme. To do this, follow these steps:

1. Go to the Shopify Admin Dashboard.
2. Navigate to Online Store > Themes.
3. Click on Actions > Edit Code for the theme you want to modify.
4. Under the Sections directory, click on Add a new section.
5. Name the section customer-purchased.

Conclusion

This guide walks you through creating a fake sales pop-up on your Shopify store using a custom section.

Full code

            
            <style>
  .customer-who-purchased a{
    text-decoration: none;
  }
  .customer-who-purchased {  
    pointer-events: none;
    margin: 0;
    height: 80px; 
    max-width: 500px;
    min-width: 400px;
    position: fixed;
    bottom: 35px;
    width: auto;
    z-index: 3;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
  }

  .customer-who-purchased.text-left { left: 35px; }
  .customer-who-purchased.text-right { right: 35px; }

  .customer-who-purchased .product-data {
    display: block;
    height: auto;
    margin: 20px 10px; 
    opacity: 0;
    padding: 10px 20px 10px 100px; 
    position: absolute;
    bottom: -30px;
    left: 0;
    visibility: hidden;
    width: auto;
    border-radius: 0;
    -webkit-transition: all cubic-bezier(.47,1.21,.47,1.21) .3s;
    transition: all cubic-bezier(.47,1.21,.47,1.21) .3s;
  }

  .customer-who-purchased .product-data:before {
    background-color: {{ section.settings.bg_color }};
    content: "";
    display: block;
    height: auto;
    margin: -15px -20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    width: auto;
    z-index: -1;
    border-radius: 12px;
    -webkit-box-shadow: 0 0 10px rgb(26 26 26 / 15%);
    box-shadow: 0 0 10px rgb(26 26 26 / 15%);
  }

  .customer-who-purchased .product-data.active { pointer-events: all; opacity: 1; bottom: 0; visibility: visible; }
  .customer-who-purchased .product-data p {letter-spacing: normal;color: var(--gradient-base-accent-1);margin-bottom: 5px; font-size: 14px; line-height: 20px; margin-top: 6px; } /* Reduced font size and line height */
  .customer-who-purchased .product-data p span {
    display: inline;
    padding: 3px; 
  }

  .customer-who-purchased .product-data span.title, 
  .customer-who-purchased .product-data p span.location { font-weight: 600; }  
  .customer-who-purchased .product-data p span.location{color: {{ section.settings.location_color }};}
  .customer-who-purchased .product-data p span.purchased { padding-left: 0; color: {{ section.settings.pretext_text_color }};}

  .customer-who-purchased .product-data p span.timing {     
    font-size: 12px; 
    font-weight: 300;
    position: absolute;
    bottom: -8px; 
    right: -8px; 
    color: {{ section.settings.timing_color }};
    font-family: var(--font-heading-family);
  }

  .customer-who-purchased .product-data > a img {
    position: absolute;
    left: -10px;
    top: 50%;
    width: 100px; 
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .customer-who-purchased .product-data .dT_close {
    height: 8px; 
    position: absolute;
    right: -2px;
    top: 8px; 
    text-align: center;
    width: 8px;
    pointer-events: all;
    border-radius: 8px;
    -webkit-transform: translate(25%, -50%);
    transform: translate(25%, -50%);
  }

  .customer-who-purchased .product-data .dT_close svg { 
    height: 12px;
    margin: auto; 
    position: absolute; 
    right: -16px; 
    top: -8px; 
    width: 12px;
    -webkit-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
    -webkit-transition: inherit; 
    transition: inherit; 
    padding: 3px;
    color: {{ section.settings.close_btn_color }} !important;
    background: white;
    transition: all 0.3s linear;
  }

  .customer-who-purchased .product-data .dT_close:hover svg {
    color: {{ section.settings.close_btn_hover_color }} !important;
    background: {{ section.settings.close_btn_hover_bg_color }};
  }

  @media (max-width:576px) {
    .customer-who-purchased {
      max-width: 90%;
      min-width: 90%;
      left: 0 !important;
      right: 0!important;
      margin: auto;
      display: block;
      height: 60px; 
    }
  }

  @media (max-width: 380px) {
    .customer-who-purchased {
      max-width: 85%;
      min-width: 85%;
      left: 0px !important;
      height: 50px;
    }  
    .customer-who-purchased .product-data {
      padding: 10px 20px 10px 80px;
    }
    .customer-who-purchased p{
      margin: 0;
    }
    .customer-who-purchased .product-data > a img {
      width: 80px;
    }
  }

    @media (max-width: 320px) { 
    .customer-who-purchased .product-data {
      padding: 10px 20px 10px 60px;
    }
    .customer-who-purchased .product-data > a img {
      width: 60px; 
    }
  }

  
  .customer-who-purchased .product-data span.title {
    color: black;
    transition: all 0.3s linear;
    text-transform: capitalize;
  }
  .customer-who-purchased .product-data span.title:hover {
    color: rgb(var(--color-base-outline-button-labels));
  } 
  .product-data{position: relative;}
  .product-data.active::after {
    content: '';
    position: absolute;
    left: -20px;
    bottom: -15px;
    height: 4px;
    background-color: {{ section.settings.active_bg_color }};
    animation: purchaesd-product {{ section.settings.pop_duration }}s linear infinite reverse;
  }

  @keyframes purchaesd-product {
    0% {width: 0;}
    100% {width:113%;}
  }
</style>

{%- if section.settings.enable -%}
  <!--  -->
  <div id="shopify-section-suggested-products" class="shopify-section customer-purchased reveal">
    <ul class="customer-who-purchased text-left">
      {%- for block in section.blocks -%}
        {%- assign product = all_products[block.settings.product] -%}
       <li class="product-data">
        <a href="{{ product.url }}" bis_skin_checked="1">            
        
          <img loading="lazy" src="{{ product.featured_image | image_url: width: 100 }}" alt="{{ product.featured_image.alt }}" width="" height="">                        

          {% assign max_length =  section.settings.show_dots_words  %}

          {% if product.title.size > max_length %}
            <span class="title">{{ product.title | truncate: max_length, "..." }}</span>
          {% else %}
            <span class="title">{{ product.title }}</span>
          {% endif %}
        
        </a>
        <p><span class="purchased">{{ section.settings.text }}</span><span class="location">{{ block.settings.local }}</span><span class="timing">{{ block.settings.time }}</span></p>  
       <a href="javascript:void(0)" title="Close" class="dT_close" bis_skin_checked="1">
          <svg id="Group_24924" data-name="Group 24924" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 25 25">
            <defs>
              <clipPath id="clip-path">
                <rect id="Rectangle_8252" data-name="Rectangle 8252" width="18" height="18" fill="currentcolor"></rect>
              </clipPath>
            </defs>
            <g id="Group_24923" data-name="Group 24923">
              <path id="Path_38934" data-name="Path 38934" d="M23.214,25a1.78,1.78,0,0,1-1.263-.523L.523,3.048A1.786,1.786,0,0,1,3.048.523L24.477,21.952A1.786,1.786,0,0,1,23.214,25" transform="translate(0)" fill="currentcolor"></path>
              <path id="Path_38935" data-name="Path 38935" d="M1.786,25A1.786,1.786,0,0,1,.523,21.952L21.952.523a1.786,1.786,0,1,1,2.525,2.525L3.048,24.477A1.78,1.78,0,0,1,1.786,25" transform="translate(0 0)" fill="currentcolor"></path>
            </g>
          </svg>
        </a>
      </li> 
      {%- endfor -%}
    </ul>
</div>
{%- endif -%}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<script>
  if ($.cookie('dT_suggested-cookie') == 'closed') {
    $('.customer-who-purchased').remove();
  }

  $('.dT_close').bind('click',function(){
    var cookies_duration = {{ section.settings.cookie_expiration }};
    $('.customer-who-purchased').remove();
    $.cookie('dT_suggested-cookie', 'closed', { expires: cookies_duration, path: '/' });
  });      

  var elements = $('.customer-who-purchased li');
  var init_element = 0;
  var i = 0;
  var duration = {{ section.settings.duration }} * 1000;
  var popupduration = {{ section.settings.pop_duration }} * 1000;
  //elements.css({top: 0,left: 0,}).fadeOut(1);
  elements.removeClass('active');
  function fadeInRandomElement() { 
    if ( i % 2 == 0) {
      var currentItem = elements.eq(init_element);      
      currentItem.addClass('active');
      setTimeout(function(){ 
        currentItem.removeClass('active')
      }, popupduration);

      init_element++;
      if(elements.length == init_element) {
        init_element = 0;
      }

    }

    i++;

  }

  setInterval(function(){ 
    fadeInRandomElement();
  }, duration);
</script>
{% schema %}
{
  "name": "Product Suggest",
  "max_blocks": 50,
  "settings": [
    {
      "type": "checkbox",
      "id": "enable",
      "label": "Enable"
    },
    {
      "type": "select",
      "id": "cookie_expiration",
      "label": "Cookie Expiration Time",
      "info": "When the user clicks the close button on the popup, it will disappear for the specified duration.",
      "options": [
        {
          "value": "1/1440",
          "label": "1 minutes"
        },
        {
          "value": "2/1440",
          "label": "2 minutes"
        },
        {
          "value": "5/1440",
          "label": "5 minutes"
        },
        {
          "value": "10/1440",
          "label": "10 minutes"
        },
        {
          "value": "15/1440",
          "label": "15 minutes"
        },
        {
          "value": "30/1440",
          "label": "30 minutes"
        },
        {
          "value": "1/24",
          "label": "1 hours"
        },
        {
          "value": "2/24",
          "label": "2 hours"
        },
        {
          "value": "3/24",
          "label": "3 hours"
        },
        {
          "value": "4/24",
          "label": "4 hours"
        },
        {
          "value": "5/24",
          "label": "5 hours"
        },
        {
          "value": "1",
          "label": "1 day"
        }
      ],
      "default": "1/1440"
    },
    {
      "type": "range",
      "id": "duration",
      "label": "Duration Time",
      "info": "Specify the duration for which the popup will remain hidden before being shown again.",
      "min": 5,
      "max": 20,
      "step": 1,
      "unit": "s",
      "default": 7
    },
    {
      "type": "range",
      "id": "pop_duration",
      "label": "Set popup display time on desktop must be shorter than total duration.",
      "min": 1,
      "max": 15,
      "step": 1,
      "unit": "s",
      "default": 3
    },
    {
      "type": "text",
      "id": "text",
      "label": "Pretext",
      "default": "Customer recently purchased From "
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background color",
      "default": "#fff"
    },
    {
      "type": "color",
      "id": "pretext_text_color",
      "label": "Pretext text color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "active_bg_color",
      "label": "Active Bar Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "close_btn_color",
      "label": "Close Button Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "close_btn_hover_color",
      "label": "Close Button Hover Color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "close_btn_hover_bg_color",
      "label": "Close Button Hover Background Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "location_color",
      "label": "Location Color",
      "default": "#60a9d9"
    },
    {
      "type": "color",
      "id": "timing_color",
      "label": "Timing Color",
      "default": "#888888"
    },
    {
      "type": "range",
      "id": "show_dots_words",
      "label": "Show dots if title is long",
      "min": 20,
      "max": 100,
      "step": 1,
      "unit": "s",
      "default": 20
    },
  ],
  "blocks": [
    {
      "type": "product",
      "name": "Product",
      "settings": [
        {
          "type": "product",
          "id": "product",
          "label": "Product"
        },
        {
          "type": "text",
          "id": "local",
          "label": "Local",
          "default": "in California, USA"
        },
        {
          "type": "text",
          "id": "time",
          "label": "Time",
          "default": "about 15 minutes ago"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Product Suggest"
    }
  ]
}
{% endschema %}