Setting up your homepage with Launch
Image with text sections are incredibly versatile, allowing you to highlight all sorts of content, whether it's new products, special promotions, or something else entirely!When you first install Launch, you’ll notice that several default homepage sections are already visible: the Header and Footer, as well as Announcement Bar, 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 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 sections: the Announcement Bar, Header, Footer, Slideshow, Newsletter, and Social feeds. Here’s what they do and how to set them up in your store:
The Announcement Bar is a great place fill your customers in on new promotions, offers and changes to your store. This bar will appear above the Header section making in the first thing customers will see at the top of the page when they visit your store.
First up, The Announcement Bar settings let you easily turn the Announcement bar off and on, using the Show announcement setting. You can also limit the bar to only display on your homepage by turning on the Show on homepage only setting.
You'll notice that the Announcement bar has two text fields. The first is a standard Text field that you use the input the copy you'd like to appear in your Announcement bar. The second field, called the Text (mobile), is optional and allows you to enter alternate copy that will only appear to customers visiting your store on mobile devices. We recommend using this field to craft shorter copy, more suitable to the smaller screens of mobile devices.
Lastly, you can add a Link and customize both the Background and Text colors of the Announcement bar to standout or match the branding of 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.
Next, you can customize your newsletter section by choosing the Background style (Light, Color, Gradient, or Default) and by adding a Heading and/or Subheading,
Note: the Background style colors are associated the your color selections under General settings > Colors in the theme editor.
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!
The Featured product is designed to - you guessed it - draw attention to a single product on your homepage! If you've already skipped ahead, you may have noticed that there is also a Featured product section in the General theme settings. That Featured product is used to select a product for goal tracking and the technical specifications feature on the selected product's page. This Featured product is a bit different and completely separate from those settings. This is just a simple section that lets you highlight a product on your Homepage.
Super duper easy - just click S elect product and choose which product you'd like to feature. The product images, options and an Add to Cart button are automatically pulled in, allowing customers to purchase the product right from the homepage! There is also a View details link that will take customer's to the product's page where they can view the full description.
You've also got a few other settings to play with:
- Enable image zoom
- Enable cart redirection - this automatically sends customers to the cart page after clicking the ATC button
- Show share buttons -turn on/off the display of social sharing buttons
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!
Image with Text
The Image with text section is incredibly versatile, allowing you to highlight all sorts of content, whether it's new products, special promotions, or something else entirely!
The I mage with text settings are fairly simple, just choose your Background style (Default, Light, Color or Gradient).
Next, you'll set up all the section's content. You can add a Heading, Subheading, Image, as well as, a customizable Button with Link.
Launch comes with an eye-catching Map section that businesses with brick-and-mortar locations can use to display contact information and give directions to their store
Start by setting the Section height from the top dropdown. Then, add a Heading (something like "Come say hi" or "Our workshop" should work) and Hours & Location (or anything else you think is relevant).
We've also included Text alignment, as well as, Desktop and Mobile layout settings to get the display of your map's text information just right.
The Map address is the point Google will use to drop its pin. It's the red marker in the image above.
To pull a map into your homepage, you'll need to generate Google maps API key and paste it into the Google Maps API key field . If you need help, just follow this link to open Shopify's step by step instructions for getting your key setup.
In the end, what you're looking for is this long string of characters to paste into the API field:
You can also customize the display colors of the map using the Map foreground color and Map background color pickers.
Note: that these do not control particular components of the map (streets, water, etc.) but rather the swatches are linked to, and will affect, the entire map.
Next, you can upload an Image that will be used in the event that the map can not be loaded. This can be a screenshot of a map, or anything else you want to display if you map isn't working for some reason. Use the Image position settings to adjust the focal point for the image.
If you've chosen any of the Overlay positions for your text, you can use the Overlay settings to choose a Color to overlay the map (or image if the map is not displaying). Set the Opacity setting to 0 to disable the overlay.
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.
The Rich Text section is a flexible feature to help add valuable content to your homepage.
You can choose between Regular, Wide and Full Width for the Section width to suit what you're looking for.
There are two types of content block in the Rich Text section: Text and Page.
Choosing the Text block will allow you to enter text directly into a text editor with in the theme settings. You can use the available text formatting buttons to customize your text. You can make your text Bold, Italics or add a Link . You can also give your section a Heading and adjust the Heading size, as well, adjust the Text alignment of the content.
If you have more complex content to show off in the Rich Text section, you can go with a Page block. The Page block allows you to pull in the content from one of your static Pages within the Shopify admin. Just click the Select page button to show a list of the pages you've created and select the one you'd like to display. This block works great if you'd like to utilize the power of a full WYSIWYG editor to customize your text content. Toggle on/off the Show heading setting to display or hide your page's title and use the Heading size setting to adjust it's size.
Note: the Page block is designed to display only the WYSIWYG content of your static page. This means that if you have a static page that's utilizing the Contact or FAQ page templates, it will still only display the WYSIWYG content.
A word of caution! If a table is added to a Page that you've choose to show on the Homepage, be sure to preview on mobile. Tables are tricky to scale and tend to break the width on smaller screens.
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.
Launch's Video section is a great way to build your brand, highlight special promotions and products with an immersive, site-spanning video. If you wish, you can overlay text over your video section to tell visitors what the video is about.
First up, you add a section Heading with some Text. These will appear above your video.
Then you can select your Video. This feature supports Youtube and Vimeo videos only. Simply paste in the URL to video, et viola! Here, you can also choose to enable Autoplay for the video. If enable, this means the video with automatically begin playing when a customer visits your store. If you' like customer to have to press play instead, just uncheck this setting.
You have the control to select the video's Aspect ratio between 16:9 and 21:9. This will set the width in relation to the height as you've selected it!
Next, you can add an Overlay to the video. This consists of an Image with text and a play button will appear over the embedded video. When a customer clicks the play button, the overlay will disappear and the video will begin to play. This comes in handy when you'd prefer a placeholder to show before the video is selected. But it's worth knowing the Autoplay feature wont work with the Cover image as a placeholder. It's one or the other for these opposite settings.
The Overlay settings include:
- Show overlay - turns the Overlay on/off
- Heading and Text position - this means wether your Heading or Text will appear above or below the play button
- Text color
- Background color - this act more as a colored overlay over the cover image. This is helpful to make your text readable over the image
- Background color opacity - turn to 0% to disable the Background color
- Image - this is your "cover image" and will appear as a placeholder for the video
- Image position - this adjust the focal point of your image and is helpful if your image's aspect ratio is different then tha section's. If the image you are using has roughly the same aspect ratio of the setting, you won't see this setting make sure of an impact
- Button style - choose between a primary and secondary button style
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.