Themes

Apps

Partners

Blog

About

Support

Fluorescent Themes

-

October 28, 2023

How to use Stiletto’s password page template as a powerful marketing tool

Our new Stiletto theme comes packed with sections that are perfect for designing a custom landing page to build excitement about your upcoming launch.

This article applies specifically to sections available in our Stiletto theme; however, similar layouts can be created in OS2 versions of Spark, Lorenza, Ira, and Context. In order to use the Password page template you must be running a purchased and published theme, although you can design it while still running a theme trial.


A pre-launch marketing strategy can build hype and brand awareness for your soon-to-be-released site, and your theme's Password page (or 'Coming soon') template is a powerful tool to help generate that excitement. As a general rule it's a landing page that hides the rest of your site unless you have a password, but we want to show you how you can create a beautiful first impression that leaves your visitors wanting to know more!

There are many benefits to designing a custom 'Coming soon' page, but the most important, in our opinion, is that it enables you to start building your audience while you're busy building your site. This way, when you're ready to launch you've got an already engaged list of subscribers and can send pre-launch campaigns to VIPs and create buzz leading up to your big reveal.

We're going to show you how we've designed this landing page in our Stiletto theme to inspire you to build your own!


Our new Stiletto theme comes packed with sections that are perfect for building excitement about your upcoming launch. Let's walk through how we designed our password page template in our Organic demo shop:


  1. The first thing you'll need to do is navigate to the Password template in your Theme Editor. Click on the dropdown menu in the top bar, then go to Others > Password.

  2. Click on the Password Header section, where you can add your logo and select how you want this section to appear.

  3. Next, we're going to hide the Password Page section completely. Hover over the title and click the eye icon. Poof - gone!



Now let's make this page POP

  1. We can start by adding an Image hero section. Since this is the first thing our new visitors will see, you'll want to use a big, bold image and a strong call-to-action (CTA) that grabs their attention.

  2. Now that you've got their attention, let's use the Countdown banner to create urgency and let them know when they can start shopping!

  3. The Grid section is the perfect way to give a little sneak peek of your products or brand. This helps visitors envision what they can expect once you launch and really start getting hyped.

  4. Finally, and arguably the MVP of the page, is your Newsletter section. This will allow you to capture valuable leads before your launch and even offer VIP promotions to everyone who signs up.




Isn't that a huge improvement?! By using this new Password page design you can use your website as part of your marketing strategy, even while it's under construction, instead of waiting until your launch day to start your promotions.

We always encourage you to use your imagination and design something unique to your brand, but if you want to use this layout as a starting point, follow the instructions below to get this layout for Stiletto!

Get the Design

You can use the password page layout from the Organic demo by adding the template code below to the theme code editor. Don't fret, there's no need to know how to code! We'll walk through each step - it's as easy as copy and paste.

  1. In your Shopify admin, click Actions > Duplicate on your current theme to create a backup version.

  2. Click Actions > Edit code on the duplicated, unpublished theme in the Theme library.

  3. In the Layouts folder, find and click on the password.json file.

  4. Click the Copy button in the top-right corner of the code block below.

  5. Select all (ctrl-a or cmd-a) of the current code in the password.json file and paste (ctrl-v or cmd-v) the new code to replace it.

  6. Click Save.

That's it! You can now find the updated Password template in your theme editor. Once your page is customized and ready to go, you can publish the theme.

