Creating a stock blinking dot

Store Design
, ,

Topic summary

A user seeks help creating a blinking red stock indicator dot (similar to a reference Japanese e-commerce site) for their Shopify store using the Symmetry theme.

Solutions Provided:

  • Built-in feature: Add an ‘Inventory level’ block through the theme customizer (Customize > Products > Default product > Product pages)

  • Custom CSS implementation:

    • Add CSS animation code to the theme’s stylesheet (theme.css or styles.css) to create a blinking dot effect
    • Insert Liquid code into product templates (product-form.liquid and product-card.liquid) to display the dot
    • Optional: Configure the indicator to appear only when inventory falls below a threshold (e.g., 5 items)
    • The animation uses a 1.5-second blink cycle alternating between full and 30% opacity

  • Alternative approach: Modify existing stock counter styling by targeting specific CSS classes

The custom solution includes both the visual blinking effect and conditional logic to show the indicator based on actual stock levels, with Japanese text (“残りわずか!” - “Almost sold out!”) for localization.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Can Someone help me create a stock blinking red dot?

image

example on this page:

I’m using symmetry theme:

Thank you!

2

Hi @Rickyxane,

Please go to Customize > Products > Default product > Product pages > Add block ‘Inventory level’. Refer to the instructions
If I helped you, then a Like would be truly appreciated.

3

Hey @Rickyxane,

Hope you’re doing well!

I totally get what you’re going for - those little red dots really grab attention and create that sense of urgency that helps with conversions. Here’s exactly what you need to do:

First, let’s add the CSS code:

Log into your Shopify admin, then go to Online Store > Themes > Actions > Edit code. Look for your main CSS file (it’s usually called theme.css or styles.css in the assets folder) and just paste this at the bottom:

.stock-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #ff4444;
  border-radius: 50%;
  animation: blink 1.5s infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

Next, add it to your product templates:

Since you’re using Symmetry, you’ll want to edit a couple files. Look for sections/product-form.liquid for your product pages, and snippets/product-card.liquid for your collection pages.

Find where your stock text shows up and add this:

{% if product.available %}
  <span class="stock-dot"></span>残りわずか！
{% endif %}

If you want to get fancy and only show it when stock is actually low, try this instead:

{% assign total_inventory = 0 %}
{% for variant in product.variants %}
  {% assign total_inventory = total_inventory | plus: variant.inventory_quantity %}
{% endfor %}

{% if total_inventory <= 5 and total_inventory > 0 %}
  <span class="stock-dot"></span>残りわずか！
{% endif %}

This way it only appears when you have 5 or fewer items left. You can change that number to whatever works for your inventory levels.

The best part is this works perfectly with your existing Symmetry styling and looks great on both desktop and mobile. The animation is smooth and won’t slow down your site at all.

Once you get it set up, feel free to reach out if you want to tweak the color, speed, or anything else. It’s super easy to customize!

Let me know how it goes!

Best,
Shubham | Untechnickle

4

Hi @Rickyxane ,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

span.heymerch-stockcount-wrapper-stock circle {
    stroke: rgb(217, 49, 37);
    fill: rgb(217, 49, 37);
}