The overlay setting controls the color and transparency layer that sits on top of your timer’s background.
It helps improve text readability and gives you more control over the overall design.
What is an overlay?
An overlay is a semi-transparent layer placed over your background image or color.
It makes your text easier to read, especially when using busy or bright backgrounds.
How it works
There are two main settings:
Overlay color
This is the color that appears on top of your background.
You can choose any color
If left empty, it uses a default white overlay
You can also set it to transparent if you do not want any color applied
Overlay opacity
This controls how strong the overlay appears.
0% = no overlay (fully transparent)
100% = fully solid color
Default is 75%
Example
If you set:
Overlay color: Black
Overlay opacity: 75%
Your background will appear darker, making white text easier to read.
If you set:
Overlay opacity: 0%
The overlay will not be visible at all.
When should I use this?
Use the overlay setting when:
Your background image makes text hard to read
You want a darker or lighter design style
You want to improve contrast for better visibility
How to adjust the overlay
Go to Shopify Admin → Online Store → Edit Theme
Select the Flash Countdown Timer app block
Find the Overlay color setting and choose your color
Adjust the Overlay opacity slider
Click Save
Tips for best results
Use darker overlays for bright or busy images
Use lighter overlays for dark backgrounds
Start with 75% and adjust based on readability
Need help?
If your text is hard to read or you want help styling your timer, reach out to our support team.