Add a 'Best Seller' Badge on Shopify Product Page in 5 minutes

Looking to highlight your most popular products and give them the attention they deserve? Adding a “Best Seller” badge to your Shopify product page is a quick and effective way to capture customer interest and increase sales. In just 5 minutes, you can implement this eye-catching badge to help your top-performing products stand out and give your store a dynamic, professional look. Follow this step-by-step tutorial to easily add a “Best Seller” badge to your Shopify store and start driving more conversions today! Note in this tutorial, I will be working from the Dawn theme.

Code: https://github.com/ndrishinski/blogs/commit/2dcebd2936845c6576c8495565a74d205e50b9ba

Add Block to Shopify Section

In Dawn, the ‘main-product.liquid’ file under the ‘sections’ directory is where the product page is being rendered. The first thing we are going to do is find where the ‘section.blocks’ is looped thru and displayed. We are going to add our block (that we are about to create) so it will be displayed properly.

          {%- for block in section.blocks -%}
            {%- case block.type -%}
              {%- when '@app' -%}
                {% render block %}
              {%- when 'best-seller' -%}                      <!-- add here -->
                {% render 'best-seller' tags: product.tags %} <!-- and here -->
              {%- when 'text' -%}
                 ...

Now it will display when we add it to the customizer, but we still need to add it to our section schema so we can find it. Towards the bottom of the file under the {% schema %} tags, we want to add our block like so:

"blocks": [
    {
      "type": "@app"
    },
    {
      "type": "best-seller",
      "name": "Best Seller Tag",
      "limit": 1
    },
...

Now our block exists in our schema, so we can add it via the customizer. But it’s not displaying anything yet because we haven’t created the ‘best-seller.liquid’ snippet that we are referencing above!

Create Badge in Snippets Directory

In the ‘snippets’ directory, we want to create a new file called ‘best-seller.liquid’. Here we can paste the following code:

<style>
  .tag {
    height: 32px;
    width: 100px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #007FFF;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    flex-direction: row;
 }
  .tag span {
    font-size: 16px;
  }
</style>

{% if tags contains 'best-seller' %}
  <div class="tag">
    <span class="material-symbols-outlined">
      sell
      </span>
    <p>Best Seller</p>
  </div>
{% endif %}

This includes our CSS and Liquid code required to display this badge when the ‘best-seller’ tag is applied to a product. Note that you can change the background color to whatever matches your color scheme. Let’s add that tag now in the Shopify dashboard now.

Now very quickly, for our icon we need to import the Material Icons library. We’ll do that using a CDN. Open ‘theme.liquid’ and paste in this code between the <head></head> tags.

...
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
...

Add Tag to Shopify Products

Now before we can show this badge, we need to add the tag to our products so our code knows when to display it. In the dashboard navigate to ‘Products’ and click into whichever product you’d like and under the ‘tags’ area, add ‘best-seller’.

Add Block in Theme Customizer

Now our code and tags are in place, we can simply open our theme in the Customizer and navigate to the Default Product page. Then simply click the arrow to add a block and look for our newly created block!

Conclusion

And that’s it! In just a few minutes, you’ve successfully added a “Best Seller” badge to your Shopify product page, giving your store a fresh, engaging touch. This simple yet impactful addition can significantly enhance your product presentation and help guide your customers toward the items they love most. Keep experimenting with different design elements to make your store even more unique and memorable. Happy selling!

Shopify Development