CSS Resources and Resource Management in Miva
Resource Management in Miva gives you control over when and where CSS and JavaScript resources are included in your store’s pages. Instead of loading every file everywhere, Miva uses a rules-based system to make sure resources are only output when they are needed. This helps improve performance, reduce conflicts, and keep your templates clean and efficient.
That system has three layers, all three must be satisfied before the resource will show up.
Step 1: Understand the Rules for Resource Output (the 3 layers)
Conditions for a CSS Resource to Output:
For a CSS Resource to be included on a rendered page, all three of the following conditions must be met:
1. Define the location for the Resource: The resource is either set to Global (included on all pages) or assigned to specific pages.
Global (Scope) – When Global is selected for a resource, it is automatically available on every page of your store.
When Assigned to a Page: Tell Miva which page(s) the resource belongs to, e.g. "home page or "product page".
2. Group/ (Grouping) – The resource must be assigned to at least one Resource Group. A Resource Group is like a container (or bucket) that holds related resources. Templates reference these groups (not individual files) to decide what to include.
3. Template Reference – The Resource Group needs to be referenced in the template used to render the page.
- If the group is not included in the template, nothing in that group will appear on the page.
- Even if the resource is set to Global or is assigned to a page, the group itself must be called in the template. Templates use Miva template code, by adding <mvt:item name=“head” param=“RESOURCE_GROUP_CODE” /> to the <head> section of the template to render the resources assigned to the group.
If any of these conditions are not satisfied, the CSS Resource will not be output on the page.
Putting It Together (All 3 Layers)
Think of it like nested boxes:
- The resource (CSS/JS) → must be global or assigned to a page.
- That resource → must belong to a resource group.
- That resource group → must be included in the template you’re rendering.
If all three align, the CSS/JS outputs. If any one step is missing, it won’t.
Important Notes / Best Practices
- Keep inline CSS minimal, it is better for small overrides rather than large styling.
- Use resource groups to prevent unused CSS from being loaded (for performance).
- Use descriptive codes to identify your CSS Resources.
Step 2: Add the Resource
Path: User Interface > Resources > CSS Resources (this is the first tab under Resources)
1. Click Add CSS Resource.
2. Enter a Code, a unique identifier for the CSS Resource.
3. Select a Type: Local File, External File, Combined Resources, Inline Script, or Inline
CSS. Select Combine Resource to include other resources you want to be include, Miva will then render all the resources in one combined resource file.
Both CSS and JavaScript resources can be of type:
- Local File (on the Miva server)
- External File (e.g., from a CDN)
- Inline (for direct output into the template)
3. Provide a File Path (or paste CSS if using Inline).
4. Add Tag Attributes if needed.
5. Toggle Global or leave it untogled to assign specific Page(s).
6. Click Add
Assign Pages by selecting the resource after creation, clicking on the ellipse, (…) next to Edit Source. Select Pages then toggle the page you want your CSS Styling resource to be used.
Step 3: Assign Resources to Groups
Resource Groups act like containers that templates call on, they allow you to bundle CSS and JS files together. In this step you can assign the resources to one or more Resource Groups, and you can add JavaScript Resources if necessary.
Note: If using the Shadows Framework the css_list, footer_js, and head_tag resource groups have already been created. These can be used to assign CSS to the head tag or JavaScript to the footer without creating additional resource groups.
- css_list = Outputs within the Head tag on each page template and typically holds CSS Resources.
- footer_js = Outputs within the Global Footer template and typically holds JavaScript Resources.
- head_tag = Outputs within the Head tag on each page template and typically holds JavaScript Resources.
Path: User Interface > Resources > Resource Groups
Select from Miva Groups (like noted above) or click Add Resource Group
After clicking the Add Resource Group button a text box appears at the bottom of the Group list. Type in the code you want to use for your new Group
Note: Remember, you can link CSS or JavaScript Resources to Group here.
Click Save
Step 4: Reference Groups in Templates
To render a group of CSS or JavaScript resources in your Miva template, you must include a specific MVT item tag that references your resource group code. The template engine will then inject all resources assigned to that group at the point where the tag appears.
Important Notes: Resource groups are NOT branch-specific. Removing a group deletes it from all branches in the store.
How to call a Resource Group in a template:
Path: User Interface > Templates > (example) type PROD search bar > Select Product Display Page
Paste your MVT code in the head section of the template where other CSS or JS are included.
MVT code example:
<mvt:item name="head" param="product_css_group"/>
In the code snippet above the text inside the parenthesis for param="product_css_group" is the code you used when creating your resource group.
Step-by-Step summary:
- Create a CSS Resource:
- Give it a unique code, e.g., product_custom_css.
- Set Resource Type to Inline CSS.
- Add your CSS code (e.g., .my-class { color: red; }).
- Set Active to Yes.
- Create or Use a Resource Group:
- Example group code: product_css_group.
- Assign your new product_custom_css resource to this group.
- Assign Group to the Product Page:
- Ensure the group is either marked as Global or, if not, assigned to the Product Page (typically code PROD). This can be set in the Resource Group assignment settings.
- Output the Group in the Product Page Template:
- Edit the page template for PROD and insert this MVT item where you want the CSS to load (usually in the <head>).