Reset Password Section (sections/reset-password.liquid)

sections/reset-password.liquid renders the password reset form for customers who have clicked a password reset link from their email. It includes fields for new password and password confirmation, with comprehensive error handling and proper ARIA attributes for accessibility. The section uses Shopify's reset_customer_password form to handle password updates.

---

Dependencies & Assets

Type	Files / Components
CSS	customer.css
Icons	icon-error.svg (inline via inline_asset_content)
Forms	Shopify reset_customer_password form

• Uses shared customer.css for consistent customer account styling.
• Error icon is embedded inline via the inline_asset_content filter.
• Form uses native HTML5 validation attributes and ARIA for accessibility.

---

Dynamic Styles

Dynamic styles are generated via an inline {% style %} block:

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

• Responsive padding: Mobile padding is 75% of desktop padding for better mobile spacing.
• Breakpoint: Uses 750px breakpoint for responsive padding adjustment.

---

Markup Structure

<div class="customer reset-password section-{{ section.id }}-padding">
  <h1>{{ 'customer.reset_password.title' | t }}</h1>
  <p>{{ 'customer.reset_password.subtext' | t }}</p>
  {%- form 'reset_customer_password' -%}
    <!-- Error messages -->
    <!-- Password field -->
    <!-- Password confirmation field -->
    <!-- Submit button -->
  {%- endform -%}
</div>

• Form type: Uses Shopify's reset_customer_password form type.
• CSS classes: Uses customer and reset-password classes for styling consistency.
• Subtext: Includes explanatory text about the password reset process.

Error Handling

{%- if form.errors -%}
  <h2 class="form__message" tabindex="-1" autofocus>
    <span class="visually-hidden">{{ 'accessibility.error' | t }} </span>
    <span class="svg-wrapper">
      {{- 'icon-error.svg' | inline_asset_content -}}
    </span>
    {{ 'templates.contact.form.error_heading' | t }}
  </h2>
  <ul>
    {%- for field in form.errors -%}
      <li>
        {%- if field == 'form' -%}
          {{ form.errors.messages[field] }}
        {%- else -%}
          <a href="#{{ field }}">
            {{ form.errors.translated_fields[field] | capitalize }}
            {{ form.errors.messages[field] }}
          </a>
        {%- endif -%}
      </li>
    {%- endfor -%}
  </ul>
{%- endif -%}

• Error display: Shows all form errors in a list format.
• Field links: Errors link to the corresponding form field for easy navigation.
• Form-level errors: Handles both field-specific and form-level errors.
• Accessibility: Error heading includes visually hidden "Error" text for screen readers.
• Focus management: Error heading has tabindex="-1" and autofocus for screen reader support.

Form Fields

Password Field

<div class="field">
  <input
    type="password"
    name="customer[password]"
    id="password"
    autocomplete="new-password"
    {% if form.errors contains 'password' %}
      aria-invalid="true"
      aria-describedby="password-error"
    {% endif %}
    placeholder="{{ 'customer.reset_password.password' | t }}"
  >
  <label for="password">
    {{ 'customer.reset_password.password' | t }}
  </label>
  {%- if form.errors contains 'password' -%}
    <small id="password-error" class="form__message">
      <span class="svg-wrapper">
        {{- 'icon-error.svg' | inline_asset_content -}}
      </span>
      {{ form.errors.translated_fields.password | capitalize }}
      {{ form.errors.messages.password }}
    </small>
  {%- endif -%}
</div>

• Password field: Uses type="password" to hide input.
• Autocomplete: Uses autocomplete="new-password" to indicate new password entry.
• ARIA support: Includes conditional aria-invalid and aria-describedby for error association.
• Error display: Shows inline error message within the field container.

Password Confirmation Field

