Appearance
Style the loading indicator, Load More button and messages, and edit every word shoppers see and hear.
- Loading Indicator, Load More Button, Status Messages and Button Labels cards
- Live Preview in the sidebar, above the Reset to Defaults card
The Live Preview in the sidebar shows the loader, Load More button, end message and error message, and updates as you change settings. Click Save Changes to apply them to your store.
Loading indicator
| Setting | Default | Options |
|---|---|---|
| Indicator Style | Spinner | Spinner, Dots |
| Indicator Color | #2563eb | |
| Indicator Size (px) | 32 | 16–64 |
Pro adds skeleton cards, a progress bar and more: Loading styles.
Load More button
These also style the Try again button.
Style
Button: a filled button. Text: plain text, like a link. The color settings below change with the style you pick.
| Setting | Shown for | Default |
|---|---|---|
| Background · Text Color | Button | #111827 · #ffffff |
| Hover Background · Hover Text Color | Button | #2563eb · #ffffff (the hover background is also the focus outline) |
| Corner Radius (px) | Button | 6 (0–50) |
| Text Color · Hover Color | Text | #111827 · #2563eb (the hover color is also the focus outline) |
| Underline | Text | On |
| Alignment | Both | Center (or Left, Right). Also aligns the loader and messages |
On phones (480 px and narrower) the filled button is full width; the Text style keeps its natural width. On right-to-left sites Left and Right are mirrored.
Status messages
Shown and announced to screen readers.
| Setting | Default |
|---|---|
| Text Color · Error Text Color | #4b5563 · #b91c1c |
| Loading | Loading more products… |
| End of Results | You've seen all the products. |
| Error | We couldn't load more products. |
| Show End of Results Message | On. When off, it's hidden but still announced to screen readers |
Button labels
| Setting | Default |
|---|---|
| Load More Button | Load more products |
| Try Again Button | Try again |
- Leave a text field empty to use its default, which follows your site language.
- Colors accept hex (
#rgb,#rrggbb, with or without alpha) andrgb()/rgba()/hsl()/hsla()values; the color picker has an opacity slider. - An invalid color is replaced with the default when you save.