Effective date: January 1, 2026

This page is a usage guide for the legal2 page template. Create a page, set its Theme template to legal2, then write the page body in plain semantic HTML. Each section below shows what to use, the live result, and the exact HTML to copy. The layout (sidebar menu, header title, breadcrumb) comes from the template automatically once the page is added to the legal navigation menus.

1. Effective date line

Use for the date line at the very top of a policy. It renders as a regular paragraph with a smaller gap below it.

HTML:

<p class="legal2-date">Effective date: January 1, 2026</p>

2. Heading (section title)

Use for every section heading. Renders bold (TimesNRMTStd-Bold) at 14px with a tight gap to the text below. You may use <h3>, <h2> or <h4> — all get the same heading style.

HTML:

<h3 class="legal2-heading">Section Title</h3>

3. Paragraph

Just use a plain <p>. Body paragraphs use TimesNRMTStd-Regular at 13px with a 44px gap below. Multiple paragraphs stack with the standard gap, like this one and the next.

This is a second paragraph to show the default spacing between blocks.

HTML:

<p>Body paragraph text…</p>

4. Bold, emphasis and inline labels

Use <strong> for emphasized terms inside text — it renders in the real Bold font with letter-spacing, like this important term. Use <span class="legal2-label"> for an inline bold label that introduces a line, like Domestic (US) followed by its description. (Plain <b> stays a lighter faux-bold and is generally not needed.)

HTML:

<strong>important term</strong>
<span class="legal2-label">Domestic (US)</span>

5. Links

Plain <a> links are underlined automatically, for example our Privacy Policy. Long URLs wrap so they never overflow.

HTML:

<a href="/pages/privacy-policy">Privacy Policy</a>

6. Unordered list (bullets)

Use a plain <ul>. Top-level items show a • bullet; nested (second-level) items show a dash. A short paragraph directly above a list stays tight to it:

Information we collect may include:

• Contact details such as your name, address, and email.
• Order information, including:
  • Billing and shipping address
  • Payment confirmation
• Account information such as username and password.

HTML:

<ul>
  <li>First item</li>
  <li>Item with sub-list:
    <ul><li>Nested item (dash)</li></ul>
  </li>
</ul>

7. Ordered list (numbers)

Use a plain <ol>. Top-level items are numbered "1)", "2)", "3)"; nested items use "a)", "b)".

1. First step in the process.
2. Second step, which has sub-steps:
   1. Sub-step one
   2. Sub-step two
3. Third step.

HTML:

<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

8. Table — data grid

Use a plain <table> with <thead> and <tbody>. It renders as a bordered grid with a bold header row and a divider between rows and columns — best for row-by-row data.

HTML:

<table>
  <thead><tr><th>Category</th><th>Recipients</th></tr></thead>
  <tbody><tr><td>…</td><td>…</td></tr></tbody>
</table>

9. Table — two columns of lists

Add the class legal2-cols when each column is a header plus a bullet list (no body row dividers). Use this for the "categories / recipients" style block.

HTML:

<table class="legal2-cols">
  <thead><tr><th>Category</th><th>Recipients</th></tr></thead>
  <tbody><tr>
    <td><ul><li>…</li></ul></td>
    <td><ul><li>…</li></ul></td>
  </tr></tbody>
</table>

10. Spacing utilities

Every block has a 44px gap below by default. To tighten a specific block, add one of these classes to it. Use them when a line should sit closer to the next (e.g. a lead-in line above a list, or the last line of a group).

• legal2-mb-sm — 18px gap below (sub-paragraph)
• legal2-mb-xs — 4px gap below (very tight)
• legal2-mb-0 — no gap below (last line of a group)
• legal2-mb-lg — the default 44px (rarely needed explicitly)

This paragraph uses legal2-mb-sm, so the next line sits only 18px below.

And this is that next line.

HTML:

<p class="legal2-mb-sm">Tighter paragraph</p>

How to apply legal2 to a page

1. In Shopify admin go to Online Store → Pages and open (or add) a page.
2. In Theme template, choose legal2.
3. Switch the body editor to HTML mode and paste content built from the elements above.
4. To get the sidebar highlight, breadcrumb and title, add the page to the pages_legal_notices and breadcrumb_pages navigation menus (under the LEGAL NOTICES item).
5. Save and preview.

End of guide.