Create a Customized Landing page for your eCom shop

MilesbdMilesbd moderatorPosts: 18Moderator, Lightspeed Staff moderator
edited July 12 in Customizations

Are you in need of a landing page when setting up your shop? Do you want to have a web presence, and collect newsletters subscribers while getting set-up. Do you want to shut-down your site temporarily while on vacation? Are you planning a big reveal to launch your eCom site?

If you answered yes to any of these questions, this article is for you!


This article is a bit advanced, and so if you're not sure how to do this with the steps provided, don't be shy to speak to one of our customization partners to see if they can implement this for you. As well, this customization requires enabling the theme editor, so please be aware of the consequences of activating the theme editor!

Please note that the steps outlined below are based on the Conform plus theme. For other themes, the variables may change for logos, etc. so changes may need to be made to the snippet to include the proper theme variables.

A bit about this customization:

This Landing page has a few features:

Logo, social links, Shop email and Shop Phone number:

  • These all come from the theme settings.
  • The text for the email and phone number and subscribe button is dictated by the Highlight Color in the theme's settings.
  • The Paragraph text and the Heading Text are from the Body text Color chosen in theme settings.

Newsletter Subscription

This section will allow people (customers) to sign up for the shop's newsletter. The Text "Get updated when we go live!:" and "Get Updates!" in the button is translatable through Content > Translations.

Admin? Click here to login

This section is translatable as well. Merchants can use this to view their site, by creating a customer account on their site. They can also allow others to look at the site by creating customer accounts for other people to view the site. The Login window has "Site Admin Login" and "Log in to access site" are both translatable/customizable as well through Content > Translations.

 

A sample of what it looks like:

Desktop:


Mobile:


Login Page:



The steps:

Section 1: Adding the options to the Theme Settings


Step 1 - Adding the Landing Page enable/disable toggle

  1. Navigate to the theme Editor (Design > Theme Editor > Theme Settings > Theme Editor)
  2. In the top Right corner, click More > Manage Settings
  3. Click on the Green "Add Setting" button
  4. Enter in "fullpagelanding" as the title, and for type, choose "Checkbox", Save Changes
  5. In the expanded box, fill in the rest of the details:
    1. Title: "Enable Full-Page Landing"
    2. Category: "0. - Landing Page"
    3. Description: "Toggle this on to add a full page landing"
    4. Save Changes, and Close the box


Step 2 - Adding the Landing Page Heading Text

  1. Again, click on the Green "Add Setting" button
  2. Enter in "offlineheading" as the title, and for type, choose "Text", Save Changes
  3. In the expanded box, fill in the rest of the details:
    1. Title: "Heading Text"
    2. Category: "0. - Landing Page"
    3. Description: "Enter the heading text you wish to display in the landing page"
    4. Save Changes, and Close the Box


Step 3 - Adding the Landing Page Paragraph Text

  1. Yet again, click on the Green "Add Setting" button
  2. Enter in "offline_paragraph" as the title, and for type, choose "Text", Save Changes
  3. In the expanded box, fill in the rest of the details:
    1. Title: "Paragraph Text"
    2. Category: "0. - Landing Page"
    3. Description: "Enter the paragraph text you wish to display in the landing page"
    4. Save Changes, and Close the Box


Optional Steps for re-direct implementation

Adding a Re-direct enable/disable toggle Link

  1. Once again, click on the Green "Add Setting" button
  2. Enter in "redirect" as the title, and for type, choose "Checkbox", Save Changes
  3. In the expanded box, fill in the rest of the details:
    1. Title: "Redirect to another site"
    2. Category: "0. - Landing Page"
    3. Description: "Toggle this on to enable a redirect to another site"
    4. Save Changes, and Close the Box


Adding a Re-direct link

  1. Last time! click on the Green "Add Setting" button
  2. Enter in "redirectlink" as the title, and for type, choose "Text", Save Changes
  3. In the expanded box, fill in the rest of the details:
    1. Title: "Redirect Link"
    2. Category: "0. - Landing Page"
    3. Description: "Enter in a URL to redirect to (the redirect option must be enabled)"
    4. Save Changes, and Close the Box


Optional Suggested Step to ensure Cohesiveness of Layout in theme settings

Make sure that the options are ordered in the following way:


So that they appear like this in the theme settings:


Section 2: Adding the Snippet to use

  1. Navigate to the Theme Editor
  2. In the snippets section, click on "Create a new snippet"
  3. Enter in "fullpagelanding" as the snippet name, save changes.
  4. Click on the following link .
  5. Copy the contents and paste it into the "fillpagelanding" snippet , saving changes when done.


Section 3: Placing the code in the theme

  1. In the theme editor, open the custom.rain file

  2. Place the following snippet at the top of the page: {% if theme.fullpagelanding and page.account | length == 0 %} {% include 'snippets/fullpagelanding.rain' %} {% else %}
  3. And the following at the complete bottom of the page {% endif %}
  4. Repeat Steps 1-3 for the fixed.rain file as well

 How to use


In order to use this snippet, simply toggle on the setting in your theme settings!

Should you want to access the site, you would need to do the following:

  1. Create yourself a customer account on your storefront or back office
  2. From the landing page, click the "admin? log-in here." button.
  3. Log in using your customer account created in step 1, and access the site/set it up all while keeping the site hidden from the public


Have questions about this customization? Please post below!

Post edited by Adrian Samuel on

2 comments

  • rivervisionsrivervisions Posts: 1Member

    Does this work with conform plus free theme? I do not see the link you mention: More > Manage Settings - this is a retail shop

  • MilesbdMilesbd moderator Posts: 18Moderator, Lightspeed Staff moderator
    edited September 18

    Hi @rivervisions, and thanks for the question!

    This does work with the Conform Plus theme (it was actually designed to work primarily with this theme)!

    I've attached the following screenshots to help you find this setting. Please note this setting is only available once the Theme Editor is enabled (so be sure to read up on the consequences of activating the theme editor)


Sign In or Register to comment.