Launch Theme Manual

The slideshow features two layout options to choose from: full width and full window, which will expand the slideshow into the navigation area.Our documentation is for the latest version of the theme. If you need help with an older version of the theme, please send us a support request (found to the right). Below, you’ll find instructions for all theme settings and features, roughly in the same order as the sections in your theme editor panel.

launch-fresh-demo

Table of Contents

Getting started

New to Shopify?

If you’re setting up a Shopify store for the first time, we recommend taking a gander at the Shopify help center for a full overview of the platform.

In our article Getting Started: Shopify Basics, we cover the essentials for getting your store up and running, including adding products, setting up collections, and creating a blog. Once you’ve got these things set up, you’ll be in a good position to start customizing your theme.

Upload your new theme

If you purchased the theme directly from Shopify, your theme will be automatically installed when you log into your Shopify admin.

If you purchased your theme from pixelunion.net, you’ll receive your theme as a .zip file named something like launch.v2.0.0.zip.

Once you’ve downloaded the theme file, go to your Shopify admin dashboard and navigate to Online Store > Themes. Then click Upload theme in the top-right corner. Select your theme file from your computer and click Upload.

theme-upload-screen

Your new theme will show up below your current theme. At this point, it is installed, but not published. When you’re ready to unveil your new look to the world, click Publish theme.

The theme editor

Once you’ve uploaded your theme, it’s time to make it your own. While all of your products, collections, pages, and navigation will be configured in the Shopify admin, any changes you make to the look and feel of your store will happen in the theme editor. You’ll access it by navigating to Online Store>Themes and then clicking the blue Customize theme button in the top right of your screen.

theme-upload-screen

You’ll see that the theme editor is divided into two tabs: Sections and General settings. We’ll cover each in detail below, but here’s the Coles Notes.

Sections tab

The Sections tab contains all of the sections that are available to you in Launch. Essentially, sections are the building blocks of your store, allowing you to assemble pages from customizable, re-orderable components. You can add, remove, and reorder sections, as well as access the customization features for each from the Sections tab.

General settings tab

The General settings tab lets you make global changes to the look of your store, including typography, text and background colors, as well as links to your social media accounts.

general-settingsPro tips

Most of the time you spend in the theme editor will be on either the Sections or General settings pages. There are, however, a few lesser-known areas and shortcuts that can be super helpful as you’re building your store. Here’s what you need to know:

theme-dropdown-menu

The dropdown menu attached to your theme name contains a bunch of handy links. First up, Documentation. That’s what you’re looking at now, and it’s only ever a click away if you need a little bit of guidance setting up your menus or slideshow.

Next, Support. If you can’t find a fix in the documentation, you can always email our world-class support team. They’ll get back to you by the next business day.

If you’re fluent in Liquid (Shopify’s templating language) you can kick your customizations up a notch by digging into the theme’s code under Edit code. If not, our support team will be more than happy to put you in touch with someone who is.

Finally, Edit languages lets you both change the language of your theme and checkout as well as customize the wording that is used throughout your store.

At the opposite end of the theme editor, you’ll find a little button with a screen and an arrow on it. It lets you toggle between previewing what your site will look like on desktop (Fit to screen) and on mobile (Small screen). It looks like this:

desktop-mobile-icon

Finally, if you want to collapse the theme editor controls and preview your store in full-screen, all you need to do is click the tiny left-pointing arrow in the middle of the panel. Easy!

Theme Styles

Launch comes packaged with three theme styles that curate your store’s colors, fonts, and styles for you. Check out our store demos to see the Bold, Fresh, and Cool presets.

To select the theme style you would like to use in your store, click  over to the General settings tab, then scroll all the way to the bottom to the Change theme style button. Here, you can preview the theme styles and select the one that’s right for your store.

launch-theme-styles

Note that applying and saving a new theme style will overwrite your current style settings, however you will not lose any content from your store. It’s always a good idea to make a backup copy of your theme before you start making customizations. Use the duplicate copy as your working version until you’re ready to publish it.

Sections, explained

