How to Customise your Shopify Store - Password

How to Customise your Shopify Store - Password

Customising the password page on your Shopify store can help maintain a consistent brand experience and make the page more engaging for visitors while your store is password-protected. Here’s a step-by-step guide on how to do it:

How to Customise Your Shopify Store's Password Page

Step 1: Access Your Shopify Admin

  1. Log in to your Shopify account.
  2. Once logged in, you'll be directed to your Shopify admin dashboard.

Step 2: Navigate to the Theme Editor

  1. From the Shopify admin dashboard, go to "Online Store" and click on "Themes."
  2. Locate your current theme and click the "Actions" button next to it.
  3. Select "Edit code" from the dropdown menu to open the theme editor.

Step 3: Locate the Password Page Template

  1. In the theme editor, look for the "Templates" or "Sections" folder on the left-hand side.
  2. Find the file named password.liquid. This is the template that controls the password page.

Step 4: Customise the Password Page Template

  1. Click on the password.liquid file to open it.
  2. Familiarise yourself with the existing code. This template includes HTML and Liquid code that defines the structure and appearance of the password page.
  3. Customise the template to match your brand’s style. You can:
    • Add your logo and brand colours to ensure consistency with the rest of your site.
    • Include a friendly and engaging message to visitors explaining why the store is password-protected and when it will be accessible.
    • Add a background image or other visual elements to make the page more appealing.
    • Customise the text and style of the password input field and the submit button.
    • Ensure the layout is mobile-friendly and responsive.
  4. Save your changes.

Step 5: Add Custom CSS (if needed)

  1. If you need to make further style adjustments, you may need to add custom CSS.
  2. In the theme editor, look for the "Assets" folder and find your CSS file (often named theme.scss.liquid or similar).
  3. Add your custom CSS at the bottom of this file. For example, you might want to adjust the form’s spacing, input field styles, or button designs.
  4. Save your changes.

Step 6: Preview and Test

  1. After making your changes, click the "Save" button to save your modifications.
  2. To ensure your customisations look as expected, navigate to your store’s password page by going to your store’s URL.
  3. Verify that the layout, design, and functionality are all working correctly. Test entering the password to ensure the login process is smooth and error-free.

Step 7: Make Additional Adjustments (if necessary)

If you notice any issues or areas for improvement during testing, go back to the theme editor and make the necessary adjustments. Repeat the testing process until you are satisfied with the customisations.

Conclusion

Customising the password page on your Shopify store helps create a seamless and branded experience for your visitors, even when your store is not yet publicly accessible. By following these steps, you can ensure the password page is not only functional but also visually appealing and engaging, enhancing the overall user experience on your store.

Back to blog