How to Hide the 'Enter Password' Button on the Shopify Password Page and Center the Logo on Desktop View

Introduction

In the world of eCommerce, gaining the trust of your customers starts with a positive first impression. Often, this begins right on your password-protected landing page. While Shopify makes it easy to set up a password page, customizing it to meet specific needs like hiding the 'Enter Password' button or centering the logo on the desktop view can be a bit tricky. In this detailed guide, we will walk you through the process to achieve both objectives seamlessly.

Why Hide the 'Enter Password' Button?

Problem Identification

Many Shopify store owners want to use the password page as an email collection page to build their email list before officially launching their store. In such scenarios, having an 'Enter Password' button can be distracting and confusing for visitors.

Reasons and Causes

1. Purpose Clarity: If your main goal is to collect emails, having the password input can distract from this objective.
2. User Experience: Simplifying the page makes it more user-friendly, increasing the chances of visitors entering their email addresses.
3. Aesthetic Appeal: Removing unnecessary elements makes the page look cleaner and more professional.
4. Conversion Rates: A focused, streamlined page is more likely to convert visitors into email subscribers.

Step-by-Step Guide to Hiding the 'Enter Password' Button

1. Navigate to Your Shopify Admin Panel: Log into your Shopify account and go to the admin dashboard.
2. Online Store > Themes: From the left-hand menu, click on 'Online Store' and then 'Themes'.
3. Edit Code:
   • Click on 'Actions' dropdown and select 'Edit code'.
4. Locate theme.liquid:
   • Find the theme.liquid file in the Layout directory.
5. Add Custom CSS:
   • Scroll to the bottom of the theme.liquid file, just before the closing </body> tag.
   • Add the following CSS code:

   <style>
     .password-modal {
       display: none !important;
     }
   </style>
   

6. Save Changes: Click 'Save' to apply the changes.

Verification

To ensure the 'Enter Password' button is hidden:

• Refresh your password page on both mobile and desktop views.
• Verify that the 'Enter Password' button is no longer visible.

How to Center the Logo on Desktop View

Now that we have hidden the 'Enter Password' button, let's move on to centering the logo on the desktop view.

Problem Identification

While the mobile view centers the logo by default, the desktop view often displays it aligned to the left. This inconsistency can affect the visual balance of your page.

Reasons and Causes

1. Theme Limitations: Certain Shopify themes do not allow for granular control over the positioning of elements like the logo.
2. Aesthetic Consistency: Having a centered logo creates a more balanced and visually appealing layout.
3. User Experience: A centered logo can make the page feel more inviting and professional.

Step-by-Step Guide to Centering the Logo

1. Edit CSS:
   • Go back to the 'Edit code' section of your theme.
   • In the Assets directory, find and open the theme.scss.liquid or theme.css file.
2. Add Custom CSS:
   • Include the following CSS code to center the logo:

   @media only screen and (min-width: 768px) {
     .site-header__logo img {
       display: block;
       margin: 0 auto;
     }
   }
   

3. Save Changes: Click 'Save' to apply the changes.

Verification

To ensure the logo is centered on the desktop view:

• Refresh your password page on a desktop browser.
• Verify that the logo is now centered.

Common Questions and Answers

Question 1: What if the CSS code doesn't apply correctly?

Answer: Ensure you have cleared your browser cache and refreshed the page. Sometimes, changes might not appear immediately due to cached versions of the page.

Question 2: Can I use JavaScript instead of CSS for these customizations?

Answer: While possible, using CSS is generally simpler and less likely to cause issues. JavaScript should be used for more complex interactions and changes.

Conclusion

Customizing your Shopify password page to hide the 'Enter Password' button and center the logo can significantly enhance the user experience and aesthetic appeal of your page. Following the steps outlined in this guide will ensure your page is optimized for email collection and presents a professional, streamlined appearance. Happy customizing!