The Advanced Settings section of the Smart Collections Collection Template Editor is for applying custom code to your collection pages. From here you can run custom JavaScript in response to Smart Collections lifecycle events and add custom CSS scoped to your collection pages, without leaving the editor or modifying your Shopify theme.
Advanced Settings contains two blocks: Event Callbacks and Custom CSS.
This article is part of the Smart Collections Template & Settings documentation set. For the master enable toggle, Preview Mode, Sync Manager, and layout settings, see Smart Collections: Template & Settings Overview.
Event Callbacks for Smart Collections
The Event Callbacks block in the Collection Template Editor lets you run custom JavaScript in response to specific Smart Collections lifecycle events. Each configured callback triggers your custom JavaScript for that event on your collection pages, so you can extend collection behavior without a custom theme-level implementation.
(Screenshot above: The Smart Collections Event Callbacks configuration page, showing the individual callback code boxes)
How to access the Smart Collections Event Callbacks settings
To open the Event Callbacks settings:
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.
Your callback runs on your collection pages the next time they load. If it does not fire, confirm the master Collections Enabled toggle is on and that your JavaScript has no syntax errors, since a callback that throws on parse never executes.
(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.
Custom CSS for Smart Collections
The Custom CSS block in the Collection Template Editor lets you write CSS scoped specifically to your collection pages. Any CSS added here applies to the collection pages only and lets you override existing styles to create a unique look, keeping your collection styles organized in one place alongside the settings they affect.
(Screenshot above: The Custom CSS code editor in the Smart Collections Collection Template Editor)
How to access the Smart Collections Custom CSS editor
To open the Custom CSS editor:
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 Custom CSS to open the code editor.
Add your CSS and click Save.
Your CSS applies to your collection pages the next time they load. If a rule does not take effect, the most common cause is specificity: an existing theme rule is overriding yours.
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.
Frequently asked questions
Do I need to edit my Shopify theme to add custom code to Smart Collections?
No. Both the Event Callbacks and Custom CSS blocks live inside the Collection Template Editor under Advanced Settings, and code added there applies to your collection pages without any theme file changes. This keeps your Smart Collections customizations separate from your theme, so a theme update does not overwrite them.
Where does custom CSS added in the Collection Template Editor apply?
CSS added to the Custom CSS block in the Collection Template Editor applies to your Smart Collections collection pages only. It does not apply to your product pages, your cart, or any other Rebuy widget. To style a Rebuy widget, use that widget's own custom CSS field and scope your rules to the widget ID.