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:
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.
Click on the Password Header section, where you can add your logo and select how you want this section to appear.
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:
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.
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!
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.
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.
In your Shopify admin, click Actions > Duplicate on your current theme to create a backup version.
Click Actions > Edit code on the duplicated, unpublished theme in the Theme library.
In the Layouts folder, find and click on the
password.jsonfile.Click the Copy button in the top-right corner of the code block below.
Select all (
ctrl-aorcmd-a) of the current code in thepassword.jsonfile and paste (ctrl-vorcmd-v) the new code to replace it.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"]}