(Old Designer) Adding a Page to your Site and Navigation : Support

If you are wanting to specifically add a one-time product shop page to your theme/store (a place where people can look at and buy one-time products and not just subscription products) then follow the directions on this help document: How to manually add a One-Time Products Shop to your Theme

This only applies to the old designer.

If you are wanting to just add a normal HTML page to your theme/site (like an About Us page or FAQ page) then follow the directions below:

Go to Design

From the merchant portal, choose Design from the navigation menu.

Go to the Code

Find the section for Published Design and press the Code button.

Add a New Page

Find the section for HTML and click the +Add New menu item.

An "Add new file" window will pop up and ask you to name the new page. Whatever you choose as the name, make sure it ends in .html. Our test new page is called NewPage.html

This gives you a BLANK HTML page and without ADDING HTML CODE to make it a valid HTML page, you will not be able to see your new page and accessing that page will give you a 404 error. If you're unsure how to do that, you can use an already existing page (like the index.html page, or the about_us.html page if your theme has one) as a template and copy/paste code over to the blank page to get your started.

Our recommended designers would be happy to assist with adding a new matching page to your design as well.

This may not work for every theme or website but below is some example HTML code you can add to your new page to make it show up. Copy and paste the code between the "Start of Code" and "End of Code" lines below onto your new page. Once you save your changes with this new code added, you should be able to now see your page because it has valid HTML code on it. You can use this as a starting point to customizing your new page. This code came from the default "About Us" page on the Fresh theme.

--------------------------------------Start of Code-------------------------------

{% extends "base.html" %}

{% block page_header %}
<div class="about small-headline container-fluid">
<div class="row">

<div class="showcase-content">
<div class="showcase-text">
<h1 class="title" data-barley="about-headline-title" data-barley-editor="simple">
Always fresh, picked just for you.
</h1>
</div>
</div>

</div>
</div>

</div>
</div>
{% endblock %}

{% block page_content %}

<section class="row text-center">
<div class="col-xs-12 prose">
<h1 data-barley="about-title" data-barley-editor="simple">Need more fresh fruit in your life? We’ve got you covered.</h1>
<div data-barley="about-content" data-barley-editor="advanced">
<p>Proin ac mi feugiat, auctor nibh et, congue ante. Ut tempus dui et bibendum vulputate. Sed faucibus eros urna, in molestie leo convallis vel. Pellentesque fermentum tempor purus mollis porta. Duis vel tempus turpis. Praesent feugiat nibh non aliquam venenatis. Fusce nisi orci, lobortis in tristique id, tempus commodo sem. Pellentesque mollis, nisl vitae ornare efficitur, orci dolor hendrerit sapien, in ullamcorper mauris est et velit. Nunc at nulla eu erat rhoncus efficitur nec quis dolor. Vivamus enim velit, ultricies vel porta id, euismod at massa. Pellentesque mollis, nisl vitae ornare efficitur, orci dolor hendrerit sapien, in ullamcorper mauris est et velit. Nunc at nulla eu erat rhoncus efficitur nec quis dolor. Vivamus enim velit, ultricies vel porta id, euismod at massa.</p>

<p>Pellentesque mollis, nisl vitae ornare efficitur, orci dolor hendrerit sapien, in ullamcorper mauris est et velit. Nunc at nulla eu erat rhoncus efficitur nec quis dolor. Vivamus enim velit, ultricies vel porta id, euismod at massa.</p>

<p>Proin ac mi feugiat, auctor nibh et, congue ante. Ut tempus dui et bibendum vulputate. Sed faucibus eros urna, in molestie leo convallis vel. Pellentesque fermentum tempor purus mollis porta. Duis vel tempus turpis. Praesent feugiat nibh non aliquam venenatis. Fusce nisi orci, lobortis in tristique id, tempus commodo sem. Proin ac mi feugiat, auctor nibh et, congue ante. Ut tempus dui et bibendum vulputate. Sed faucibus eros urna, in molestie leo convallis vel. Pellentesque fermentum tempor purus mollis porta. Duis vel tempus turpis. Praesent feugiat nibh non aliquam venenatis. Fusce nisi orci, lobortis in tristique id, tempus commodo sem.</p>
</div>
</div>
</section>

<section class="row text-center">
<a type="button" class="btn btn-lg btn-primary" href="/subscribe" data-barley="about_cta_button" data-barley-editor="link">
GET STARTED
</a>
</section>

{% endblock %}

-------------------------------------End of Code-----------------------------------

Add your page to your navigation

You'll be able to add your new page to your navigation by going to your header.html, or base.html file. Some Designer templates use header.html and some use base.html so you'll need to find the appropriate file for your template.

You can navigate to this new page by typing your web address "/{your new page name}" If your store was at www.mystore.com, you would navigate to the new page at www.mystore.com/newpage

Scroll down the page and you'll notice your current pages listed already (see the screenshot below).

To add your page you'll insert the following code - replace every instance of 'Team' with your new page name.

<li><a href="/team" data-barley="header_team_title" data-barley editor="linkedit">Team</a></li>

For the Joybox template you must also add a class to the menu line item and then add that class to the CSS page so that it is styled.

For example, it would be

<a class="link-custom" href="/team">Team</a>

And then add this at the bottom of the style.css page:

.sheader .navigation .link-custom {
  float: right;
  margin-left: 35px;
  padding-right: 35px;
  line-height: 35px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}

(Old Designer) Adding a Page to your Site and Navigation Print

Go to Design

Go to the Code

Add a New Page

Related Articles