Use this article to extend your collection pages with your own code: run custom JavaScript when Smart Collections reaches a particular point in its lifecycle, and add CSS scoped to your collection pages. Both live in the Advanced Settings section of the Collection Template Editor, so neither requires editing your Shopify theme. To find them, go to Smart Collections → Template & Settings in your Rebuy admin, open the Collection Template Editor, then scroll to Advanced Settings in the editor's left navigation, which contains two screens: Event Callbacks and Custom CSS. This article is part of the Smart Collections Template & Settings documentation set — for a general introduction, see Smart Collections: Template & Settings Overview.
Open the Advanced Settings section
Both screens are reached the same way:
In your Rebuy admin, go to Smart Collections → Template & Settings.
On the Collection Template Editor card, click the EDIT gear icon to open the editor.
In the editor's left navigation, scroll to Advanced Settings.
Click either Event Callbacks or Custom CSS.
Run custom JavaScript on a Smart Collections event
The Event Callbacks screen lets you run your own JavaScript at specific points in the Smart Collections lifecycle, so you can integrate with other tools or track shopper behaviour without a theme-level implementation. The editor describes it as Configure event callbacks for various user actions within the Collection Template lifecycle, and notes that each callback will trigger custom JavaScript, enabling you to integrate with other tools or track specific user behaviors.
To set one up:
In your Rebuy admin, go to Smart Collections > Template & Settings.
On the Collection Template Editor card, click the EDIT gear icon to open the editor.
In the editor's left navigation, scroll to Advanced Settings.
Click Event Callbacks to expand the callback configuration.
Paste your JavaScript into the relevant callback box and click Save.
(Screenshot above: The Smart Collections Event Callbacks configuration page, showing the individual callback code boxes)
(Animation above: The Advanced Settings group in the Collection Template Editor left navigation)
Available Smart Collections event callbacks
Smart Collections provides eight event callbacks. The table below lists each callback and the moment it fires on your collection pages:
Callback | When it fires |
Init | Triggers when the Smart Collections module initializes. |
Before Ready | Triggers just before Smart Collections becomes ready. Use this to set up any configuration before the collection renders. |
Ready | Triggers when Smart Collections is fully initialized and ready for interaction. |
Before Add | Triggers just before a product is added to the cart from Smart Collections. Use this to modify the add behavior or show confirmation dialogs. |
Add | Triggers when a product is added to the cart from Smart Collections. |
View | Triggers when a product is viewed within Smart Collections. |
Before Products Change | Triggers just before the products in the collection are updated, for example from filtering or sorting. |
Products Change | Triggers when the products displayed in the collection change, for example after filtering, sorting, or pagination. |
Note: For developer-level documentation on Smart Collections event listeners, see Rebuy Developer Documentation: Smart Collections Event Listeners.
Add CSS to your collection pages
The Custom CSS screen lets you add your own CSS to the pages where Smart Collections renders. The editor describes it as Write Custom CSS that will be applied to the Collection Template, allowing you to override any existing styles and create a unique look. Because the CSS lives in the Collection Template Editor rather than in your theme files, it survives theme updates and stays alongside the settings it affects.
To add CSS:
Open Custom CSS from Advanced Settings, following the steps above.
Add your CSS in the code editor.
Click Save.
Your CSS applies the next time your collection pages load. If your styling does not take effect, the most common cause is specificity — an existing theme selector is overriding yours.
The Custom CSS box controls which pages your CSS loads on, not which elements it is allowed to change. Once it loads on a collection page, it applies to everything on that page, exactly like any other stylesheet on your store.
(Screenshot above: The Custom CSS code editor in the Smart Collections Collection Template Editor)
Before you write custom CSS
Several things that used to require CSS are now native settings in the Collection Template Editor. Check for a native setting before writing a rule:
Product title, price, sale price, and compare at price colors are set on the Text Styling card of the Product Display page.
Add to Cart button text color, background, border color, border width, and corner radius are set on the Styling card inside the Product Display page's Call to Action slideout.
Load More button text, background, and border colors are set on the Styling card of the Pagination page.
Star rating size, star color, review text color, and background are set on the Styling card of the Product Reviews page.
Custom CSS is still the answer for anything with no native control, including font sizes, font families, and button hover states.
For a full library of Smart Collections CSS selectors and styling examples, see Smart Collections CSS Guide.
Use AI tools to write your Smart Collections code
Both the Event Callbacks boxes and the Custom CSS box expect you to bring your own code, and Rebuy publishes its developer documentation as machine-readable files built for AI assistants, so you can draft that code without reading every reference page yourself. The full walkthrough lives in Rebuy's AI Integration Guide.
Two files are available. llms.txt is a compact index of every documentation page with a short description of each, and works well for everyday questions or for tools with a smaller context window. llms-full.txt is a complete dump of the documentation, and is the better choice for callback work because it carries the actual event names and object shapes rather than only page descriptions. Rebuy's public JavaScript API includes a Rebuy.SmartCollections module for collection pages, so both files cover the surface your callbacks run against.
Every page on Rebuy's developer documentation site also has an Ask AI menu below the title, which opens that page pre-loaded in Claude or ChatGPT, or gives you its raw markdown to paste into a tool of your own.
Anything an AI tool writes for you is your own custom code, not a Rebuy setting. Test it on a development store or an unpublished theme before saving it to your live collection pages.
What Rebuy Support can help with for custom code
Rebuy Support covers the features and functionality within the standard Rebuy package. Anything you write yourself in the Event Callbacks or Custom CSS boxes is your own custom code, and it sits outside that scope. Rebuy's support policy lists the unsupported categories, which include:
Custom CSS and JavaScript, and custom scripts
Custom template modifications and troubleshooting
Headless configurations
Native cart configurations
Third-party app integrations and conflicts
In practice, for Smart Collections this means Rebuy Support can:
Confirm which Smart Collections settings exist and what each one does
Point you to the right documentation, including the selector library in the Smart Collections CSS Guide
Investigate behavior in Smart Collections itself, once it is reproducible without your custom code
And cannot write, debug, or troubleshoot the JavaScript in your callbacks or the CSS in your Custom CSS box.
If you report a Smart Collections problem while custom code is in place, Support will usually ask you to reproduce it with that code removed. Turn off each callback's enable toggle and clear the Custom CSS box, then check whether the problem still happens. If it stops, the cause is in your code; if it continues, Support can investigate it as a Smart Collections issue.
Get help from a Rebuy Partner
If you do not have a developer, Rebuy's Partner team can match you with an accredited agency that has built this kind of customization before. Complete the matchmaking form at rebuy.partnerpage.io/matchmaking, or email [email protected]. You can also browse the Rebuy Partner Directory.
Frequently asked questions
Do I need to edit my Shopify theme to add custom code to Smart Collections?
No, you do not need to edit your Shopify theme to add custom code to Smart Collections. Both the Event Callbacks and Custom CSS screens live inside the Collection Template Editor under Advanced Settings, and code added there applies to your collection pages without any theme file changes. That keeps your Smart Collections customizations separate from your theme, so a theme update cannot overwrite them.
Does custom CSS added in the Collection Template Editor only affect Smart Collections?
No, custom CSS added in the Collection Template Editor is not confined to Smart Collections. The box controls which pages your CSS loads on — the pages where Smart Collections renders — but once it loads, it applies to that whole page like any other stylesheet, including your theme's header and footer and your Smart Cart when a shopper opens it. Prefix your selectors with .rebuy-smart-collections so a change reaches only Smart Collections. Every Custom CSS box in Rebuy works this way: each one controls where your CSS loads, not what it is allowed to change.
Which Rebuy editor should I add my CSS to?
Add your CSS in the editor for the feature you are styling, and scope your selectors to that feature. Because a Custom CSS box only controls which pages your CSS loads on, putting Smart Collections styling in the Smart Collections editor means it loads on collection pages rather than across your whole store, which keeps the blast radius small and keeps the CSS next to the settings it relates to. It does not, on its own, stop that CSS from touching other elements on the page — your selectors do that.
Why isn't my Smart Collections event callback firing?
Check three things in order. First, confirm the callback's enable toggle is on — saving code into the box does not run it by itself. Second, confirm the master Collections Enabled toggle is on, since callbacks only run where Smart Collections is rendering. Third, check your JavaScript for syntax errors, because a callback that throws while being parsed never executes. If it still does not fire, use the pre-filled example in the callback box to confirm which variables are in scope for that specific event — referencing a variable that event does not receive, such as product inside Init, will throw.
Can I use custom CSS to change the Add to Cart button colour in Smart Collections?
You can, but you no longer need to. The Add to Cart button's text colour, background, border colour, border width, and corner radius are all native settings on the Styling card inside the Product Display page's Call To Action flyout. Use those instead — they survive independently of your CSS and are easier to reason about. Keep custom CSS for the things with no native control, such as the button's hover state or font size.
Can I use ChatGPT or Claude to write my Smart Collections event callbacks or custom CSS?
Yes, you can use ChatGPT, Claude, or another AI tool to draft Smart Collections event callbacks and custom CSS. Give the tool Rebuy's machine-readable documentation first — llms.txt for a compact index, or llms-full.txt for the complete dump — so it works from Rebuy's actual event names and objects instead of guessing at them. Treat whatever it produces as your own custom code and test it before saving it to your live collection pages. Rebuy's AI Integration Guide covers the setup for each tool.