Loading Your Override CSS After the Plugin

This is the most straightforward approach for a theme developer who wants to write regular CSS or SCSS overrides in their own file. Craft's registerCssFile function has a depends option that tells Craft: "output my file after this bundle". That is all you need to guarantee correct load order.

The cart layout already ships with this commented out as a hint:

{# yui/layouts/cart/1column.twig — this is already there, commented out #}
{% do view.registerCssFile(
    '/assets/css/pages/cart-overrides.css',
    { depends: ['yui\\craft\\web\\assets\\frontend\\CartAsset'] }
) %}

Step 1 — Create your override file

Write your overrides in SCSS (or plain CSS) inside your theme's asset folder:

assets/
└── css/
    ├── theme.scss       ← your main theme styles
    └── cart-override.scss

Example cart-override.scss:

// Loaded after cart-modern.css, so these rules win

.cart-items-wrapper .list-item {
  transition: background 0.15s ease;

  &:hover {
    background: #f9fafb;
  }
}

.cart-summary-sidebar .btn-primary {
  letter-spacing: 0.05em;
  text-transform: none;
  border-radius: 6px;
}

.cart-wrapper .cart-totals-row.grand_total {
  color: #6366f1;
}

Compile it to web/assets/css/cart-override.css as part of your normal build.

Step 2 — Register it in the cart layout block

Override the {% block head %} in the cart layout. Create this file in your project's templates/ folder:

templates/yui/layouts/cart/1column.twig

{% extends 'yui/layouts/cart/1column.twig' %}

{% block head %}
    {{ parent() }}

    {% do view.registerCssFile(
        '/assets/css/cart-override.css',
        { depends: ['yui\\craft\\web\\assets\\frontend\\CartAsset'] }
    ) %}
{% endblock %}

The {{ parent() }} call keeps the original CartAsset registration. Your file is registered afterward with CartAsset declared as a dependency, so Craft guarantees the output order:

cart-modern.css   ← plugin (CartAsset)
cart-override.css ← yours, always after

Do the same for checkout using CheckoutAsset:

templates/yui/layouts/checkout/1column.twig

{% extends 'yui/layouts/checkout/1column.twig' %}

{% block head %}
    {{ parent() }}

    {% do view.registerCssFile(
        '/assets/css/checkout-override.css',
        { depends: ['yui\\craft\\web\\assets\\frontend\\CheckoutAsset'] }
    ) %}
{% endblock %}

Why not just put the link after {% head %}?

Craft does not use a {% head %} tag in the yStore layout — all registered assets are injected automatically before </head> in the final HTML response. There is no safe anchor point to place a hardcoded <link> tag after the plugin CSS without overriding the layout file anyway. Using registerCssFile with depends is the clean, upgrade-safe way to do it.

Multiple layout variants

yStore ships several cart and checkout layouts (1column, 2column-right, 2column-left, etc.). If your store can switch between them, override all the variants your project uses, or override the page template instead and register the CSS there:

templates/yui/pages/cart/view.twig

{% extends 'yui/pages/cart/view.twig' %}

{% block head %}
    {{ parent() }}

    {% do view.registerCssFile(
        '/assets/css/cart-override.css',
        { depends: ['yui\\craft\\web\\assets\\frontend\\CartAsset'] }
    ) %}
{% endblock %}

Registering it at the page level means it applies regardless of which layout variant is active.

Comparison with other approaches

	registerCssFile	CSS variables	Event override
Requires a Craft module	No	No	Yes
Works without a build step	No (needs compile)	Yes	No
Can override any CSS rule	Yes	No (variables only)	Yes
Loaded after plugin CSS	Yes (via depends)	N/A	Yes
Best for	Rule-level overrides in a theme	Color/spacing tweaks	Module/plugin authors