Slider Controls
Controls the global pagination style, button style, arrow type, and colors for all sliders and carousels in your store.
Where to find it
- In your Shopify admin, go to Online Store → Themes → Customize
- Click the Theme settings (gear icon) in the left panel
- Click Slider controls
Settings
Slider pagination style
| Setting | Type | Default | Options |
|---|---|---|---|
| `slider_pagination_style` | Select | Pill | Default, Pill, Active pill, Number |
Choose the visual style for pagination indicators on sliders. "Default" shows standard dots, "Pill" shows rounded pill shapes, "Active pill" highlights the active slide with a pill shape, and "Number" displays numeric page indicators.
Slider button style
| Setting | Type | Default | Options |
|---|---|---|---|
| `slider_btn_style` | Select | Default | Default, Circle |
Sets the shape of the navigation buttons on sliders. "Default" uses the standard button shape, and "Circle" renders buttons as circles.
Arrow type
| Setting | Type | Default | Options |
|---|---|---|---|
| `arrow_type` | Select | Chevron | Chevron, Arrow, Caret |
Determines the icon used inside slider navigation buttons. Choose between a chevron, a full arrow, or a caret.
Enable border
| Setting | Type | Default |
|---|---|---|
| `slider_button_border` | Checkbox | Off |
When enabled, a border is drawn around the slider navigation buttons.
Colors (Light)
These color settings apply when your store is displayed in light mode.
Pagination dot color
| Setting | Type | Default |
|---|---|---|
| `pagination_light_dot` | Color | #D1D5DB |
The color of inactive pagination dots.
Active pagination color
| Setting | Type | Default |
|---|---|---|
| `pagination_light_dot_active` | Color | #111827 |
The color of the currently active pagination dot.
Pagination text color
| Setting | Type | Default |
|---|---|---|
| `pagination_light_text_color` | Color | #D1D5DB |
The color of inactive pagination numbers. This setting is only visible when the pagination style is set to "Number".
Active pagination text color
| Setting | Type | Default |
|---|---|---|
| `pagination_light_text_active` | Color | #111827 |
The color of the active pagination number. This setting is only visible when the pagination style is set to "Number".
Arrow button color
| Setting | Type | Default |
|---|---|---|
| `slider_btn_color_light` | Color | #ffffff |
The background color of the slider navigation buttons.
Button border color
| Setting | Type | Default |
|---|---|---|
| `slider_button_border_color_light` | Color | #000 |
The color of the border around slider navigation buttons. Only visible when "Enable border" is turned on.
Slider arrow color
| Setting | Type | Default |
|---|---|---|
| `slider_arrow_color_light` | Color | #000 |
The color of the arrow icon inside the slider navigation buttons.
Progress color
| Setting | Type | Default |
|---|---|---|
| `progress_light_track` | Color | #f1f1f1 |
The color of the progress bar track (the unfilled portion).
| Setting | Type | Default |
|---|---|---|
| `progress_light_thumb` | Color | #888888 |
The color of the progress bar thumb (the filled portion that indicates current position).
Colors (Dark)
These color settings apply when your store is displayed in dark mode.
Pagination dot color
| Setting | Type | Default |
|---|---|---|
| `pagination_dark_dot` | Color | #D1D5DB |
The color of inactive pagination dots.
Active pagination color
| Setting | Type | Default |
|---|---|---|
| `pagination_dark_dot_active` | Color | #111827 |
The color of the currently active pagination dot.
Pagination text color
| Setting | Type | Default |
|---|---|---|
| `pagination_dark_text_color` | Color | — |
The color of inactive pagination numbers. This setting is only visible when the pagination style is set to "Number".
Active pagination text color
| Setting | Type | Default |
|---|---|---|
| `pagination_dark_text_active` | Color | #111827 |
The color of the active pagination number. This setting is only visible when the pagination style is set to "Number".
Arrow button color
| Setting | Type | Default |
|---|---|---|
| `slider_btn_color_dark` | Color | #ffffff |
The background color of the slider navigation buttons.
Button border color
| Setting | Type | Default |
|---|---|---|
| `slider_button_border_color_dark` | Color | #000 |
The color of the border around slider navigation buttons. Only visible when "Enable border" is turned on.
Slider arrow color
| Setting | Type | Default |
|---|---|---|
| `slider_arrow_color_dark` | Color | #000 |
The color of the arrow icon inside the slider navigation buttons.
Progress color
| Setting | Type | Default |
|---|---|---|
| `progress_dark_track` | Color | #f1f1f1 |
The color of the progress bar track (the unfilled portion).
| Setting | Type | Default |
|---|---|---|
| `progress_dark_thumb` | Color | #888888 |
The color of the progress bar thumb (the filled portion that indicates current position).