<div class="field">
  <input
    type="password"
    name="customer[password_confirmation]"
    id="password_confirmation"
    autocomplete="new-password"
    {% if form.errors contains 'password_confirmation' %}
      aria-invalid="true"
      aria-describedby="password_confirmation-error"
    {% endif %}
    placeholder="{{ 'customer.reset_password.password_confirm' | t }}"
  >
  <label for="password_confirmation">
    {{ 'customer.reset_password.password_confirm' | t }}
  </label>
  {%- if form.errors contains 'password_confirmation' -%}
    <small id="password_confirmation-error" class="form__message">
      <span class="svg-wrapper">
        {{- 'icon-error.svg' | inline_asset_content -}}
      </span>
      {{ form.errors.translated_fields.password_confirmation | capitalize }}
      {{ form.errors.messages.password_confirmation }}
    </small>
  {%- endif -%}
</div>

• Confirmation field: Requires users to confirm their new password.
• Same autocomplete: Uses autocomplete="new-password" for both fields (browsers handle this appropriately).
• Error handling: Separate error message for password confirmation validation.

Submit Button

<button>
  {{ 'customer.reset_password.submit' | t }}
</button>

• Translation: Button text uses translation filter for localization.

---

Behavior

• Form submission: Submits to Shopify's password reset endpoint.
• Password validation: Server validates password strength and confirmation match.
• Accessibility: Full ARIA support with proper labels, error associations, and focus management.
• Autocomplete: Uses HTML5 autocomplete attributes (new-password) for browser password manager support.
• Error display: Shows field-specific errors inline and form-level errors at the top.

---

Schema

{
  "name": "t:sections.main-reset-password.name",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}

• Minimal schema: Only includes padding settings.
• Translation keys: All labels use translation filters.
• Padding defaults: Default padding is 36px top and bottom.

---

Implementation Notes

1. Translation keys: All user-facing text uses translation filters (customer.reset_password.*, templates.contact.form.error_heading, accessibility.error).

2. Form field naming: Form fields use Shopify's customer object structure: customer[password] and customer[password_confirmation].

3. ID naming convention: Form field IDs are simple (password, password_confirmation) rather than prefixed, which is acceptable for this single-purpose form.

4. Error icon dependency: Requires icon-error.svg in the assets/ folder for error message display.

5. CSS class dependencies: Section relies on CSS classes from customer.css:

   • .customer
   • .reset-password
   • .field
   • .form__message
   • .svg-wrapper
   • .visually-hidden

6. Autocomplete attributes: Both password fields use autocomplete="new-password" to indicate new password entry, which helps password managers understand the context.

7. Error message structure: Error messages include:

   • Icon via inline SVG
   • Translated field name (capitalized)
   • Error message text
   • No period at end (unlike register form)

8. Error element type: Password field errors use <small> element instead of <span>, providing semantic meaning for inline error text.

9. Accessibility features:

   • Proper label associations via for attributes
   • ARIA invalid attributes when errors exist
   • ARIA describedby linking errors to fields
   • Error heading with visually hidden "Error" text
   • Error heading with autofocus for screen readers

10. Responsive design: Padding adjusts from 75% on mobile to 100% on desktop (750px breakpoint).

11. No JavaScript required: Form works entirely with server-side rendering and validation.

12. Password reset link: This form is accessed via password reset links sent to customers via email. The reset token is handled by Shopify automatically.

13. Subtext display: Includes explanatory text (customer.reset_password.subtext) to guide users through the password reset process.

14. Error link anchors: Error links use #\{\{ field \}\} format (e.g., #password, #password_confirmation) to link to form fields.

15. Translation key structure: Translation keys follow hierarchical structure:

    • customer.reset_password.title
    • customer.reset_password.subtext
    • customer.reset_password.password
    • customer.reset_password.password_confirm
    • customer.reset_password.submit

16. Password confirmation: Requires users to enter the password twice to prevent typos and ensure password accuracy.

17. No form value persistence: Unlike the register form, this form doesn't preserve values on error (passwords shouldn't be preserved for security reasons).