Launch's products and collections

Product pages

Collection pages


Your product and collection pages are the main features that showcase and organize the products offered in your store.

Upload and configure your products and collections in the Shopify admin (you can read more about that  here). Customizing how they display is all controlled within the theme editor. Navigate to the page in the theme editor and you'll see a section pop up in the left-side settings, giving you access to settings specific to that page. 

Product pages

Product page with image, price, title, variants...

The Product page is where you highlight the features and benefits of your individual products. At minimum, it should contain the product title, images, description, price, and an add-to-cart (ATC) button. With Launch, you can customize your product pages by navigating to any product page in the theme editor, then clicking on Product pages under the Sections tab. Another way to access these settings is to select Product page from the page selector dropdown.

Settings

Enable image zoom: 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. This only applies to product images that are at minimum 1000px in width.

Enable dynamic checkout button: displays an additional ATC button that immediately brings customer to checkout with selected product to simplify purchase process.

Enable card redirection: customers will be automatically directed to the Cart page after adding a product to their cart, as opposed to staying on the current page.

Show share buttons: displays icon links to share the product page's URL to popular social media platforms.

You can add links to additional information sources on your product pages by populating the fields in this area. Additional info links are ideal for size charts, refund policies, or order details. Launch includes six unique icons (InformationQuestion markRulerShirtPencil, 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 local or external URL.

When you navigate to a product page in the theme editor, 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.

2 examples of related products with overlay showing

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. 

Product focus

As discussed in  Setting up your homepage with LaunchProduct focus showcases the core highlights of a particular product by presenting a product image paired with a set of up to four text and icon features. If you haven't yet assigned a product to this feature in the Theme settings, go to Customize > Theme settings > Featured product > Select product

Product focus selected in theme settings

To enable the Product focus section on your product page, navigate to Featured product in your Theme settings, then enable Product focus for either the first or second dropdown.

These settings also determine the order in which you would like the Featured product sections to appear on the product page. For instance, if Technical specifications is selected for the first dropdown, this will appear first on product page when the customer scrolls down.

Return to the product page for the product and a section for Product focus will be visible.

Settings

Select Show product image to display the main image for the product in the section's center. Without an image, you can still use icons and text to highlight features about your product.

Then choose the Background style. There are four options: LightColorGradient, and Default. You can change the colors associated with each under Theme settings > Colors.

Then, add optional  Heading and Subheading to the section.

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. Repeat for up to four sections.

Technical specifications

Technical specifications with image and detailsThe Technical specifications feature is used to show detailed elements of your product in an accessible, visually-appealing way. 

Enable this section on your product page by navigating to  Featured product in your Theme settings, then enable Technical specifications for the first or second dropdown.

To enter content for this section, return to the product's page in the theme editor

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 Theme  settings > Colors

Position the image to align with the content from the  Align image dropdown, then 

Content

Give your section a Heading and Subheading. Then, upload a Product image (960px-wide PNG file is ideal).

Download section

This is an optional section that allows customers 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, and Subheading that will display below that button.

Download button for Nest Cam in Cool Demo

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

Horizontal progress bar for Product goal feature

If you’ve already set up a  Product goal section on your homepage, it should automatically appear on your Featured product page.

Just like the homepage component, the product page's Product goal section displays the progress of a campaign, tracking your product sales in real-time. 

There are three components to the Product goal feature: section on your homepage, section on your product page, and banner at the top of every page (except homepage).

First set a  Featured product under the Theme 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.

With your  Featured product set, you can now navigate to Theme 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 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, 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 (displayed on every page except the homepage). 

Horizontal progress bar with Pre-order for ATC

Collection pages

Alternating collection template in Launch fresh demo

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.

Templates

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

Template selector in collection editor admin

Note that in order for these templates to be available in the Collections admin, the Launch theme must be the published theme in the store. 

Standard (collection template):

Standard collection template

Alternating (collection.alternating template):

Alternating collection template

Random (collection.random template):

Random collection template

Settings

Once a template has been selected, return to the theme editor to customize the layout of your collections by adjusting the Products per page option in the Collection page section settings.

There is an option here to control the Product information placement in relation to the image. The options are Overlay image and Below image.

You can also opt to include a Stock level indicator over products that are below a certain threshold. 

Product image on collection page with stock level badge

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



Back to top ↑

Next article: Launch's blog and article pages