Website Intro
The Website Intro feature in the Materia theme allows you to display a stylish animation when visitors land on your store. This can be used for brand impact, creating anticipation, or adding personality to your site before the main content loads.
Enable Website Intro
Enable Website Intro Toggle this setting ON to activate the intro animation. When active, a full-screen animation will appear before your website loads.
Display Behavior
You can control when and how often the intro appears.
Show the intro only on the first load of the website
If enabled: the intro will only display once per visitor (on their first visit)
If disabled: use the options below to control behavior
Behavior Options
Choose how the intro behaves across page visits:
Show always (Testing Mode) Displays the intro every time — great for previewing and testing the animation
Show on every page The intro appears each time a page is loaded
Show only on first access Displays the intro once per browser session
Show only once per day Uses cookies or local storage to prevent repeat appearances until the next day
💡 To preview this mode repeatedly, open your site in a different browser or incognito.
Intro Duration
Intro Duration (seconds)
Set how long the animation stays visible.
Example: 4 seconds = the intro will disappear after 4 seconds.
Background Customization
Enable Background Color Instead of Image
When enabled: uses a solid background color
When disabled: you can upload an intro background image
Background Color
Select the background color to display during the intro (e.g., #000000 for black)
Background Image
Upload an image if you prefer a visual intro background instead of a solid color.
When a background image is selected, it will override the background color.
Background Image Brightness
Adjust brightness (0 = very dark, 100 = normal) Use this if your background image is too light or dark by default.
Background Image Blur (px)
Apply a blur effect to the background image.
Higher values = stronger blur (e.g., 0 = sharp, 20 = very soft and blurred)
Logo Display Settings
Intro Logo Image
Upload your logo to display it during the animation. Recommended format: PNG with transparent background.
Logo Image Size (px)
Control the size of the logo in pixels (default: 170px)
Logo Animation
Select an animation effect for the logo:
Outline Glow (pulsing)
Static
Fade-in
(More options may be available depending on your version)
Intro Loading Text
Enable Text Above Loading Bar
Toggle this ON to display a custom message above the loading bar.
Intro Loading Text
Write the message you want displayed (e.g., Welcome, Loading your experience, etc.)
Intro Loading Text Color
Choose the color of the loading text (e.g., #FFFFFF for white)
Intro Loading Text Font Size (px)
Set how big the intro text should appear (e.g., 20)
Loading Bar Style
Loading Bar Style
Choose a visual style for the loading animation bar
(Example: Style 1, Style 2, etc.)
Loading Bar Unfilled Color
Choose the background color of the loading bar (what’s not filled yet)
Loading Bar Filled Color
Choose the color that fills the loading bar as it progresses
Enable White Glow for Loading Bar
Toggle this ON to give the filled portion a subtle white glow effect
Final Tips
Use a simple logo and short duration for faster experiences
Make sure your intro does not distract from loading speed
Try combining blurred backgrounds with glowing text/logo for premium feel
Always preview behavior in incognito mode to test "first load" settings
Last updated