Policy & Legal Pages

Policy text is written by the seller in dashboard Configure (store settings). The theme only renders it — never hardcode legal copy in theme files.

Route map (do not mix runtimes)

Policy	Vite	Nunjucks
Privacy	`/privacy` → `src/pages/PrivacyPage.tsx`	`/privacy-policy` → `templates/privacy-policy.njk`
Terms	`/terms` → `src/pages/TermsPage.tsx`	`/terms` or `/terms-of-service` → `templates/terms.njk`
Refunds	`/refunds` → `src/pages/RefundsPage.tsx`	`/refund-policy` → `templates/refund-policy.njk`

Policy	Vite field	Nunjucks field
Privacy	`store.privacyPolicy`	`store.policies.privacy`
Terms	`store.termsOfService`	`store.policies.terms`
Refunds	`store.refundPolicy`	`store.policies.refund`

Footer and nav links must use the runtime paths (shopUrl / React Router). Vite /privacy is not the same as Nunjucks /privacy-policy.

Vite

Reference: templates/markt-vite-storefront — LegalPolicyPage + ProductRichText.

import { LegalPolicyPage } from '@/components/legal-policy-page'

export const PrivacyPage = () => (
  <LegalPolicyPage
    title="Privacy Policy"
    policyKey="privacyPolicy"
    emptyMessage="No privacy policy has been added yet."
  />
)

policyKey: privacyPolicy | termsOfService | refundPolicy. Register routes in App.tsx:

<Route path="/privacy" element={<PrivacyPage />} />
<Route path="/terms" element={<TermsPage />} />
<Route path="/refunds" element={<RefundsPage />} />

Nunjucks

Template filename = router templateName → templates/{name}.njk.

{# templates/privacy-policy.njk #}
{% extends "layouts/base.njk" %}
{% block content %}
  <h1>Privacy Policy</h1>
  {% if store.policies.privacy %}
    <div class="policy-body">{{ store.policies.privacy | safe }}</div>
  {% else %}
    <p>No privacy policy has been added yet.</p>
  {% endif %}
{% endblock %}

File	Body
`templates/privacy-policy.njk`	`store.policies.privacy`
`templates/terms.njk`	`store.policies.terms`
`templates/refund-policy.njk`	`store.policies.refund`

Wrong (will not resolve): privacy.njk, refunds.njk, or linking to /privacy / /refunds on a Nunjucks store. Footer example:

<a href="{{ '/privacy-policy' | shopUrl }}">Privacy</a>
<a href="{{ '/terms' | shopUrl }}">Terms</a>
<a href="{{ '/refund-policy' | shopUrl }}">Refunds</a>

Because autoescape is false, do not put policy HTML into attributes. For meta tags, strip/encode — see Nunjucks Pitfalls.

Empty and loading states

Missing policy → short empty message (same idea as Vite emptyMessage)
Do not invent placeholder legal text

Theme development

Policy & Legal Pages

Policy & Legal Pages

Route map (do not mix runtimes)

Vite

Nunjucks

Empty and loading states

See also

​Policy & Legal Pages

​Route map (do not mix runtimes)

​Vite

​Nunjucks

​Empty and loading states

​See also

Policy & Legal Pages

Route map (do not mix runtimes)

Vite

Nunjucks

Empty and loading states

See also