Re: How do I change the text in the Password page/template header?

woodwardcandle · ‎05-13-2024

I want to edit the text that shows up in the middle of the header of the Password page. How do I do that? I know I changed it before, I just can't remember how I did it. Thanks in advance.

JasmeetVT14313 · ‎05-14-2024

Hi @woodwardcandle
You can follow the below steps
1> From themes, click the Customize button which will open the theme editor.
2> In the theme editor, click the drop down with "Hompage" from the top center of the page and choose "Password"
3> Now your password page should be reflecting in the editor, from left side bar check for the text you want to update, make the change and Save.

If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

woodwardcandle · ‎05-14-2024

I can get to that page and click on the header text. However, I don't see where it gives me the option to change the text. Below is what I see on the left hand side when I click on the header.

JasmeetVT14313 · ‎05-15-2024

Hi @woodwardcandle
It seems you have missed the screenshot in above message. Can you please share it again

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

woodwardcandle · ‎05-15-2024

JasmeetVT14313 · ‎05-15-2024

@woodwardcandle
In that case try checking file "password.liquid". if it exists then check for the wording which you want to change.

If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

woodwardcandle · ‎05-15-2024

No luck. Any other ideas? There has to be a way to change it.

JasmeetVT14313 · ‎05-15-2024

@woodwardcandle
Were you not able to find the file?
If you found the file, possible to share the code? If you don't want to share it here you can DM.

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

woodwardcandle · ‎05-15-2024

<!doctype html>
<html class="js full-height" lang="{{ request.locale.iso_code }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="">
<link rel="canonical" href="{{ canonical_url }}">

{%- if settings.favicon != blank -%}
<link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
{%- endif -%}

{%- unless settings.type_header_font.system? -%}
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
{%- endunless -%}

{% render 'meta-tags' %}

{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}

{% style %}
{{ settings.type_body_font | font_face: font_display: 'swap' }}
{{ body_font_bold | font_face: font_display: 'swap' }}
{{ body_font_italic | font_face: font_display: 'swap' }}
{{ body_font_bold_italic | font_face: font_display: 'swap' }}
{{ settings.type_header_font | font_face: font_display: 'swap' }}

{% for scheme in settings.color_schemes -%}
{% assign scheme_classes = scheme_classes | append: ', .color-' | append: scheme.id %}
{% if forloop.index == 1 -%}
:root,
{%- endif %}
.color-{{ scheme.id }} {
--color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
{% if scheme.settings.background_gradient != empty %}
--gradient-background: {{ scheme.settings.background_gradient }};
{% else %}
--gradient-background: {{ scheme.settings.background }};
{% endif %}
--color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
--color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};
--color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};
--color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};
--color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
--color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
--color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
--color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
--color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
--color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
--payment-terms-background-color: rgb({{ scheme.settings.background.rgb }});
}
{% endfor %}

{{ scheme_classes | prepend: 'body' }} {
color: rgba(var(--color-foreground), 0.75);
background-color: rgb(var(--color-background));
}

:root {
--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
--font-body-style: {{ settings.type_body_font.style }};
--font-body-weight: {{ settings.type_body_font.weight }};

--font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
--font-heading-style: {{ settings.type_header_font.style }};
--font-heading-weight: {{ settings.type_header_font.weight }};

--font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
--font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};
--media-padding: {{ settings.media_padding }}px;
--media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};
--media-border-width: {{ settings.media_border_thickness }}px;
--media-radius: {{ settings.media_radius }}px;
--media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};
--media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;
--media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;
--media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;
--media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};

--page-width: {{ settings.page_width | divided_by: 10 }}rem;
--page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;

--product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
--product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
--product-card-text-alignment: {{ settings.card_text_alignment }};
--product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
--product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
--product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
--product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;

--collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;
--collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;
--collection-card-text-alignment: {{ settings.collection_card_text_alignment }};
--collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;
--collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};
--collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};
--collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;

--blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem;
--blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem;
--blog-card-text-alignment: {{ settings.blog_card_text_alignment }};
--blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem;
--blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }};
--blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }};
--blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem;

--badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;

--spacing-sections-desktop: {{ settings.spacing_sections }}px;
--spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;

--grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
--grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
--grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
--grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;

--text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
--text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
--text-boxes-radius: {{ settings.text_boxes_radius }}px;
--text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
--text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
--text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
--text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
--text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;

--buttons-radius: {{ settings.buttons_radius }}px;
--buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;
--buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
--buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
--buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
--buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
--buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
--buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
--buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
--buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;

--inputs-radius: {{ settings.inputs_radius }}px;
--inputs-border-width: {{ settings.inputs_border_thickness }}px;
--inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
--inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
--inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
--inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
--inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
--inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
--inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;

--variant-pills-radius: {{ settings.variant_pills_radius }}px;
--variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
--variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
--variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
--variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
--variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
--variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;
}
{% endstyle %}