{
  "layout": "password",
  "sections": {
    "main": {
      "type": "main-password",
      "disabled": true,
      "blocks": {
        "heading": {
          "type": "heading",
          "disabled": true,
          "settings": {
            "title": "Opening soon",
            "heading_font_class": "fs-heading-display-3"
          }
        },
        "text": {
          "type": "text",
          "disabled": true,
          "settings": {
            "text": "<p>Be the first to know when we launch.<\/p>",
            "text_font_class": "fs-body-100"
          }
        },
        "spacer_1": {
          "type": "spacer",
          "disabled": true,
          "settings": {
            "space": 12
          }
        },
        "newsletter_signup": {
          "type": "newsletter_signup",
          "disabled": true,
          "settings": {
          }
        },
        "spacer_2": {
          "type": "spacer",
          "disabled": true,
          "settings": {
            "space": 12
          }
        },
        "share_icons": {
          "type": "share_icons",
          "disabled": true,
          "settings": {
          }
        }
      },
      "block_order": [
        "heading",
        "text",
        "spacer_1",
        "newsletter_signup",
        "spacer_2",
        "share_icons"
      ],
      "settings": {
        "image_aspect": "custom",
        "desktop_height": 100,
        "mobile_height": 100,
        "focal_point": "center",
        "mobile_focal_point": "center",
        "text_color": "#ffffff",
        "color_overlay": "#000000",
        "color_overlay_gradient": "",
        "overlay_opacity": 80,
        "enable_animation": true,
        "section_padding": "section--vertical-padding-none"
      }
    },
    "005969ee-a2db-4410-bb7e-3df53eaf0ed8": {
      "type": "image-hero",
      "blocks": {
        "template--15931109343393__005969ee-a2db-4410-bb7e-3df53eaf0ed8-16674928865b800a5d-0": {
          "type": "accent",
          "settings": {
            "accent": "COMING SOON"
          }
        },
        "template--15931109343393__005969ee-a2db-4410-bb7e-3df53eaf0ed8-16674928865b800a5d-1": {
          "type": "heading",
          "settings": {
            "title": "Pure, plant-based, totally clean skincare",
            "heading_font_class": "fs-heading-display-3"
          }
        },
        "template--15931109343393__005969ee-a2db-4410-bb7e-3df53eaf0ed8-16674928865b800a5d-2": {
          "type": "text",
          "disabled": true,
          "settings": {
            "text": "<p>Use these sections to promote a particular feature with editorial photography.<\/p>",
            "text_font_class": "fs-body-100"
          }
        }
      },
      "block_order": [
        "template--15931109343393__005969ee-a2db-4410-bb7e-3df53eaf0ed8-16674928865b800a5d-0",
        "template--15931109343393__005969ee-a2db-4410-bb7e-3df53eaf0ed8-16674928865b800a5d-1",
        "template--15931109343393__005969ee-a2db-4410-bb7e-3df53eaf0ed8-16674928865b800a5d-2"
      ],
      "settings": {
        "image_aspect": "custom",
        "desktop_height": 100,
        "mobile_height": 100,
        "image": "shopify:\/\/shop_images\/flower-child-slide-6-adjusted.jpg",
        "focal_point": "center",
        "mobile_focal_point": "center",
        "media_link": "",
        "text_position": "flex-start_center",
        "text_position_mobile": "center_center",
        "text_color": "#ffffff",
        "button_background_color": "#ffffff",
        "button_text_color": "#000000",
        "color_overlay": "#000000",
        "color_overlay_gradient": "",
        "overlay_opacity": 5,
        "enable_animation": true,
        "section_padding": "section--vertical-padding-none"
      }
    },
    "d5c76e80-49ef-475c-91e0-f8df478f5515": {
      "type": "countdown-banner",
      "settings": {
        "min_height": 200,
        "min_height_mobile": 300,
        "year": 2022,
        "month": "november",
        "day": "16",
        "hour": "0",
        "minute": "0",
        "hide_timer_on_complete": false,
        "timer_complete_message": "",
        "heading": "We'll see you soon.",
        "heading_font_class": "fs-heading-2-base",
        "subheading": "",
        "text": "",
        "link": "",
        "link_text": "",
        "button_style": "btn--primary",
        "link_2": "",
        "link_text_2": "",
        "button_style_2": "btn--primary",
        "focal_point": "center",
        "mobile_focal_point": "center",
        "text_color": "#102b26",
        "button_background_color": "#ffffff",
        "button_text_color": "#000000",
        "background_color": "#daf4b1",
        "color_overlay": "#000000",
        "color_overlay_gradient": "",
        "overlay_opacity": 0,
        "enable_animation": true,
        "show_frame": true,
        "full_width": true,
        "section_padding": "section--vertical-padding-none"
      }
    },
    "dbfc1288-4fc6-4598-87a1-6114efc72535": {
      "type": "grid",
      "blocks": {
        "template--15931109343393__dbfc1288-4fc6-4598-87a1-6114efc72535-1667493077d7ec33ea-0": {
          "type": "item",
          "settings": {
            "width": "50",
            "height": 500,
            "mobile_height": 500,
            "image": "shopify:\/\/shop_images\/OM-SEPT-OCT-KAOLIN-CLEANSING-BALM2.jpg",
            "media_fit": "cover",
            "focal_point": "center",
            "mobile_focal_point": "center",
            "text_position": "center_center",
            "accent": "",
            "title": "",
            "heading_font_class": "fs-heading-2-base",
            "subheading": "",
            "subheading_font_class": "fs-heading-5-base",
            "text": "",
            "text_font_class": "fs-body-100",
            "link": "",
            "link_text": "",
            "button_style": "btn--primary",
            "background_color": "",
            "text_color": "#ffffff",
            "button_background_color": "#ffffff",
            "button_text_color": "#000000",
            "color_overlay": "#000000",
            "color_overlay_gradient": "",
            "overlay_opacity": 0
          }
        },
        "template--15931109343393__dbfc1288-4fc6-4598-87a1-6114efc72535-1667493077d7ec33ea-1": {
          "type": "item",
          "settings": {
            "width": "50",
            "height": 500,
            "mobile_height": 500,
            "image": "shopify:\/\/shop_images\/07_ae2c51ae-b5e0-4078-9b43-404761ddadc4.jpg",
            "media_fit": "cover",
            "focal_point": "center",
            "mobile_focal_point": "center",
            "text_position": "center_center",
            "accent": "",
            "title": "",
            "heading_font_class": "fs-heading-2-base",
            "subheading": "",
            "subheading_font_class": "fs-heading-5-base",
            "text": "",
            "text_font_class": "fs-body-100",
            "link": "",
            "link_text": "",
            "button_style": "btn--primary",
            "background_color": "",
            "text_color": "#ffffff",
            "button_background_color": "#ffffff",
            "button_text_color": "#000000",
            "color_overlay": "#000000",
            "color_overlay_gradient": "",
            "overlay_opacity": 0
          }
        },
        "template--15931109343393__dbfc1288-4fc6-4598-87a1-6114efc72535-1667493077d7ec33ea-2": {
          "type": "item",
          "disabled": true,
          "settings": {
            "width": "100",
            "height": 500,
            "mobile_height": 500,
            "media_fit": "cover",
            "focal_point": "center",
            "mobile_focal_point": "center",
            "text_position": "center_center",
            "accent": "",
            "title": "Grid item",
            "heading_font_class": "fs-heading-2-base",
            "subheading": "<p>Perfect for lookbooks and editorial photography<\/p>",
            "subheading_font_class": "fs-heading-5-base",
            "text": "",
            "text_font_class": "fs-body-100",
            "link": "",
            "link_text": "",
            "button_style": "btn--primary",
            "background_color": "",
            "text_color": "#ffffff",
            "button_background_color": "#ffffff",
            "button_text_color": "#000000",
            "color_overlay": "#000000",
            "color_overlay_gradient": "",
            "overlay_opacity": 30
          }
        }
      },
      "block_order": [
        "template--15931109343393__dbfc1288-4fc6-4598-87a1-6114efc72535-1667493077d7ec33ea-0",
        "template--15931109343393__dbfc1288-4fc6-4598-87a1-6114efc72535-1667493077d7ec33ea-1",
        "template--15931109343393__dbfc1288-4fc6-4598-87a1-6114efc72535-1667493077d7ec33ea-2"
      ],
      "settings": {
        "heading": "",
        "subheading": "",
        "content_alignment": "left",
        "enable_animation": true,
        "full_width": true,
        "spacing": 0,
        "divider_style": "none",
        "section_padding": "section--vertical-padding-none"
      }
    },
    "5e682e87-1ea1-4c84-84b1-821819851c73": {
      "type": "newsletter",
      "blocks": {
        "template--15931109343393__5e682e87-1ea1-4c84-84b1-821819851c73-1667492882eaab3473-0": {
          "type": "spacer",
          "disabled": true,
          "settings": {
            "space": 40
          }
        },
        "template--15931109343393__5e682e87-1ea1-4c84-84b1-821819851c73-1667492882eaab3473-1": {
          "type": "heading",
          "settings": {
            "title": "Be the first to know",
            "heading_font_class": "fs-heading-2-base"
          }
        },
        "template--15931109343393__5e682e87-1ea1-4c84-84b1-821819851c73-1667492882eaab3473-2": {
          "type": "text",
          "settings": {
            "text": "<p>Subscribe for VIP early access before our official launch<\/p>",
            "text_font_class": "fs-body-100"
          }
        },
        "template--15931109343393__5e682e87-1ea1-4c84-84b1-821819851c73-1667492882eaab3473-3": {
          "type": "spacer",
          "settings": {
            "space": 4
          }
        },
        "template--15931109343393__5e682e87-1ea1-4c84-84b1-821819851c73-1667492882eaab3473-4": {
          "type": "newsletter_signup",
          "settings": {
            "signup_link_text": "Sign up"
          }
        },
        "template--15931109343393__5e682e87-1ea1-4c84-84b1-821819851c73-1667492882eaab3473-5": {
          "type": "spacer",
          "disabled": true,
          "settings": {
            "space": 40
          }
        },
        "9c7884ad-33c9-4d35-b585-6f9ecba67c07": {
          "type": "social_icons",
          "settings": {
          }
        }
      },
      "block_order": [
        "template--15931109343393__5e682e87-1ea1-4c84-84b1-821819851c73-1667492882eaab3473-0",
        "template--15931109343393__5e682e87-1ea1-4c84-84b1-821819851c73-1667492882eaab3473-1",
        "template--15931109343393__5e682e87-1ea1-4c84-84b1-821819851c73-1667492882eaab3473-2",
        "template--15931109343393__5e682e87-1ea1-4c84-84b1-821819851c73-1667492882eaab3473-3",
        "template--15931109343393__5e682e87-1ea1-4c84-84b1-821819851c73-1667492882eaab3473-4",
        "template--15931109343393__5e682e87-1ea1-4c84-84b1-821819851c73-1667492882eaab3473-5",
        "9c7884ad-33c9-4d35-b585-6f9ecba67c07"
      ],
      "settings": {
        "alignment": "center",
        "focal_point": "center",
        "background_color": "#f5f5f5",
        "text_color": "#000000",
        "input_color": "#000000",
        "input_background": "#ffffff",
        "button_background_color": "#102b26",
        "button_text_color": "#daf4b1",
        "color_overlay": "#000000",
        "color_overlay_gradient": "",
        "overlay_opacity": 0,
        "enable_animation": true,
        "divider_style": "none",
        "section_padding": "section--vertical-padding-top-bottom",
        "content_width": "custom",
        "custom_content_width": 700
      }
    }
  },
  "order": [
    "main",
    "005969ee-a2db-4410-bb7e-3df53eaf0ed8",
    "d5c76e80-49ef-475c-91e0-f8df478f5515",
    "dbfc1288-4fc6-4598-87a1-6114efc72535",
    "5e682e87-1ea1-4c84-84b1-821819851c73"
  ]
}

