Tutorial: Add a Customer Login section to the homepage

In this tutorial we will add a new section to the theme which will allow you to add a customer login form on the homepage. 

Result:

How to:

Open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

1

Create a new section

In the Sections folder, choose Add a new section:

Call the section:

index-login

Example:

Use the Create section button to complete. 

Erase all the default code that generated:

Replace the default code with the code from this file:

Click to view code

Save the file after replacing the code.

2

Add the section file in the Theme Editor

Open the Theme Editor. For a draft theme, use the Customize link for that theme:

If you're using a live/published theme:

Or:

Quick link if the theme is live/published:
Open Code Editor

Under Sections:

Choose Add section:

Choose the new section under Login:

The only settings are background color:

You can position the login section by using the handle icon (six dots) - Drag and drop:

The eye icon hides/shows the section. 

Save your theme editor settings to complete. 

Still need help? Contact Us Contact Us