Setting up your homepage with Launch
When you first install Launch, you’ll notice that several default homepage sections are already visible: the Header and Footer, as well as Slideshow, Newsletter, Social feeds, and several other dynamic sections. Notice how each of these sections associates to “empty state” placeholder content in the preview. This will give you an idea of the formatting of each section.
Clicking on any of these "section" blocks will bring up a set of unique configuration settings, or you can click Add section, which will reveal an array of other optional sections that you can add to your homepage. We'll cover each of them in detail—more or less in the order they appear—below.
Fixed homepage sections
Fixed sections are exactly what you’d guess they are—components that are fixed to certain areas of your site and cannot be moved. In Launch, there are five fixed homepage sections: the Header, Footer, Slideshow, Newsletter, and Social feeds. Here’s what they do and how to set them up in your store:
The header is the rectangular area that runs across the top of your store containing your logo, navigation, currency converter, and cart. It appears on every page and is intended to be used to promote your company's brand and make it instantly recognizable to your visitors. This is a static section and cannot be repositioned.
Start by selecting the Menu you want to use in your header navigation from the dropdown menu at the top. If you want to edit the links in the menu you've chosen, use the Edit menu shortcut.
If you toggle the Enable fixed header option, the header will remain visible as visitors scroll down the page instead of instead of remaining fixed at the top of it (this is sometimes referred to as a sticky header).
Checking the Show cart icon option displays an icon of a shopping cart that will take visitors directly to their cart if they click it.
Enable social icons in collapsed navigation refers to whether or not icons linking to your social accounts display in the collapsed (or mobile) view of your store navigation. When enabled, it looks like this:
Your store’s logo provides branding for your site and a clickable link to return to the homepage.
By default, Launch will display your store name as your logo. To replace it, click the Upload image button and select the file you'd like to use. We recommend a 400 x 200px .png image file. Larger images will be automatically resized to fit this constraint.
If you have an especially dark (or light) colored logo, you can enable and upload an Inverted logo image to use for better visibility against your slideshow images.
A QUICK WORD ON SETTING UP YOUR NAVIGATION
You may have noticed that while Launch's navigation is located within the header area, there aren't actually any settings for it within the Header section. How perceptive of you! This is because there aren't actually any theme-specific navigation settings; everything is handled from your Shopify admin (Online store>Navigation).
If you're looking for some guidance on how to configure your menus (including dropdown menus) we highly recommend taking a gander at this article. Like all Shopify themes, Launch supports up to three levels of dropdown navigation.
Like a footer on a document or report, a website footer contains information listed at the bottom of a page. Typically, the footer is the area that visitors expect to find the "fine print"—legal information such as terms and conditions and privacy policies, but also FAQs, size guides, and contact information. Launch provides the space to display all of these and more.
Set the Background style (Dark or Default) from the dropdown at the top.
If you would like to Show borders, check that option. If you would like to Enable payment icons, check that off as well. (You can enable and manage those from the Settings>Payments section of your Shopify admin.)
If you want to show your logo in your store's footer (top, left corner), make sure you check the Show logo in footer option. Then upload your Logo image (again, we recommend a 400 x 200px .png file) as well as an Inverted logo image (which will heighten logo visibility against very dark or very light slideshow images).
With Launch, you can add three optional types of content to your footer: Menus, Social media links, and Rich text. You can add up to four content blocks here (in the example above, we've added two menus, one social media links, and one rich text). Just click Add content and choose the one you want to add. Setting up the blocks is very intuitive—just follow the prompts!
The top section of your home page is your store's most valuable real estate. To make the most of it, merchants often use a Slideshow to showcase their deals and top-selling products. To display a slideshow on your homepage, simply click the Enable checkbox under the Slideshow section. You'll be able to prepare up to six slides, each with unique images, messaging, and calls-to-action.
Once you've switched on the slideshow by clicking Enable, you can start customizing the layout and transitions of your slides.
Launch's slideshow comes with two Layout options: Full width (which spans the width of the browser, but not the height) and Full window (which will expand into the navigation area). Select the layout you want to use from the dropdown menu.
You can also choose between having your slides Slide horizontally or Fade in and out under Transition. If you would like your slides to transition automatically, check the Auto rotate between slides box. (If you don't check it, users will still be able to scroll through slides manually using the left and right arrows at the edge of the slideshow.)
This is where you'll upload the images you want to use and customize the text overlays. Begin by clicking on Slide to expand the settings.
It's probably best to upload an Image first. That way you can see how the text and colors look with it before you get too far into the process.
In the fields above, you can specify the Text alignment (left, right, or center) and Text style (light or dark). Experiment with the default text to make sure the text is legible against your image.
Below, you can also specify the Overlay and Overlay opacity from the dropdown menus. Here are your options:
- None will display your image exactly as you uploaded it (i.e. no overlay).
- Gradient will use the Primary color and the Secondary color (set under General settings>Color) to create a horizontal gradient.
- Primary color will use the Primary color for a single-color overlay.
- Secondary color will use the secondary color for a single-color overlay.
- Black uses black for a single color overlay. (But we probably didn't need to tell you that!)
Use the Overlay opacity dropdown to tweak the intensity of the overlay if you're using it. 10% is the lightest; 90% is the darkest or most vivid.
Below that, you can input each slide's Heading, Subheading, Button text, and Link URL (look at the live preview to see the formatting for each). You don't need to fill every field if you don't want to—you may not want to include any text at all!
Launch supports up to six slides at a time. If you run out, you will have to delete some before you can add more.
To help you build your mailing list, Launch comes with a newsletter subscription field that (if enabled) appears in the footer of your store. Just check Enable in the Newsletter section settings to enable it.
You can also choose the Background style from the dropdown menu. There are four options: Light, Color, Gradient, and Default. You can change the colors associated with each under General settings>Colors in the theme editor.
If you want to customize the text that appears at the top of the section (what? "Newsletter" and "Subscribe below" not creative enough for you?) you can do so by navigating to the Edit languages page through the theme menu (it's the dropdown that appears when you click on your theme name at the top it the editor). You'll find the fields that appear in the Newsletter section under General>Mailing list.
Want to display your latest Instagram and Twitter activity on your homepage? No problem! Just click on the Social feeds section and do the following.
Start by clicking Add content or on one of the content blocks that's already there. Clicking Add content will prompt you to choose either Instagram or Twitter.
For Instagram, you will need to locate and input your Instagram Access Token. Follow the help link (or click here) to learn how to generate a token. Copy and paste your token into the Access token field in the theme editor and you should see your feed appear right away in the preview.
For Twitter, simply enter your Username (excluding the '@' symbol) in the corresponding field and check the Show retweets option if you would like to include those in your feed.You can also choose the Background style from the dropdown menu (Light, Color, Gradient, and Default). You can change the colors associated with each in under General settings>Colors in the theme editor.
Dynamic homepage sections
Most of Launch's homepage sections are dynamic, meaning you can add as many of them as you want and rearrange them in the sidebar to create a completely unique layout.
Out of the box, your theme has several dynamic sections enabled already. These are merely suggestions for how you might structure your homepage. Don’t want to include a section? Delete it! (By clicking on it and then clicking the Delete section button at the bottom.) Want to include something that isn’t already there? Click Add section and find it on the list.
The Blog posts section allows you to display images and text from up to four of your most recent posts. To specify the "preview" text that appears for each post, we suggest using Shopify’s excerpt function, which you'll find in the post editor under Online store>Blog posts.
Start by selecting the Blog you want to feature from the top dropdown. While many stores maintain only one blog (called "News" by default) some create multiple to better categorize information including customer stories, tips, tutorials, FAQs and more. You could even create multiple blog posts sections on your homepage to feature recent posts from different blogs!
Once you've chosen your Blog, you can choose the Background style. There are four options: Default, Light, Color, or Gradient.You can change the colors associated with each in under General settings>Color in the theme editor.
Next, you'll select the Number of posts to show from the dropdown menu. You can display two to four of your most recent posts in the blog posts section on your homepage.
Finally, you can enter an optional Headingand Subheadingfor your section in the bottom fields. Something like "Latest News" or "Our Blog" should do nicely!
Collection list sections are designed to help you showcase new or seasonal collections on your homepage. With Launch, you can feature up to nine collections at a time.
Start by choosing the Background style you want your collection list section to use from the dropdown menu. There are two options: Default and Light.
Next, you'll assign a heading and subheading to the section in the Heading and Subheadingfields. You can also choose whether or not to display a product count below each collection by checking the Show product count box.
Here, you'll select the collection(s) you want to display by clickingAdd Collection. You can set up collections in the Products>Collection>Add collection section of your Shopify admin. For instructions on how to set up collections see our article, Getting Started: Shopify Basics.
You can feature up to nine collections at a time in this section. If you want to add more, you can always add another collections list section, or feature them another way (in a featured image with text, for example).
The Featured collection section is designed to—you guessed it—draw attention to products from a specific collection on your homepage. You can display up to twelve products from the same collection in this dedicated space.
Start by choosing the Background style you want your collection list section to use from the dropdown menu. There are two options: Light and Default.
Next, you can select the Products per row and Number of rows from the corresponding dropdowns.
Assign a heading and subheadings to the section in the Heading and Subheading fields. If you want, you can also add a button that links to each collection in the Button text field.
Finally, select the Collection you want to display, and you're done!
Product focus sections are designed to display the core highlights of your product. It can display a product image and up to four text blocks with icons. Note that this section can be used on both the homepage and product page, however they are set up in different places, and can even use different products, images and features! We'll cover how to set up product focus on your homepage here, and on the product page in the Product page section of the docs.
First, select Show product image if that's something you want to do. Without an image, you can still use icons and text to highlight features about your product.
Next, you'll choose the Background style you want your product focus section to use from the dropdown menu. There are four options: Light, Color, Gradient, and Default. You can change the colors associated with each under General settings>Colors in the theme editor.
Then, add a Heading and Subheading to the section. You can use the name of the product or whatever else you want!
You can add up to four blocks to your Product focus section, each with a title, text, and icon. Simply enter a Headingat the top, then say a bit more in the Text field, and finally, enter an Icon name. Click the link in the theme editor (or here) to view the list of available options. When you find one that you like, click on it and a text name will be revealed. Copy this name into the icon name field, and voila! Repeat for up to four sections, and you should have one handsome product focus section on your homepage.
The Product Goal section displays the progress of a campaign, tracking your product sales in real-time. When you enable this section (under General settings>Product goal not Sections>Product goal—we know, it's tricky!) it can appear in three places: as a section on your homepage, as a section on your product page, and as a banner at the top of every page that isn't your homepage. We'll cover how to set it up on your homepage here, and on your product page later on (see Product page under Products and Collections).
Here's the funny thing about adding a Product goal section to your homepage: you don't actually set it up in the Product goal section of your theme editor like you would any other section. Sure, there's a Product goal section there (and if there isn't, you should go ahead and add one) but if you click on it you'll notice right away there's nothing there.
So where are the settings for the Product goal section? Well, it actually all starts by setting a Featured product under the General settings tab. You'll do this by selecting a Product from the top dropdown menu. You can ignore the other options for now—we'll come back to them when we cover adding Product focus to your product pages.
With your Featured product set, you can now navigate to General settings>Product goal.
Start by checking the Enable box at the top. Then select your Background style (Light, Color, Gradient, and Default), and input your Button text and Estimated delivery text. The button will link to the product page of the Featured product you've set. It will also be used as the add-to-cart button on the product page.
In the next section, you'll add your Starting quantity and Goal quantity. To start your progress at 0%, enter a Starting quantity equal to your featured product's current inventory. If you have already made pre-sales, enter a number higher than your featured product's inventory to account for the progress you've made. Your Goal quantity is the number of sales/pre-orders you'd like to make before funding is completed. If you want your product goal to show units sold instead of money raised, you can check the Show product goal as quantity box.
At the bottom, you'll set the End date and time for your goal. Note that the mm/dd/yyyy hh:mm format is required. This will be used for the countdown on both the featured product's product page and the banner (which is displayed on every page except the homepage). Here's how it looks on the product page:
FEATURED GOAL II
With your Featured product set and your Product goal options configured, there's only one thing left to do: get it to appear on the homepage. In fact, if you read the intro to this section, there's a chance it's already there. If not, go back to your Sections tab, click Add section, and find and add Product goal. Simply adding the section should make it appear— ready-made—on your homepage. Ta da!
Images with text
Image with text sections are incredibly versatile, allowing you to highlight all sorts of content, be it new products, special promotions, or something else entirely!
You'll begin by setting the Background style of your section from the dropdown menu (Light or Default).
Next, you'll input the Heading and Subheading for the section, and set the Alignment of your text/images below that (your heading and subheading will be centered).
Click any Image block to expand the settings. Upload the Image you want to use (we recommend an 800 x 640px .png file), then add the Heading and Text for each block.
You can add up to four images to this section. Users will be able to flip through your images using numbered bubbles above your headings.
When it comes to making purchasing decisions online, customer reviews and testimonials can make or break a sale. Launch allows you to build social proof and increase conversions with a uniquely-styled testimonial section built into your homepage.
Start by selecting a Background style from the dropdown menu (Light or Default) and adding a Heading and Subheadingto your section ("Testimonials" is a good bet, but you can use anything you'd like!).
Click on a Testimonial block to begin. Add the testimonial you want to feature in the Quote field, then put the source in the Source field. Input a City, upload an Avatar (the image or icon you're going to use to represent your source) and you're done!
You can add up to six testimonials to this section.
Text columns with icons
The Text columns with icons section is designed to call out a product's features or guide customers through a process. The section can display up to six columns, each with its own icon, heading, caption, and call-to-action. Use it to explain your shop’s ordering process or what makes your products great.
Start by selecting a Background style from the dropdown menu (Defaut or Light) and selecting the number of Columns per row you want to display from the corresponding dropdown. Then add a Heading and Subheadingto your section (we've used "How it works" but you can use anything that works with your content).
Click on a Columnblock to begin. Add the Headingand Textfor your first column, as well as the Button text and Link you want your call-to-action to have.
You can use Ionicons to source icons for your site. You'll notice that by default, the theme uses "ion-image," but you can click the link below the text field to see the full array of options. Click on the icon you want to use, the copy and paste its name into the theme editor (Icon name).
You can add up to six columns (or six content blocks in three columns) to this section.
Like Text columns with images sections, Alternating content sections are great for explaining processes or highlighting features. Alternating content sections support images, video, and text, and you can include up to three blocks (text + image/video) on your homepage. The features will alternate between having the text on the left and the image on the right, a layout that is both visually pleasing and easier for your customers to read.
Click on Image, Video, or Add content to open up the options for a content block.
The first step is to choose a Background style (Light, Color, Gradient or Default) from the dropdown menu at the top. Then enter the Heading and Text for your content block. If you would like to include a call-to-action, complete the Button text and Link URL below.
Finally, upload an Image or Youtube/Vimeo link and Video thumbnail(we recommend a 1020 x 700px .png image) and you're done! Rinse, repeat for up to three pieces of alternating content.
Full-width media sections are a great way to build your brand, highlight special promotions and products with immersive, site-spanning images and video. You can add a text overlay and call-to-action to your full-width media sections if you wish.
The first step is to choose a Background style (Light, Color, Gradient or Default) from the dropdown menu at the top.
Next, input the Heading and Text you want to display over your image or video, and select the Media type (Video or Image) from the dropdown. If you selected Image, upload it in the box below. If you selected Video, copy and paste the Youtube or Vimeo link into the box.
Finally, if you want to include a call-to-action in this section, enter the Button text and Link in the last two fields. Note that your call-to-action will only be visible if your Media type is set to Image.