Blog

The Fluorescent blog

Expert insights on performance management, employee development and employee engagement for HR professionals and people leaders.

View our blog

Flash Apps

October 28, 2023

12 strategies to prepare your Shopify store for the holidays

BFCM 2022 is anticipated to be another record-breaking weekend, and we've got key tips from industry experts to make it a success.

Industry Tips

October 28, 2023

The ultimate BFCM theme prep checklist

Get your Shopify theme ready for the holiday rush with our handy week-by-week guide for maximizing BFCM conversions.

Blog

The Fluorescent blog

Expert insights on performance management, employee development and employee engagement for HR professionals and people leaders.

View our blog

Flash Apps

October 28, 2023

12 strategies to prepare your Shopify store for the holidays

BFCM 2022 is anticipated to be another record-breaking weekend, and we've got key tips from industry experts to make it a success.

Industry Tips

October 28, 2023

The ultimate BFCM theme prep checklist

Get your Shopify theme ready for the holiday rush with our handy week-by-week guide for maximizing BFCM conversions.

Blog

The Fluorescent blog

Expert insights on performance management, employee development and employee engagement for HR professionals and people leaders.

View our blog

Flash Apps

October 28, 2023

12 strategies to prepare your Shopify store for the holidays

BFCM 2022 is anticipated to be another record-breaking weekend, and we've got key tips from industry experts to make it a success.

