Shopify Debut Theme Tutorial: How to Add Sections to Landing Pages

So you've decided to take the plunge and join the wonderful world of Shopify ecommerce web services. You love the idea of having a streamlined and integrated ecommerce platform that has reliable speeds, point of sale networks, and ultimately helps you get discovered easily. 

After enrolling in the free-trial and getting your feet wet to start creating your home page you feel so grateful to have an easy-to-use user interface where you can drag and drop sections from one part of the home screen to another, add your text and visual content, have pre-formatted sections to use at your discretions, and you feel UNSTOPPABLE.....That is... until you attempt to create a landing page.

One of the most disappointing shortfalls when using the free Debut Theme on Shopify is how it tricks you into thinking creating every page is going to be as simple as developing and laying out the content for your homepage. I'm not entirely sure what the developers were thinking by not enabling the ability to add sections to various pages the way you can on the home page, but needless to say it's made the lives of creatives who don't know how to develop code hit a huge wall of "crap, what do I do now?"

The good news? There is a way to add sections to your landing pages! It just has a bit of a learning curve and is going to require a little more time and pre-planned vision to bring that beautiful landing page to life.

 

Be sure to watch the accompanying YouTube video for added visuals and auditory explanations! 

I highly recommend printing out the blog and following the written steps along with the YouTube video so that everything makes the most sense.

Part One: Create a Landing Page

The first thing you'll want to do is pretty basic and requires no coding - YIPPEE!!

Simply go to Online Store > Pages add a new page and create the Title of your landing page.

*Note the section on the lower right hand side that says 'templates' this will be changed in future steps, so you'll want to remember where it is!

 

Part Two: Add the Landing Page to the Navigation Bar

Once you have created your landing page, you'll want to make sure it shows up on your main menu section so people can easily find it.

Go to Online Store > Navigation select add menu item enter the name of the page as you would like it to appear on your menu and link it to your landing page.

Part Three: Create a Page Template

So you have the basic form of your page complete and discoverable on your website, congrats! You're on your way to having a beautiful landing page.

This is where it starts to get tricky, but don't worry I'm here to help you out!
Remember when I said you'd want to remember the template section on your landing page area (see * in part one)? 

By default - all pages are going to be tied to a simple 'page' template which links back to a specific section code from the edit code area.

What we're going to do is create a new template that will serve as the area to add the section code to your landing page without interfering with any other pages on your website.

Go to Online Store > Themes > Actions > Edit Code

From the 'edit code' area on the left hand side view you will see various folders. The one you want to focus on to start is the Template Folder.

To see the basic "Page Template" code that is set as the default code for all of your pages you can select the template file page.liquid 

As you can see it's very simple and basic code - pulling in the title and content that you add from the pages section in your online store. 

What we want to do - is create a new template that is specific to your landing page. This way, we can edit the code for each landing page without it affecting other areas of your website.

Let's create a template for a Test Landing Page (as an example)

From the Template Folder > add new template > select 'page' called test-landing-page

*IMPORTANT* when creating working with your code DO NOT use any upper case letters and use the (-) symbol in the place of spaces.

You'll notice the "page" code is already inserted automatically, so all that's left is to assign this template to your landing page.

Go back to Online Store > Pages > landing page and change template using the drop down menu and select the template file you just created to link it to the page

Once you have created the template and tied them to your page we can move on to creating sections for each page!

Part Four: Plan Out your Landing Page Layouts

This is by far the most important step, as it will make the future steps much easier for you. Using the sections available on the homepage you will want to plot out a visual outline of what you want your landing page(s) to look like in a list view.

For example:

• Image with Text Overlay - Landing Page Title
• Image with Text - Mission Statement
• Image with Text - Meet the Creator
• Text with Columns - Engraving Process
• Image with Text Overlay - Engraving Contact Link

You don't need to know the exact words or images you want to add in each section yet, but you will want to have a unique title for each section that will not be repeated on any other landing pages. 

Part Five: Add Sections to a Landing Page

You are so close to being done! Congrats on making it this far! 

The one good thing to having the sections available on the home page is that this means the code already exists! Other than understanding how to tie a couple components together so they all talk to each other - you will not have to learn how to write lines upon lines of code to add sections to your landing page! 

This last segment has a couple different parts to it, so make sure to read them carefully and watch the accompanying video to really settle the information in.

Section Names - Home Page Name & Edit Code Name

The first part to understand is that each section is going to have two names. Yea, a little confusing but I promise I'll help make sense of it all!

The first name is the name of the section as it appears from the "customize" theme tab. So when you customize the home page there is a "image with text" section name.

Online Store > Themes > Customize > Home Page > Add Section > Image with Text Section

The second name is the section's code file name within the "edit code" screen. Under the sections folder within the edit home screen you will notice there isn't a file named "image with text."

Instead, the code for this section has been titled "feature-row."

Did I lose you yet??

It's a little confusing, but think of it like a codex key when you wrote letters to each other in code where A=1 and B=2. At the end of the day they had the same value but different names, and if you didn't understand the key you couldn't figure out how to match everything up!

Lucky for you I've created a key which will list out all 17 section's customization tab name and section file name along with visuals that you can view here:

• Shopify Section Name Key PDF

Create New Section Files with Specified Titles

Remember in Part Four how I had you list each section you wanted in order and create a short title for that section? This is where that planning is going to become useful.

We are now going to add a new section file for each section you want to add on your website. Instead of using the customization section name, we will use the section file name in the edit code view and add the specified title

Example (Same from Part Four):

• Image with Text Overlay - Landing Page Title
• Becomes > hero-landing-page-title
• Image with Text - Mission Statement
• Becomes > feature-row-mission-statement

Once you create the specified section file, you will copy the "main section file's" code content (ex. copy hero.liquid code) and paste the code into the "specified section file" code content area (ex. paste into > hero-landing-page-title

Just a few more steps left. You are almost done!

Add the Specified Section Code to your Landing Page

For the last major piece we are going to alter the code on the template files you created for your landing page that we completed in part three by adding the sections!

Ex. edit code > template folder > test-landing-page.liquid

Once you are in the template file of the landing page you want to edit we are going to add the sections in order of how you would like them to appear on your page.

You may be intimidated by adding code, but the only formula/ line of code you will need to remember is:

{% section 'insert-section-name-here' %}

Ex. Let's add our first section "Landing Page Title"

• Find the line of code that says "{{ page.content }}" it will appear in the middle of the code page, indented in.
• Click to the right of the line and click enter to create a new line of code
• The cursor should be in line vertically with the {{ page.content }} 
• Copy and Paste the line of code:
• {% section 'insert-section-name-here' %}
• Change the 'insert-section-name-here' content to the name of the section file you want to add
• Ex. {% section 'test-landing-page' %}
• Repeat the process until all of the sections you want on the landing page are added and click save

Part Six: Customize the section content from the 'customize' page

The difficult part is over and the fun part begins! You can now return to the customization area of your website, and add in all of the text and images to each section as you would for your home page!!!

If you ever decide to change the layout of the sections you will have to edit the order of the sections from the edit code area, but now you have a beautiful and simple layout that is going to adapt to mobile and computer views automatically - giving your customers a great web browsing experiencing and increasing the amount of time they spend on your website!