How to highlight one of your products as a Best Seller?

A great way to persuade a buyer or draw more attention to a specific product is by highlighting it as a "Best Seller" among your other products being offered. 



Watch Video: https://www.loom.com/share/7d8fbf2362f64319b674d63af40c5df5

Video Recap: 
To add this feature to your page, you will want to copy the snippet of code below and place it in the footer of the tracking code area of your page. The only change that needs to be done to the code is to add your product ID to it. 

Custom Code: 

<style>
span.best-seller-head {
  font-weight: bold;
  color: red;
  text-transform: uppercase;
}
input[type='radio'] {
  vertical-align: top;
}
.elOrderProductOptinProductName label {
  display: inline-block;
  max-width: 65%;
}
div.best-seller {
  font-weight: bold;
  background-color: #FDF107;
  border: 1px solid #000000;
  margin: 0 -28px .5em;
  padding: 10px 25px;
  font-size: 1.1em;
  -webkit-box-shadow: 0px 10px 5px -5px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 10px 5px -5px rgba(0,0,0,0.5);
  box-shadow: 0px 10px 5px -5px rgba(0,0,0,0.5);
}
.activeRadioProduct {
    background: inherit !important;
}
</style>
<script>

$(function() {
    var productId = "4048396"; //Product ID
  var head = "Best Seller"; 
    $('.elOrderProductOptinProductName input[value="'+productId+'"]').siblings('label').html('<span class="best-seller-head">'+head+'</span><br />'+$('.elOrderProductOptinProductName input[value="'+productId+'"]').siblings('label').html());
    $('.elOrderProductOptinProductName input[value="'+productId+'"]').closest('.elOrderProductOptinProducts').addClass('best-seller');
});
</script>

Note: If you copy the above code and it appears to not function after adding it to the page, please click HERE and copy it from the document and use it instead. 

Where to paste code: The code must be pasted into the Footer Code area in your Order Page. To locate this area, click on Settings>Tracking Code, Footer Code as such: 



Locating your product's ID: 
In order for your product to highlight, you must enter that specific product's ID in the code. An easy way to locate your product's ID, is to click as if you were going to edit your product, and in the browsers search bar, you will see the ID next to "product" as seen here: 



Adding your Product's ID to the code: 
Onced you have copied your product's ID you will need to paste it into the code where it says "Product ID". (Replace the existing ID in the provided number with yours). 


Once you have added your Product's ID, be sure to click Save before exiting the Editor. 

Important Note: Due to the custom and varying nature of custom code, our support team is unable to provide assistance with any custom code added to your page. If you experience troubles while setting up this custom code, please consult a qualified developer to assist you.