Industry Tips

October 28, 2023

The ultimate BFCM theme prep checklist

Get your Shopify theme ready for the holiday rush with our handy week-by-week guide for maximizing BFCM conversions.

Stay in the loop

Join our mailing list to stay in the know about new and upcoming features, community news, and product updates. No spamming—promise.

Stay in the loop

Join our mailing list to stay in the know about new and upcoming features, community news, and product updates. No spamming—promise.

Stay in the loop

Join our mailing list to stay in the know about new and upcoming features, community news, and product updates. No spamming—promise.

Fabriqué au Canada · Made in Canada

© 2024 Fluorescent Design Inc.

Fluorescent Design Inc. is a digital design company specializing in eCommerce templates, apps and services. Our products have been used and enjoyed by millions of people, numbered among them organizations like MoMA, Newsweek, Tesla, Yale and The White House. This page is encrypted.

Explore our themes

Infinitely flexible and loaded with powerful features, our themes offer endless possibilities to take your brand to the next level.

Discover our themes

Photography kindly provided by Mlouye. A featured partner of our Context theme.

Fabriqué au Canada · Made in Canada

© 2024 Fluorescent Design Inc.

Fluorescent Design Inc. is a digital design company specializing in eCommerce templates, apps and services. Our products have been used and enjoyed by millions of people, numbered among them organizations like MoMA, Newsweek, Tesla, Yale and The White House. This page is encrypted.

Explore our themes

Infinitely flexible and loaded with powerful features, our themes offer endless possibilities to take your brand to the next level.

Discover our themes

Explore our themes

Infinitely flexible and loaded with powerful features, our themes offer endless possibilities to take your brand to the next level.

Discover our themes

Photography kindly provided by Mlouye. A featured partner of our Context theme.

Fabriqué au Canada · Made in Canada

© 2024 Fluorescent Design Inc.

Fluorescent Design Inc. is a digital design company specializing in eCommerce templates, apps and services. Our products have been used and enjoyed by millions of people, numbered among them organizations like MoMA, Newsweek, Tesla, Yale and The White House. This page is encrypted.

Menu

Menu

Menu

Menu