Creating a Cover Page in Shopify

One of my favorite things about designing websites in Squarespace is the Cover Page feature— it makes for the easiest coming soon pages and I use it on almost every project. Because I don’t focus on e-commerce businesses, I don’t design in Shopify as often, but when I do, I want the option to create a similar coming soon page.

There are some apps and plug-ins that allow this, but my favorite DIY route is to use the Password Page as a starting point. All Shopify theme include password pages, including the free default theme. To create one, go to Sales Channels > Online Store > Preferences and tick the checkbox beside Password Page. Then, go to Current Theme > Customize and select Password Page under “select page” in the top left corner of your site preview. From there, you can add your logo, content, email sign-up, and tweak your colors and fonts.

With this particular site, I wanted to create a background image similar to the Squarespace ones. In Current Theme > Theme Code > Assets, I uploaded a new asset with my image and copied the title into my clipboard. Then, I went to Theme.SCSS.Liquid and inserted the following code: 

.password-main__inner {
background-image:url('IMAGE-LINK-HERE.PNG')!important;
background-size:cover !important;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; 
  z-index: 9 !important;
  margin-bottom: 20px !important;
}

After a few more CSS tweaks with background colors, padding, and font size, here’s what I wound up with:

It’s not perfect and I do still prefer the Squarespace Coming Soon pages, but it definitely looks professional, communicates the brand, and is a great lead generator while the site is being built.

Enjoy!

Web DesignLydia Kerr