{%- unless settings.type_body_font.system? -%}
{% comment %}theme-check-disable AssetPreload{% endcomment %}
<link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
{% comment %}theme-check-enable AssetPreload{% endcomment %}
{%- endunless -%}
{%- unless settings.type_header_font.system? -%}
{% comment %}theme-check-disable AssetPreload{% endcomment %}
<link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
{% comment %}theme-check-enable AssetPreload{% endcomment %}
{%- endunless -%}

{{ 'section-password.css' | asset_url | stylesheet_tag }}
{{ 'base.css' | asset_url | stylesheet_tag }}
{{ 'component-list-social.css' | asset_url | stylesheet_tag }}

<body class="password gradient">
<a class="skip-to-content-link button visually-hidden" href="#MainContent">
{{ 'accessibility.skip_to_text' | t }}
</a>

{% section 'main-password-header' %}

<main id="MainContent" class="password-main">
{{ content_for_layout }}
</main>
<footer>
{% section 'main-password-footer' %}
</footer>
<ul hidden>
<li id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</li>
</ul>
</body>
</html>

JasmeetVT14313 · ‎05-15-2024

@woodwardcandle

It should be in "main-password-header" file. Please check

If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

woodwardcandle · ‎05-15-2024

Will do right now.

woodwardcandle · ‎05-15-2024

<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="password-header">
{%- if settings.logo != blank -%}
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
{{
settings.logo
| image_url: width: 500
| image_tag:
class: 'password-logo',
widths: '50, 100, 150, 200, 250, 300, 400, 500',
width: settings.logo_width,
height: logo_height,
alt: logo_alt
}}
{%- else -%}
<h1 class="h2">{{ shop.name }}</h1>
{%- endif -%}

{%- if shop.password_message != blank -%}
<div class="password-content">
{{ shop.password_message }}
</div>
{%- endif -%}

<password-modal>
<details class="password-modal modal">
<summary class="modal__toggle" aria-haspopup="dialog">
<div class="modal__toggle-open password-link link underlined-link">
{% render 'icon-padlock' %}
{{ 'general.password_page.login_password_button' | t }}
</div>
<div class="modal__toggle-close" aria-hidden="true">
{% render 'icon-close' %}
</div>
</summary>
<div
class="modal__content"
role="dialog"
aria-labelledby="DialogHeading"
aria-modal="true"
>
<div class="password-modal__content" tabindex="-1">
<button type="button" class="modal__close-button link" aria-label="{{ 'accessibility.close' | t }}">
{% render 'icon-close' %}
</button>
<h2 class="password-modal__content-heading" id="DialogHeading">
{{ 'general.password_page.login_form_heading' | t }}
</h2>
{%- form 'storefront_password', class: 'password-form' -%}
<div class="password-field field{% if form.errors %} password-field--error{% endif %}">
<input
type="password"
name="password"
id="Password"
class="field__input"
autocomplete="current-password"
{% if form.errors %}
aria-invalid="true"
aria-describedby="PasswordLoginForm-password-error"
{%- endif -%}
placeholder="{{ 'general.password_page.login_form_password_placeholder' | t }}"
>
<label class="field__label" for="{{ 'general.password_page.login_form_password_label' | t }}">
{{- 'general.password_page.login_form_password_placeholder' | t -}}
</label>
{%- if form.errors -%}
<div id="PasswordLoginForm-password-error" role="status">
<span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
<span class="form__message">
{%- render 'icon-error' %}
{{ 'general.password_page.login_form_error' | t -}}
</span>
</div>
{%- endif -%}
</div>
<button name="commit" class="password-button button button--outline">
{{ 'general.password_page.login_form_submit' | t }}
</button>
{%- endform -%}
<small class="password__footer-text">{{ 'general.password_page.admin_link_html' | t }}</small>
</div>
</div>
</details>
</password-modal>
</div>
</div>
{% assign scheme1 = settings.color_schemes | first %}
{%- if section.settings.color_scheme == scheme1 -%}<hr>{%- endif -%}

{% schema %}
{
"name": "t:sections.main-password-header.name",
"settings": [
{
"type": "header",
"content": "t:sections.main-password-header.settings.logo_header.content"
},
{
"type": "paragraph",
"content": "t:sections.main-password-header.settings.logo_help.content"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
}
]
}
{% endschema %}

JasmeetVT14313 · ‎05-15-2024

You can try checking as per below screenshot. If it's not there then please share store URL

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

woodwardcandle · ‎05-15-2024

Here you go: 89667b-34.myshopify.com

View

Rozzen · ‎06-19-2024

Did this get resolved because I am in the same situation

ianmacgregor · ‎07-02-2024

Click "Online Store" in the left-side menu, then click "Manage Password".

Re: How do I change the text in the Password page/template header?

How do I change the text in the Password page/template header?

Here you go: 89667b-34.myshopify.com

Community Blog Articles