The Resources section under User Interface within the Miva Admin is where you manage the external and internal assets that control how your store looks and functions. From here, you can create and organize CSS files, JavaScript files, Resource Groups, and custom Fonts.
Why Resources?
Resources allow you to include custom CSS design and Javascript functionality to improve:
Performance – Reduce page load times by controlling which assets load and when.
Efficiency – Prevent unnecessary files from loading on pages where they are not needed.
Customization – Add custom fonts, scripts, and styles to match your brand.
Scalability – Resource Groups make it easy to manage assets across multiple templates.
Where to find Resources
Path: User Interface > Resources
CSS Resources – Add, edit, and assign stylesheet files.
JavaScript Resources – Manage JavaScript files and inline scripts.
Resource Groups – Group resources together and call them from templates.
Fonts – Add custom fonts for use in Theme Editor.
How Resources Work
Resources follow a three-part rule:
A resource must be Global or assigned to a specific page.
It must belong to a Resource Group.
That Resource Group must be included in a template to be output on the page.
If any of these conditions are not met, the resource will not be included.
What are Resource Groups?
A Resource Group is a container that holds CSS or JavaScript resources. Groups make your site easier to manage because you don’t have to edit templates every time you add or change a resource.
Instead of placing CSS/JS directly in a template (HTML), you create a resource, then create a group, assign the resources to it, and lastly, use MVT to tell the template to output that group.
Example: Instead of telling every page “load this CSS file,” you tell the page “load the group called css_list,” and that group knows which CSS files to include.
Shadows Framework and Resource Groups
When your Miva Store is using the Shadows Framework, three preconfigured Resource Groups are installed by default, they are immediately available in the framework’s templates. You can add CSS or JS Resources to the default groups to further customize your site.
css_list – Outputs inside the
<head>tag of every page template. Primarily used for CSS Resources.footer_js – Outputs in the Global Footer template. Typically used for JavaScript Resources that should load at the end of the page.
head_tag – Outputs inside the
<head>tag of every page template. Typically used for JavaScript Resources that must load before the page renders.
NOTE: Resource Groups are not branch-specific.
Miva lets you create branches (like dev branch vs live branch).
If you delete a Resource Group in a dev branch, it will also be deleted from live (because groups are global).
That can break your live site if the template was relying on that group.
So the rule is: Don’t delete default resource groups. Only add new resources into them.
Next Steps
- Learn how to manage CSS Resources
- Learn how to manage JavaScript Resources
- Learn how to add Custom Fonts
By understanding how Resources work, you can customize your storefront while keeping it efficient, organized, and easy to maintain.