Hi!
My website is visible by password only for now, I would like the “access the website password” to be a little up in the page as for now it’s a the very bottom.
Plus, if possible I would like to translate “accéder avec le mot de passe” in english.
No idea how to do it and Shopify assistance told me to ask here 
The website is : lesable.co
Hi @Hela8
Check the image attached. Will it work for you? Let me know if you need to adjust it.
To do the changes follow the steps below:
Go to your Online Store
<style>.password-enter {position: absolute;top: 25%;right: 50%;left: 0;bottom: 0;}</style>Hi @Hela8
I guess what you want is for the password link to be visible above the fold like the screenshot?
To achieve this, I just added a small CSS style to the element that is pushing the link down. You can do the same in either theme editor and choose custom css for this given page - enter:
.password-enter__powered-by{
display:none;
}
Or you can do something similar as the previous answer adding the style directly into the password.liquid file:
<style>.password-enter__powered-by {display:none;}</style>
Let me know if you wanted it in a different position.
Hi [email removed]Huptech-WebShopify Partner and [email removed]Komvoi
Thank you so much for your prompt answer, you rock!
I would love to have it as the screenshot here below (meaning between the image and the marquee to be at the very bottom).
Is that feasible?
And about the translation in english to change the copywriting of “Accéder avec un mot de passe”, is it possible too?
Thank you!
So
Hi @Hela8
Here are the updated codes add it to password.liquid, Remove the old one i gave to you. If you have added to the theme.
Follow the steps previously mentioned
<style>
.password-enter {
position: absolute;
top: 82%;
bottom: 0;
right: 0;
left: 0;
}
.shopify-section:not(.header-section):has(.section) {
margin-top: 2rem;
}
</style>
Hi @Hela8
To translate/change the text you can go to Online Store → Themes → Three dots next to “Customize”
And:
In here you should find the text currently displaying. Change it here and it will change in your store! You can also localize (use different languages from here).
Regarding the placement this would preferably be done directly to your code as you are moving an element into another element. But a quick fix probably works for now, so try the above answer!
Hey!
Where should I copy paste the code? Top or bottom of the entire coding page?
Like line 1 or line 153?
Thanks and sorry in advance if it’s a dumb question.
Just changed it to “password”, thank you very much!!!
Hi @Hela8
You can paste it into the password.liquid file check the screen shot.
Hi @Hela8
Can you share the whole password.liquid code i can fix it and let you know. Once it is fixed, you just have to copy and paste it.
Sure, here it is
class=“no-js{% if request.design_mode %} shopify-design-mode{% endif %}”
lang=“{{ request.locale.iso_code }}”
>
{%- render ‘stylesheets’ -%}
{%- if settings.favicon != blank -%}
<linkrel=“icon”
type=“image/png”
href=“{{ settings.favicon | image_url: width: 32, height: 32 }}”
>
{%- endif -%}
{% comment %} This a way to wait for main content to load when navigating to a new page so that the view transitions can work consistently {% endcomment %}
<linkrel=“expect”
href=“#MainContent”
blocking=“render”
id=“view-transition-render-blocker”
>
.password-enter { position: absolute; top: 82%; bottom: 0; right: 0; left: 0; } .shopify-section:not(.header-section):has(.section) { margin-top: 2rem; }{%- render ‘meta-tags’ -%}
{%- render ‘fonts’ -%}
{%- render ‘scripts’ -%}
{%- render ‘theme-styles-variables’ -%}
{%- render ‘color-schemes’ -%}
{% if request.design_mode %}
{%- render ‘theme-editor’ -%}
{% endif %}
{{ content_for_header }}
<mainid=“MainContent”
class=“content-for-layout”
role=“main”
>
{{ content_for_layout }}
{{ ‘content.powered_by’ | t }}
<button
class=“button-unstyled password-enter__button”
on:click=“#password-form/showDialog”
>
{{ ‘actions.enter_using_password’ | t }}
{%- form ‘storefront_password’ -%}
<dialogref=“dialog”
class=“password-dialog”
{% if form.errors %}
open
{% endif %}
>
<button
class=“button-unstyled password-dialog__close-button”
on:click=“dialog-component/closeDialog”
type=“button”
>
<span
class=“svg-wrapper svg-wrapper–small”
title=“{{ ‘actions.close’ | t }}”
>
{{ ‘icon-close.svg’ | inline_asset_content }}
{{ ‘actions.enter_password’ | t }}
<label
for=“Password”
class=“visually-hidden”
>
{{ ‘actions.enter_password’ | t }}
<input
type=“password”
name=“password”
id=“Password”
class=“field__input field__input–button-radius field__input–button-padding”
autocomplete=“current-password”
{% if form.errors %}
aria-invalid=“true”
aria-describedby=“PasswordLoginForm-password-error”
{%- endif -%}
placeholder=“{{ ‘placeholders.password’ | t }}”
autofocus
>
<button
class=“button password-dialog__submit-button”
type=“submit”
>
{{ ‘actions.submit’ | t }}
{%- if form.errors -%}
<divid=“PasswordLoginForm-password-error”
class=“email-signup__message email-signup__message–error”
tabindex=“-1”
>
<svg
viewBox=“0 0 20 20”
xmlns=" SVG namespace "
focusable=“false”
aria-hidden=“true”
class=“icon-error”
>
{%- render 'icon', icon: 'error' -%}
{{ ‘content.wrong_password’ | t }}
{%- endif -%}
{%- endform -%}
{% # theme-check-disable ParserBlockingScript %}
{% # theme-check-enable ParserBlockingScript %}
<!doctype html>
<html
class="no-js{% if request.design_mode %} shopify-design-mode{% endif %}"
lang="{{ request.locale.iso_code }}"
>
<head>
{%- render 'stylesheets' -%}
{%- if settings.favicon != blank -%}
<link
rel="icon"
type="image/png"
href="{{ settings.favicon | image_url: width: 32, height: 32 }}"
>
{%- endif -%}
{% comment %} This a way to wait for main content to load when navigating to a new page so that the view transitions can work consistently {% endcomment %}
<link
rel="expect"
href="#MainContent"
blocking="render"
id="view-transition-render-blocker"
>
<style>
.password-enter {
position: absolute;
top: 82%;
bottom: 0;
right: 0;
left: 0;
}
.shopify-section:not(.header-section):has(.section) {
margin-top: 2rem;
}
</style>
{%- render 'meta-tags' -%}
{%- render 'fonts' -%}
{%- render 'scripts' -%}
{%- render 'theme-styles-variables' -%}
{%- render 'color-schemes' -%}
{% if request.design_mode %}
{%- render 'theme-editor' -%}
{% endif %}
{{ content_for_header }}
</head>
<body class="page-width-{{ settings.page_width }}">
<main
id="MainContent"
class="content-for-layout"
role="main"
>
{{ content_for_layout }}
</main>
<div class="password-enter">
<p class="password-enter__powered-by">
{{ 'content.powered_by' | t }}
</a>
</p>
<div class="password-enter__links">
<button
class="button-unstyled password-enter__button"
on:click="#password-form/showDialog"
>
{{ 'actions.enter_using_password' | t }}
</button>
</div>
<ul hidden>
<li id="a11y-new-window-message">{{ 'accessibility.new_window' | t }}</li>
</ul>
</div>
{%- form 'storefront_password' -%}
<dialog-component id="password-form">
<dialog
ref="dialog"
class="password-dialog"
{% if form.errors %}
open
{% endif %}
>
<div class="password-dialog__header">
<button
class="button-unstyled password-dialog__close-button"
on:click="dialog-component/closeDialog"
type="button"
>
<span
class="svg-wrapper svg-wrapper--small"
title="{{ 'actions.close' | t }}"
>
{{ 'icon-close.svg' | inline_asset_content }}
</span>
</button>
</div>
<div class="password-dialog__content">
<h3 class="password-dialog__title">
{{ 'actions.enter_password' | t }}
</h3>
<div class="email-signup__input-group">
<label
for="Password"
class="visually-hidden"
>
{{ 'actions.enter_password' | t }}
</label>
<input
type="password"
name="password"
id="Password"
class="field__input field__input--button-radius field__input--button-padding"
autocomplete="current-password"
{% if form.errors %}
aria-invalid="true"
aria-describedby="PasswordLoginForm-password-error"
{%- endif -%}
placeholder="{{ 'placeholders.password' | t }}"
autofocus
>
<button
class="button password-dialog__submit-button"
type="submit"
>
{{ 'actions.submit' | t }}
</button>
</div>
{%- if form.errors -%}
<div
id="PasswordLoginForm-password-error"
class="email-signup__message email-signup__message--error"
tabindex="-1"
>
<svg
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
focusable="false"
aria-hidden="true"
class="icon-error"
>
{%- render 'icon', icon: 'error' -%}
</svg>
{{ 'content.wrong_password' | t }}
</div>
{%- endif -%}
</div>
</dialog>
</dialog-component>
{%- endform -%}
{% # theme-check-disable ParserBlockingScript %}
<script src="{{ 'critical.js' | asset_url }}"></script>
{% # theme-check-enable ParserBlockingScript %}
</body>
</html>
Hi [email removed]Huptech-WebShopify Partner, thank you very much for your help, I was able to modify the parameters of the marquee, so that the Password link will be placed a little bit up
Thank you very much for your help!!!