Sections is a Shopify feature that effectively allows merchants to assemble pages from customizable components (or sections!). This means tons of flexibility, especially on the homepage, where you can add, remove and reorder sections with just a few clicks. Examples of sections include featured products, slideshows, collection listings, or videos. You’ll access the customization options for all of them from the Sections tab in the theme editor.

The content on your homepage is made up of dynamic sections, meaning you can add and arrange as many as you want. A few notable exceptions in Launch are the Header and Footer, SlideshowNewsletter, and Social feeds which are fixed to various points on the homepage and cannot be repositioned—these are called fixed sections. (You can, however, still customize their content.)

Some other page types also make use of fixed sections (with Launch, the Product page comes with optional Product focus and Technical specifications sections). To see if the page you’re building has sections, open the theme editor and then navigate to the page you’re working on within it. (For example, if you click through to your product catalog in the theme editor, you’ll see that a section pops up for Collection page, giving you access to settings specific to that section.)

Setting up your homepage

When you first install Launch, you’ll notice that several default homepage sections are already visible: the Header and Footer, as well as SlideshowNewsletter, 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.

placeholder-content

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 HeaderFooter, SlideshowNewsletter, and Social feeds. Here’s what they do and how to set them up in your store:

Header

launch-header

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.

SETTINGS

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:

mobile-nav

LOGO

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 an 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.

Footer

launch-footer

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.

SETTINGS

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.)

LOGO

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).

CONTENT

With Launch, you can add three optional types of content to your footer: MenusSocial 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!

 

Slideshow

launch-slideshow

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 be clear, with Launch, your slideshow doesn’t have to go at the top of your page, it’s just a popular choice!). 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.

SETTINGS

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.

slideshow-layouts

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.)

CONTENT

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 HeadingSubheadingButton 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.

Newsletter

newsletter-signup

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: LightColorGradient, 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.

Social feeds

launch-widgets

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.

CONTENT

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 (LightColorGradient, 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.

Blog posts

blog-posts

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.

SETTINGS

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 Heading and Subheading for your section in the bottom fields. Something like “Latest News” or “Our Blog” should do nicely!

Collection list

collection-list

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.

SETTINGS

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.

CONTENT

Here, you’ll select the collection(s) you want to display by clicking Add 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).

Featured collection

featured-collection

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.

SETTINGS

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

product-focus

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.

SETTINGS

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: LightColorGradient, 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!

CONTENT

You can add up to four blocks to your Product focus section, each with a title, 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. 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.

Product goal

product-goal

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).

FEATURED PRODUCT

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.

FEATURED GOAL

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 (LightColorGradient, 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:

product-page-countdown

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

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!

CONTENT

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).

CONTENT

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.

Testimonials

testimonial-section

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.

SETTINGS

Start by selecting a Background style from the dropdown menu (Light or Default) and adding a Heading and Subheading to your section (“Testimonials” is a good bet, but you can use anything you’d like!).

CONTENT

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

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.

SETTINGS

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 Subheading to your section (we’ve used “How it works” but you can use anything that works with your content).

CONTENT

Click on a Column block to begin. Add the Heading and Text for 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.

Alternating content

alternating-content

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.

CONTENT

Click on ImageVideo, or Add content to open up the options for a content block.

