Launch's 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 mark, Ruler, Shirt, 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 products. Related 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 (Light, Color, Gradient, 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: 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!

CONTENT

You can add up to four blocks to your Product focus section, each with its own Heading, Text, 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: Light, Color, Gradient, 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 specificationssection, each with its own Heading, Text, 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-indicator

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