Skip to main content
Version: 2.0.0

Customizing Cart & Checkout

yStore ships its own CSS for the cart and checkout pages. These styles are registered as Craft CMS asset bundles (CartAsset, CheckoutAsset). Craft queues all registered assets and injects them just before </head> — after anything your theme hardcoded earlier in the <head> block.

This means a plain <link> to your theme CSS in styles.twig (or anywhere inside <head> before Craft's injection point) loads first, so the plugin stylesheet wins every selector conflict:

<head>
  <link href="/assets/css/theme.css">   ← your theme, emitted first
  ...
  <!-- Craft injects registered bundles here, before </head> -->
  <link href="/cpresources/.../cart-modern.css">  ← plugin, injected later, wins
</head>

There is no bug here; it is how Craft's asset registration works. Every approach below solves it in a different way depending on what you need to change.

Which approach should I use?​

GoalWhoBest approach
Change colors, fonts, spacing, button sizesTheme developerCSS Custom Properties
Override specific rules with your own .scss fileTheme developerregisterCssFile with depends
Override rules from a Craft module or pluginModule/plugin authorTheme Override via Event
Replace all visual styling end-to-endModule/plugin authorRegister a Custom Theme
Change HTML structure, add/remove elementsAnyoneOverride Twig Templates
Most visual changes need only CSS variables or registerCssFile

The plugin exposes ~40 CSS custom properties for cart and ~40 for checkout. For most brand tweaks — colors, radii, button heights, fonts — override the variables. For rule-level overrides, registerCssFile with depends loads your file right after the plugin CSS with zero PHP required.

Articles in this section​

CSS Custom Properties

Override --cart-* and --checkout-* variables from your theme's stylesheet to control colors, borders, radii, and more.

registerCssFile with depends

Load your own cart-override.css after the plugin stylesheet using Craft's built-in dependency system — no module required.

Theme Override via Event

Inject a CSS file after the plugin stylesheet using the EVENT_REGISTER_THEMES hook from a Craft module or plugin.

Register a Custom Theme

Ship your own cart/checkout CSS as a named theme that the store owner can select from the plugin settings panel.

Override Twig Templates

Replace cart and checkout page templates, layouts, and components when you need to change the HTML structure itself.