Setting up your homepage with Launch
- Blog posts
- Collection list
- Featured collection
- Featured product
- Product focus
- Product goal
- Image with text
- Images with text
- Rich text
- Text columns with icons
- Alternating content
When you first install Launch, several default homepage sections are already enabled: the Header and Footer, as well as Announcement bar, Slideshow, Newsletter, Social feeds, and other dynamic sections. Each of these sections associates with an “empty state” placeholder content in the preview to give you an idea of the formatting of each section.
Clicking on any of these "section" blocks will bring up a sets of configuration settings, and you can click Add section, to choose from other optional sections to add to your homepage.
Fixed sections are components that are fixed to certain areas of your site that cannot be moved. In Launch, there are five fixed sections: the Announcement Bar, Header, Footer, Slideshow, Newsletter, and Social feeds.
The Announcement bar can showcase new promotions, offers, or recent 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.
The Announcement bar settings control whether the feature is enabled or disabled through 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.
The Announcement bar has two text fields. The first is a standard Text field that you use the input the text you'd like to appear in your Announcement bar. The second field, called the Text (mobile), is optional and allows you to enter alternate text that will only appear to customers visiting your store on mobile devices. Use this field to craft shorter text content that is more suitable to the smaller screens of mobile devices.
Add an optional Link, then customize both the Background and Text colors of the Announcement bar to contrast or match the branding of your store.
The Header is the rectangular area that runs across the top of the store featuring a logo, navigation, currency converter, and cart icon. It appears on every page so that customers have a constant navigation feature, and can 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 feature in your header navigation from the Select menu button. If you want to edit the links in the chosen menu, 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 (also referred to as a 'sticky header'). Note that this is only for desktop layouts, the header will not be sticky for mobile screens.
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 400px by 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.
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. This is because there are no theme-specific navigation settings –everything is handled from your Shopify admin (Online store > Navigation).
For some more guidance in setting up your navigation, check out this article: How to set up your store's 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, or contact information.
Background style (Dark or Default) can be configured through the dropdown at the top.
There is an option to Show borders, and also a setting to Enable payment icons – you can enable and manage which logos appear through the Payments section of Settings.
If you want to show your logo in your store's footer (top, left corner), enable the Show logo in footer option. Then upload your Logo image (400px by 200px PNG file) as well as an Inverted logo image.
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!
See how Launch can provide the space to display items like these in the image below:
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.
If 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).
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 this is not enabled, customers can still scroll through slides manually using the lateral arrows on the left and right sides of the slideshow.
Launch supports up to six slides at a time.
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.
First upload the image you'd like to showcase in the slide block. Add some optional text content to accompany the image through each slide's Heading, Subheading, Button text, and Link URL.
In the fields above, you can specify the Text alignment (left, right, or center) and Text style (light or dark).
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 (no overlay)
- Gradient will use the Primary color and the Secondary color (set under Theme settings > Colors) 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
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.
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 to feature it in your store.
Next, you can customize your newsletter section by choosing the Background style (Light, Color, Gradient, or Default) and by adding a Heading and Subheading,
Note: the Background style colors draw from selections configured in the Colors portion of the Theme settings.
To display your latest Instagram and Twitter activity on your homepage, open the Social feeds section .
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.
The Instagram feed has encountered issues in older versions due to changes in the platform's API. If you have entered your token but the images are not displaying, check the theme's Release notes to check if this has been repaired since your version. If so, update to the latest version to remedy this issue.
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, or Default). You can change the colors associated with each in under Theme settings > Colors.
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.
When you open the theme editor for the first time, notice how your theme has several dynamic sections enabled already. These are merely suggestions for how you might structure your homepage. If one doesn't fit your vision, delete it by opening the section, then select the Remove section button at the bottom. To add more sections, select Add section.
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, use Shopify’s excerpt function. This is located 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, some create multiple to better categorize information including customer stories, tips, tutorials, FAQs and more.
Once you've chosen your Blog, you can configure the Background style. There are four options: Default, Light, Color, or Gradient. You can change the colors associated with each in under Theme settings > Color.
Next, you'll select the Number of posts to show from the dropdown menu. You can display between two and four of your most recent posts in this homepage section.
Finally, you can enter an optional Heading and Subheading for your section in the bottom fields.
Collection list is 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 Subheading fields. You can also choose whether or not to display a product count below each collection by checking the Show product count box.
Select the collection(s) you want to display by clicking Select 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 Collection list section.
The Featured collection section draws 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 Rows and Products per row from the corresponding sliders.
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.
The Featured product draws 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 Theme settings. That Featured product is used to select a product for Product goal tracking and the Technical specifications feature on the selected Product 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.
Click Select product to choose which product to feature. The product images, options and an Add-to-cart (ATC) 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.
Some options to consider:
- Enable image zoom
- Enable dynamic checkout button - this additional button adds the item to the cart and immediately brings the customer to the checkout
- Enable cart redirection - this automatically sends customers to the cart page after clicking the ATC button
- Show share buttons - configures display of social sharing buttons
The Product focus section designed to display the core highlights of a special 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.
Select Show product image if you'd like to feature a visual of the product in the center of the section. Without an image, you can still use icons and text to highlight features about your product.
Next assign a 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 Theme settings > Colors.
Then, add an optional Heading and Subheading to the section.
You can add up to four blocks to your Product focus section, each with its own Heading, Text, and Icon. Simply enter a Heading at 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. Click on any icon to get its text name, then copy this name into the Icon name field to draw the icon into the section. Repeat for up to four sections.
The Product goal section displays the progress of a campaign, tracking your product sales in real-time. When you enable this section (under Theme settings > Product goal) 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 apart from your homepage. In order to add the homepage section, the theme settings for the Featured product must be configured.
Start by assigning a product to your Featured product under the Theme settings, using the Select product button. You can ignore the other options for now—these are for the Product page, which will be covered in Launch's products and collections.
Featured goal (I)
With your Featured product set, navigate to Theme 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 set.
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).
Featured goal (II)
With your Featured product set and your Product goal options configured, the main components are in place. If your homepage section for the Product goal doesn't appear automatically, go back to your Sections tab, click Add section, then locate and add Product goal.
Image with text
The Image with text section is incredibly versatile, allowing you to highlight all sorts of content, such as products or promotions.
The Image with text settings are relatively minimal. Choose your Background style (Default, Light, Color or Gradient).
Add a Heading, Subheading, Image, as well as a customizable Button with Link.
Launch comes with an eye-catching Mapsection 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 and Hours & Location.
You can also configure your 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 selectors.
Note: that these do not control particular components of the map (streets, water, etc.) but rather the swatches are linked to in the Colors settings
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 an Overlay position 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
Images with text sections are versatile features to showcase a variety of content.
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 (heading and subheading will be centered).
Click any Image block to expand the settings. Upload the Image you want to use (we recommend an 800px by 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.
Use caution if a table is added to the Page(s) chosen to show on the Homepage, be sure to preview on mobile. Tables are often troublesome when displayed on mobile. A common solution for this issue is to create an image of the table, then replace the table with this image – as images are responsive across all devices.
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 the Testimonials section for the homepage.
Start by selecting a Background style from the dropdown menu (Light or Default) and adding an optional Heading and Subheading for your section.
Click on any Testimonial block to begin. Add the testimonial you want to feature in the Quote field, then put the attribution in the Source field. Input a City, then upload an Avatar – the image or icon to represent your source.
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.
Start by selecting a Background style from the dropdown menu (Default or Light) and selecting the number of Columns per row you want to display from the corresponding slider. Then add a Heading and Subheading to your section.
Click on any Column block to begin. Add the Heading and Text for your first column, as well as the Button text and Link for the call-to-action.
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.
Add a Heading and Subheading. These accompany your video in a layout configured through the section's settings.
This feature supports YouTube and Vimeo videos only. Simply paste in the video's URL to assign it to this section.
You can also choose to enable Autoplay for the video. If enabled, this means the video with automatically begin playing when a customer visits your store. If you'd like customer to have control over the video, leave this option disabled.
Note that some of these controls may yield to the preferences and configurations of the customers' browser or device type.
You can also specify the the video's Aspect ratio. Choosing either 16:9 or 21:9 will make the video remain proportionally accurate across different devices and browsers.
Next, you can add an Overlay to the video. The 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 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 - Enables/disables the Overlay
- 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 the section. 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 the Text columns with icons section, Alternating content is great for explaining processes or highlighting features. Alternating content sections support images, video, and text, and you can include up to three blocks on your homepage. The features will alternate between having the text on the left and the image on the right.
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.
Finally, upload an Image or YouTube/Vimeo link and Video thumbnail – 1020px by 700px PNG image is recommended. Repeat for up to three pieces of alternating content.
Next article: Launch's products and collections