Homepage Setup

 

Now it's time to start building our your homepage. Again, as we add content things might look a bit off - but we'll start adjusting the style settings soon and everything will fall into place. 

First, scroll down to the Home page in your Not Linked section.

Next, click on the "Top" page, hover over your site, and click "edit".

Now just copy and paste the content from this post and apply the correct font style from the dropdown.

simply crafted and uniquely made

(font style: Heading 1)

This is where you brand bio can go. If you need help crafting your brand bio you can download our free formula at golivehq.co

(font style: Normal / Italic )

Next we'll apply spacer blocks to the left and the right of the text. You can increase or decrease the width of the spacer blocks by simply clicking on the edge and dragging to the left and the right. To make sure that the font is centered, make sure that the width of the spacer blocks are the same on the left and the right. 

After you're done here, click Save


Next, click on the Featured Products section. This is where you'll upload the photos for your Featured Products Gallery. 

In this post, you'll find the placeholder images that you can use for this section. 

After your Images are uploaded, you can drag and drop them to rearrange the order.  

Screen Shot 2018-07-18 at 11.37.16 AM.png

Next, you'll add Button Text to each image. To do this, hover over the image you'd like to edit and click the gear icon. Now, simply paste the demo text from this post into the Title section. Repeat this process for all three images. 

Image One Demo Text:

Shop Our Latest Collection

Image Two Demo Text:

New in Home Decor

Image Three Demo Text:

New in Beauty + Cosmetics


Moving down to page, we'll add your Featured Products section. 

First, add a text block and copy and paste the demo content from this post.

It’s the unexpected things that make life special.
Come explore our collection of hidden gems. 

(font style: Normal / Italic )

Next add a space block to the right of the text to push the content all the way to the left hand side. 

Now add an Image Block with the FeatureProduct01 placeholder photo. You can download the placeholder images for this section in this post. 

Next you'll add a text block underneath the image using the demo content from this post. 

FEATURED PRODUCT ONE:

(font style: Heading 3)

Add your product description here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

(font style: Normal / Italic)

Now we'll move the text block to the right of the image block. You can change the width of the image by dragging the edge to the left and the right. 

Next add a button block underneath the text. Copy and paste the button text from this post into the "Text" section. 

BUY NOW

Don't worry about adding a URL now. We'll come back to this section later. 

Underneath the button, add an Image block. Here, you can upload the FeaturedProduct02 placeholder image from your folder. 

Lastly, add a new content block underneath the FeaturedProduct01 image add the demo content from this post and another button block. You might need to tweak and resize each section a bit.  

FEATURED PRODUCT TWO:

(font style: Heading 3)

Add your product description here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

(font style: Normal / Italic)

BUY NOW 

(button block) 

Make sure to click save before moving on. 


Next click the "Sale" section under your Home page. Hover over this section and click "Banner". Here you can upload the placeholder background image from this post. 

Once the image is uploaded, click "save".

Now hover over this section again and click "edit". Here you can add the demo content from this post: 

summer sale

(font style: heading 1)

Now Through August
Get 20% off select items in our shop.

(font style: normal / italic) 

Finally, add a button block. Again, don't worry about adding a URL here yet. 

SHOP THE SALE

Make sure to click save before moving on. 


Next click on the Featured Products 02 section, hover over your site, and click "edit". 

Now, add a Stack Image block. Use the Placeholder Images in this post for this section. 

Once the image is uploaded, click "Design" and then from the dropdown that says "Image Link", select "Button". Type the demo content from this post into the Button Text section

BUY NOW

Then, click "Apply".

Now you can add the content from this post underneath the image. 

Featured Product One

(title section) 

Share some brief information about this product. One to two sentences is perfect.

(subtitle section)

Repeat this product with the FeaturedProduct02 and FeaturedProduct03 placeholder images, using the same demo text as you used in the first image. 

Once all three images are added, just drag them next to each other in three columns. 

Click save before moving on.


Now click the Newsletter section of your Homepage. First, add the background by hovering over your site and clicking Banner. Upload the banner graphic from this post and click Save. 

Now hover over your site again and click "Edit". Here, you'll add a Newsletter Block. Add the demo content from this post into the Title and Description section. 

Become an Insider

(title)

Sign up with your email address to receive updates.

(font style: Italic) 

Next, click Storage. This is where you'll link up your Mailchimp account. If you don't currently have a Mailchimp account, you can sign up for one at Mailchimp.com. You'll need to create an account and a subscriber list before linking this section up.

(This post will help you get set up and create a list on Mailchimp) 

Once you've created your Mailchimp account and list, click the Mailchimp button. Next, you'll need to log in to your account. After you're logged in, select the list that you'd like new subscribers to be added to. Finally, click apply. 

Make sure to save changes before moving on.


Lastly, we'll add content to your Footer.

First, hover over the Footer Top Blocks section of your site and click Edit. 

Now add an Archive block. For, Content, select "Shop". Next, click "Display" and apply the settings in this post:

  • Layout: Dropdown
  • Dropdown Title: Shop by Category
  • Group By: Category
  • Sort By: Name

Click "Apply" once you're done. 

Next, add the content from this post that will link to your social platforms. 

facebook  instagram  pinterest

(font style: heading 3) 

Now you'll add your Instagram feed. If you haven't connected your Instagram Account yet, check out this post for a refresher on how to do that. Once your account is connected, add an Instagram Block and use the settings outlined in this post. 

  • Connected Account: Your Account Name
  • Items: 5

Then click "Design"

  • Aspect Ratio: 1:1
  • Crop Images: Checked
  • Thumbnails Per Row: 5
  • Padding Around the Gridded Images: 15

Click Apply after all of these settings are in place.

Now you can drag the Instagram block to the right of the categories and text, and resize as needed. You might need to come back to this section later once we adjust the style settings.

Now add a line block underneath the categories and instagram feed. 

Next, add the demo content from this post and drag it to the right of the line. Adjust and resize as needed.

Parker and Co | Design by GoLiveHQ.co | Photos by Unsplash

(font style: normal / italic / aligned to the right )

Make sure to click save.

And that's it! After finishing this tutorial you should have all of the content added to your Homepage. 

In the next post, we'll start adjusting your style settings.