Draw customers in with animated text made from moving particles in the Particle banner —perfect for bold branding, storytelling, or high-impact promotions. This section grabs attention with motion, energy, and style.
🧰 How to install the section in your theme
- Open Theme Updater & Backups in your Apps admin
- Open Theme sections
- Click Install below the section. You can also click Preview to see the section in a demo storefront
- On the right side of the page, use the Choose theme dropdown to select the theme you want to enhance with the new section
- Click Install
Add the section to a template
Click Customize to open the theme editor for the selected theme.
Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.
Scroll down to the bottom of your default sections list and select 🧰 Particle banner.
Customize section settings
Click the Particle banner section to open its settings.
Text
Add the content you want to display on the particle banner.
This section involves animation: Brief messages are suggested, and it is recommended to use this section only once per page for best performance.
For this section, you can also choose the Font based on the available ones within the font selector.
Line height primarily take effect when you have two or more rows of texts, and this will determine the spacing between each rows.
Similarly, Desktop text width would determine the amount of space the text would occupy horizontally.
Animation Duration
This determines the total time the animation would take before completing. Choosing a lower number would make the animation faster, while choosing a higher number makes it slower.
Desktop aspect ratio
The section features four different aspect ratio options:
- Landscape (3:2)
- Wide (16:9)
- Ultra-wide (21:9)
- Ultra-wide+ (32:9)
An Image can also be uploaded as background if needed. If this is left blank, your chosen Background color will be displayed by default.
Background link can also be added to make entire section to be clickable.
Mobile settings
The mobile layout has a separate Text field for the option to display alternate text in mobile devices.
Text width and Mobile aspect ratio are also available for more flexibility.
Mobile image can be filled if you would like to display a different image background for smaller devices. Otherwise, this will show the desktop image in a smaller scale, or the chosen background color.
Select colors
Choose colors for the section's Text color and Background color.
Background gradient also offers several color combinations.
In the Image overlay opacity settings, choosing a smaller % would make the background image lighter, while choosing a higher opacity would make it darker. The latter is helpful for emphasizing the texts added in the section.
Adjust spacing
Use the Top margin and Bottom margin sliders to increase or decrease the margins of the section.
Adding a Button group
The Particle banner can also display CTA buttons.
Each Button has its own set of settings including Label, Link, Button Style, Background Color, and Text Color:
When adding a Button group, it will always show two buttons by default. Removing the Button label would remove the button in case you want to display less.
Additionally, you can only add one set of Button group for each Particle banner.