The first step is to choose a Background style (LightColor, 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

full-width-media

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.

SETTINGS

The first step is to choose a Background style (LightColor, 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.

Products and collections

Your products and collection pages are the lifeblood of your ecommerce store. They’re where you display your products, convey their value, and, if you’re lucky, make the sale.

You’ll upload and configure your products and collections in the Shopify admin (you can read more about that here), but when it comes to customizing how they display, you’ll do that within the theme editor. Just navigate to the page in the theme editor and you’ll see a section pop up, giving you access to settings specific to that page. We’ll give you the rundown on the settings for each page below.

Product pages

product-page

The product page is where you highlight the features and benefits of your individual products. At minimum, it should contain the product title, images, a description, the price, and an add-to-cart button. With Launch, you can customize your product pages by navigating to a product page in the theme editor and clicking on Product pages under the Sections tab.

SETTINGS

Off the top, clicking Enable image zoom will mean that when a user hovers over a product image, a magnifying glass icon will appear and they will be able to click to get an up-close look at your product.

Clicking Enable card redirection will mean that a user will be automatically directed to the Cart page after adding a product to their cart (as opposed to staying on the current page).

Clicking Show share buttons will do… exactly that!

ADDITIONAL INFO links

You can add links to additional info on your product pages by populating the fields in this area. Additional info links are perfect for size charts, refund policies, or ordering details. Launch includes six unique icons (Information (i)Question markRulerShirt, Pencil, and Envelope) and lets you pick up to two to display on your product pages. You can accompany each icon with Text, linked either to a URL or page elsewhere on your site.

Related products

When you navigate to a product page, you’ll notice that besides the Product pages section, there’s also one labelled Related productsRelated products allow customers to discover other items that are similar to the one they are currently viewing. In Launch, it looks like this:

related-products

Related products are automatically pulled from the same collection as the product in view.

SETTINGS

Click Enable to show related products on your product page, then select a Background style for this section from the dropdown at the bottom (LightColorGradient, or Default).

If you want to display a Stock level indicator on the products in this area, you can do that by checking Show indicator and then entering a number in the Display when stock is lower than box. (You’ll see what that looks like on the right hand side of the example above).

Product focus

If you’re reading this documentation start-to-finish (ha ha) then you already know what a Product focus section is and how to add one to your homepage. But for those of you just joining us, a Product focus section allows you to display the core highlights of your product using an image and up to four text sections with icons. It looks like this, and in addition to your homepage, you can also add them to the product page of your Featured product.

product-focus

What’s a Featured product, you ask? Well, in this context, it’s the product that you set to use in the Focus product section of your product page. If you want to utilize the Product goal section (see below) it will do double-duty for that as well. You’ll set your product under General settings>Featured product. Here:

featured-product-settingsStart by selecting the Product you want to use from the dropdown menu at the top. (If you’ve already set up a Product goal, you may have already done this.)

Next, select the order in which you would like the Featured products sections to appear on the product page. If you’re wondering what Technical specifications are, scroll down to the and you’ll find out!

Now that you’ve set your Featured product and determined the layout, when you navigate to the product page for that product with the Sections tab open, you should see a section for Product focus. Click on it and we’ll walk you through the settings.

SETTINGS

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: LightColorGradient, 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!

CONTENT

You can add up to four blocks to your Product focus section, each with its own HeadingText, and an Icon. Click the link in the theme editor (or here) to view the list of available icons. 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.

Technical specifications

technical-specificationsThe technical specifications feature displays all the fine-grained details about your product in an accessible, visually-appealing way. The first step of getting this set up is identical to Product focus, so if you want to scroll up and give that a read, well, that would save us from typing it all out again! Come back once you’ve set a featured product and have opened the Technical settings section settings on your featured product’s product page.

SETTINGS

Start by selecting a Background style for your Technical specifications section. There are four options: LightColorGradient, and Default. You can change the colors associated with each under General settings>Colors in the theme editor.

Next, choose how you want your product image to align from the Align image dropdown (you’ll upload this below).

CONTENT

Give your section a Heading and Subheading (if you want). Then, upload a Product image (we recommend a 960px wide .png file).

DOWNLOAD SECTION

This is an optional section that you may want to use if you want to give your customers the option of being able to download even more detailed information about your product. If you have a highly detailed or technical image of your product, upload it to the Download specification image section, then add the Button text (“Download” is a safe bet!) and Subheading that will display below that button.

CONTENT

You can add up to four “specifications” to your Technical specifications section, each with its own HeadingText, and an Icon. Click the link in the theme editor (or here) to view the list of available icons. 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 you’re done! Nice work.

Product goal

product-goal-on-product-page

If you’re paying close attention, you may have noticed that we already covered the Product goal section under Building your homepage. And if you’ve already set up a Product goal section on your homepage, you’ve already set it up on your product page by proxy. If this is all news to you though, read on and we’ll explain everything.

The Product Goal section displays the progress of a campaign, tracking your product sales in real-time. When you enable this section (first under General settings>Product goal, then under the Product goal section in your Featured Product’s product page) 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.

FEATURED PRODUCT

Here’s the funny thing about adding a Product goal section to your product page: you don’t actually set it up in the Product goal section on your product page like you might think. In fact, if you haven’t already enabled it, you won’t even see a Product goal section available on your product page at all.

The first thing you’ll need to do is set 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—these have to do with the Product focus section, which you can learn more about above if you want.

FEATURED GOAL

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 take the form of a link to your product from the homepage, and 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. 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 will look:

product-page-countdown

And that’s it! You’re done. Happy pre-selling!

Collection pages

collection-page

A collection page displays all of the products in a given collection. You can configure your collections from within your Shopify admin (more information here). With Launch, you can customize your collection pages by navigating to a collection in the theme editor and clicking on Collection page under the Sections tab.

SETTINGS

Launch offers three distinct templates that can be applied to a collection to change the layout. To change the template, leave the theme editor and navigate to a Collection in your Shopify admin. On the right-hand side, you’ll find a box labelled Theme templates and a dropdown to change your Collection template from the default collection to collection.alternating or collection.random. Here’s how they look:

The default collection template:

default-collection-template

The collection.alternating template:

screen-shot-2016-12-22-at-12-36-38-pm

The collection.random template:

collection-alternating-template

Back in the theme editor, you can customize the layout of your collections by adjusting the Products per page option in the Collection page section settings.

You can also opt to include a Stock level indicator over products that are below a certain threshold. It looks like this:

stock-level-indicatorJust check Show indicator and enter a number in the Show when stock is lower than field.

Blogs

Your Shopify store comes with a powerful built-in blogging engine. Blogs are great for content that you’ll be updating regularly. While many stores maintain only one blog (probably called “News” or “Journal”) some create multiple to better categorize information including customer stories, tips, tutorials, FAQs and more.

You can set up one (or multiple) blogs in your Shopify admin (Online store>Blog posts). For more information on getting your blog(s) up and running, see their instructions. There are no blog settings within Launch’s theme editor.

Static pages

Shopify stores come with a page creation tool, which you can use to generate pages containing information that rarely changes, and that customers will use often, such as an About page or a Contact page. You can add as many pages as you like to your store under Online store>Pages, and configure where they appear under Online store>Menus. Some of these pages come with additional customization options in the form of sections, which will appear under Sections when you navigate to them in your store.

There are also a few pages like the Cart page that are generated and populated automatically, but which you can customize by navigating to them in the theme editor and finding their section settings. We’ll cover the settings for these below.

Create a new page

From your Shopify admin, navigate to Online store>Pages. Click the Add page button to open a new page template.

new-page-screen

From here, you can enter the Title and Content in the space provided, as well as set the Visibility and select a Page template. You’ll notice that Launch comes with four templates: a general page template, a page.contact template, a page.faq template and an page.faq template. We’ll cover the unique features of each in the following sections.

About page

about-page

Online shoppers these days aren’t just interested in what they’re buying—they’re also interested in who they’re buying it from. That’s exactly what your about page is for: connecting with your customers, building trust, and establishing your brand.

To create an about page you will first need to create a new page. Scroll to the bottom right of the screen and select page.about from the Template dropdown menu. The unique thing about this page template is that it allows you to include the images, names, and job titles of up to six team members if you wish. It looks like this:

team-members

Once you’ve added your Title and Content to your page, click Save, and navigate back to the theme editor. With the Sections tab open, click on the page you just created in the preview screen, and you will see a new section option open on the left side of the editor: Team members. Note that this is a static section (it’s “stuck” between your page content and newsletter section) and cannot be moved.

SETTINGS

Start by selecting a Background style for your Team members section. Then, select the number of Team members per row you want to display (2, 3, or 4) and add a Heading and Subheading (optional).

CONTENT

Click Add team member to begin. Here, you’ll upload an Image (we recommend 630 x 630px .png file) and input the Name and Job title of each team member. Repeat for up to six team members, and you’re done!

Contact page

Adding a contact page to your store is a quick and easy way of engaging your customers. To create a contact page you will first need to create a new page. Scroll to the bottom right of the screen and select page.contact from the Template dropdown menu. This will create a simple form on the page that will look something like this:

contact-form

Contact form

In the theme editor, navigate to the page you just created and click the Contact form block that appears under Sections. Here, you can select a Background style (LightColorGradient, and Default).

Map

Launch also gives you the option of including a Google map on your contact page, which can be useful if you have a brick-and-mortar location, or just want to include a good-looking map in your page. It looks like this and will appear directly below your contact form:

contact-page-map

To get it up and running, just navigate to your Contact page in the theme editor and click on the Maps block that pops up under Sections.

Begin by checking the Enable box at the top. Then enter your Location Title. This will appear in the popover above your location on the map (ours is set to “PIXEL UNION” in the example above).

Next, enter your Address and API key. You’ll need to click the link to generate your API key, but it’s super easy. Just click the blue Get a key button, choose Create a new project and then Create and enable API. Then all you have to do is copy the key that generates and paste it into the theme editor. Bada bing, bada boom, you’ve got a map!

FAQ page

faq-page

Launch comes with a nifty FAQ page template that uniquely styles your page in a visually-appealing Q&A format.

Start by creating a new page in your Shopify admin and calling it FAQ (or whatever you want). Select the page.faq from the Templates dropdown, then click Save. Before you leave your admin, be sure to add it to the navigation menu where you’d like it to appear.

Next, open the theme editor and navigate to the FAQ page. If you have your Sections tab open, you’ll notice an FAQ section block appear. Click on it.

SETTINGS

You can set the Background style of your FAQ page in the same way you can many other sections in Launch. 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.

CONTENT

We’ve pre-populated the first three blocks with question and answers that are commonly included on store FAQ pages. You can use these, edit them, delete them, or create your own by clicking Add FAQ. There is no limit to the number of questions or answers you can add to this page template.

Cart page

cart-page

The Cart page is the first page customers see when they begin the checkout process. It shows a summary of the items and quantities they have added to their cart, and a total of how much it will cost them. With Launch, users can also add order notes the seller on this page. If you’re trying to customize the Checkout process, you’ll access those settings from the General settings tab.

SETTINGS

Enabling Order notes will create a text box at the bottom of the cart page where customers can add special instructions to their order.

SHIPPING CALCULATOR

Launch also gives you the option to include a shipping calculator on your cart page—a tool that automatically fetches shipping rates on the cart page of your store, letting customers calculate their fees before completing checkout. Click Enable to activate it, then enter a Default country in the box below. Note that if a customer is logged in to their account, their default country will be selected.

General settings

The General settings tab (located to the right of the Sections tab) lets you make global changes to the look and feel of your store, including typography, text and background color, as well as links to your social media accounts. Here’s the nitty-gritty on everything you’ll find there.

Colors

Virtually every color in Launch is customizable, with clear self-explanatory names in the settings. Click on a swatch to edit the colors. A popup with a color selector will appear, which allows you to adjust and experiment with custom colors.

color-picker

The checkered box on the left signifies “transparent,” while the box to the left represents the color you’ve selected. You can also enter a specific color hex code in the bottom right corner if you wish.

Typography

Launch comes with dozens of hand-picked fonts for your store. Custom fonts can be set for your store’s Body textStore titleHeadings, and Button text using the corresponding dropdown menu.

To add (or remove) emphasis to/from certain sections of text, use the Weight dropdown to set the text to Bold or Light.

Featured product

The Featured product is the product that will be used for both the Product focus and Product goal sections. You must set it here before you can add either of these sections to either your homepage or your product pages.

featured-product-settings

Select the product you want to feature from the Product dropdown at the top.

The dropdown menus at the bottom pertain only to setting up the layout of your featured product sections on its product page. You can opt to use one or none or both of these features. The Product focus feature allows you to display the core highlights of your product using an image and up to four text sections with icons, while the Technical specifications feature displays all the fine-grained details about your product in an accessible, visually-appealing way. For more information, see the Product page documentation.

Product goal

The Product Goal section displays the progress of a campaign, tracking your product sales in real-time. When you Enable this section, 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. Here’s a taste of what it looks like on the homepage:

product-goal

Pro tip: You should set your Featured product before you set your Product goal. Otherwise, none of this is going to show in your store!

Once that’s done, you can navigate back to General settings>Product goal and check the Enable box at the top. Then select your Background style (LightColorGradient, 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:

product-page-countdown

And that’s it! You’ve successfully configured your Product goal. Look at you go!

Social media

ACCOUNTS

Launch supports social icons for Facebook, Twitter, Google+, Pinterest, Instagram, Vimeo, and YouTube. Simply enter in your account URL in the relevant Account field and the social icons will automatically appear in your sidebar. You can also enable your blog’s RSS feed here.

The links to your accounts will display in your footer, but only if you’ve added a Social media links block to your footer content under the Footer section settings.

Currency

Shopify works in virtually every country and every currency. With Launch, you can cater to international customers with a currency converter that displays as a dropdown menu in the header of your store. This allows customers to dynamically update their prices throughout your shop.

currency-converter

After enabling the converter by checking Enable currency conversion, you can choose which currencies are supported and how they’re displayed.

Under Format, you can choose whether or not to display the currency acronym on product and collection pages (e.g. $10.00 CAD vs. $10.00).

Under Supported currencies, you can select which currencies you want to allow users to display when browsing your store. Be sure to use the country’s ISO currency code, and separate each with a space. Note that exchange rates used by Shopify are refreshed twice a day based on rates at XE.com.

You’ll also set the Default currency on this page. This is the currency that will display when a user first lands on your site, i.e. before they have had a chance to use the currency customizer. This is different from your store’s Operating currency, which is the currency you use to process orders. You can set your operating currency in the Shopify admin under Settings>General>Standards and formats.

Favicon

A favicon (also known as a  website icon, tab icon, or bookmark icon) is a small icon that represents your website and provides a shortcut to it wherever the icon appears. There are a whole bunch of sites that can help you generate a favicon for your store, or you can create your own.

Once you have an image you want to use, upload it under the Favicon setting of the theme editor. You can also select an image from your media library.

Checkout

Under the Checkout section of the theme editor, you can add custom banner images, logos, and backgrounds, as well as customize the fonts and colors used throughout the checkout process.

BANNER

The banner is the top section of the checkout screen where your store name appears. By default, it is transparent (or whatever color your store’s background is) however you can customize it by uploading a custom Background image. We recommend uploading an 1000 x 400px image.

LOGO

If you want to add your store’s logo to the checkout page, simply upload a Custom image. You can use your storefront logo or you can upload a different one instead. You can also define the Position and Logo size by making a selection from the bottom two menus.

MAIN CONTENT AREA

The main content area is the left side of the checkout screen where a user inputs their email and shipping address. If you’d like to use a custom background here, upload an image or use the color picker to select a background color. You also have two options for the color of the Form fields—white or transparent.

ORDER SUMMARY

The order summary is the right side of the checkout screen where customers can review the details of their order. You can either upload an image or use the color picker to select a background color.

TYPOGRAPHY

You can customize both the Headings and Body font of the checkout screen by selecting fonts from the appropriate dropdown menu.

COLORS

You can customize the colors that appear on the checkout page under Colors. You can see which areas correspond to each section (AccentsButtons, and Errors) by watching how changes are processed in the preview screen.

You can customize more of the checkout settings from the Shopify admin.

Tabs

You can add tabs to any RTE (rich text editor) area in Launch. This includes:

  • Product descriptions
  • Collection descriptions
  • Custom pages
  • Blog posts

Find an RTE field in the admin area and press the “Show HTML” button. Paste in the following example and replace the text content (“Label X” and “Content for Label X”) with your own. The top set of elements are the tabs themselves, and the second set of elements are the content that corresponds to each tab.

Code Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ulclass="tabs">
<liclass="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<ulclass="tabs-content">
<liclass="active">
<p>Tab 1 content goes here.</p>
</li>
<li">
<p>Tab 2 content goes here.</p>
<li>
<p>Tab 3 content goes here.</p>
</li>
</li>
</ul>

World-class customer support

We’ve covered a lot of ground in these docs, but there will no doubt be questions they don’t answer. If you’ve got a burning question—or if you’re just stuck—don’t hesitate to get in touch with us. Our friendly and knowledgable support team will dig into the issue and get you back on track ASAP.