How to add collection carousel indicator on Craft theme?

Store Design

Topic summary

Adding arrow indicators to the collection carousel in the Shopify Craft theme. The goal is to show previous/next slider buttons on collection pages and hide the slide counter.

Initial approach: Add CSS in Customize > Sections > Custom CSS to force .slider-buttons visible, position .slider-button at vertical center (top: 50%, translateY), dim disabled buttons, hide .slider-counter, and set prev/next buttons to left/right edges.

Issue: The Custom CSS could not be saved, with an error shown in a screenshot. The screenshot also references the desired arrow behavior from another site.

Updated steps: Edit code and place the CSS at the bottom of Assets > base.css, using collection-scoped selectors (e.g., .collection .slider-button, .collection .slider-counter). Remove the previously added Custom CSS.

Technical notes: slider-component and slider-button are theme elements for carousel navigation; scoping to .collection ensures styles apply only on collection pages. Hiding .slider-counter removes the numeric indicator in favor of arrows.

Status: A revised solution and location change were provided; confirmation from the requester is pending. The discussion appears close to resolution without further disagreements.

Summarized with AI on January 31. AI used: gpt-5.
1

Looking to add a little arrow on the collection as referenced from a different website in the screenshot below.

https://prnt.sc/xlifokvhfaEx

Best response will be accepted as solution and liked, thank you for your time!

2

Hi @Trapesthetics ,

Please go to Customize > Sections > CUSTOM CSS and change all code:

.collection slider-component .slider-buttons {
	display: flex !important;
}
.slider-button {
	background: #ffffff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.slider-button[disabled] {
	opacity: 0.8;
}
.slider-counter {
	display: none !important;
}
.slider-button.slider-button--prev {
	left: 0;
}
.slider-button.slider-button--next {
	right: 0;
}

Hope it helps!

3

Hi Litos,

Your solution is exactly what I needed but there may be a minor error in the code as I am not able to save the custom css. The error I get is as referenced in the screenshot below.

https://prnt.sc/aT2EzisFloK_

Thank you so much for the help, I will accept your solution if you’re able to correct it.

4

Hi @Trapesthetics ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.collection slider-component .slider-buttons {
	display: flex !important;
}
.collection .slider-button {
	background: #ffffff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.collection .slider-button[disabled] {
	opacity: 0.8;
}
.collection .slider-counter {
	display: none !important;
}
.collection .slider-button.slider-button--prev {
	left: 0;
}
.collection .slider-button.slider-button--next {
	right: 0;
}

Then you need to remove the added code at CUSTOM CSS, it will work fine

1 Like