Custom CSS [OCU]

Use Custom CSS to tailor the appearance of One Click Upsell (OCU) offer components beyond the default styling, so they better match your brand and theme. This feature lets you target and override specific elements within OCU using your own CSS rules. Custom CSS can be applied across the following OCU offer types and the slide cart drawer:

Whether you’re adjusting colors, spacing, typography, or visibility of specific elements, custom CSS gives you precise control over how these upsell offers look on your store.

The Custom CSS field is located at Settings > General within the OCU app.

Customize the appearance of your upsell offers by adding your own CSS styles. Just click the toggle to enable this setting, add your own custom CSS and click Save:

To apply your custom styles, use the relevant OCU classes to override the default styles for each upsell type. You can find the classes you want to override by inspecting the offer's template using your browser's developer tools.

You can also wrap your custom CSS with OCU wrapper classes to apply styles to specific offers.

📝 Styles outside of the OCU wrapper classes will not be applied.

OCU classes:

📝 <style> tags are not required. To view your applied styles, test the offer(s) live on your storefront, as Custom CSS will not be visible within the OCU offer editors directly.