Startup'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 page

startup-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 Startup, 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, you can check  Center product title and price over content if you want to do that (otherwise they will appear to the right of the product image).

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.

You can also  Show names of vendors and Disable sold out variants (meaning that if there are variants—colors, sizes, etc.—of the product that have sold out, they will not appear as options on your product pages).

Use the  Variants style dropdown to choose how you would like to display your variant options (dropdowns or buttons).

Click the  Enable cart redirection option if you want to send users to the cart page after adding a product (as opposed to staying on the product page).

Clicking Use single column layout if no variants will mean that if a product has no variants, the page will display in a single, mobile-like column. Like this:

single-column-product-page

RELATED PRODUCTS

Checking Show related products will allow customers to discover other items that are similar to the one they are currently viewing. Related products are automatically pulled from the same collection as the product in view.

related-products

CONTENT

Additional info links can appear wherever a customer can view product information. They’re perfect for linking to size charts, refund policies, or ordering details. Startup lets you pick up to six unique icons (Information (i), Question mark, Ruler, Shirt, Pencil, and Envelope) to display on your product pages. You can accompany each icon with Text, linked either to a URL or page elsewhere on your site.

Product slideshow

product-slideshow-page

Startup lets you switch out the default product page template for one that displays the your product images in a slideshow, with the same extensive layouts and customization as your front page slideshow.

To enable a product slideshow on a specific product page, select theproduct.slideshow template found at the bottom of any product page in your Shopify admin. Upload the images you want to use the same as you would for a regular product page.

Then, open your theme editor and navigate to that product page. You should already see that the layout is different. You should also see that in the  Sections tab, a Slideshow section block has appeared (above the regular Product section block). Click to open its settings.

SETTINGS

If you run into a situation where the navigation links clash with your slideshow images, you can change their color at the top of the section settings. Simply change the  Navigation/pagination color to something more complementary.

You'll need to choose a layout for your slideshow from the Layout dropdown menu. Startup offers four layout options: Content width; Full-width; Full-width, full-bleed; Full-width/height, full-bleed. You'll see the differences in your preview, but here's a visual for quick reference:

startup-slideshow-layouts

You can choose between having your slides Slide horizontally or Fade in and out under Transition, and select how long you want each to display for by selecting a time period under Change slides every. If you select "Don't automatically change slides," users will still be able to scroll through them manually using left and right arrows at the edge of the slideshow. You can also check Use thumbnails for pagination if you want to make that an option (the alternative is small circles representing each slide).

Collection pages

startup-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). In Startup, you can customize your collection pages by navigating to a collection in the theme editor and clicking on Collection pagesunder the Sections tab.

SETTINGS

Checking  Show collection image will pull the collection image you have set in the Products>Collections area of your Shopify admin onto your collection pages. It will display at the top of the page, behind the collection name and description (if enabled).

Likewise, checking  Show description will pull a collection description onto your collection pages. This can be set on the page for each collection under Products>Collections in the Shopify admin.

The Enable tag filtering option allows visitors to sort products by custom tags, which can be added to product pages in your Shopify admin. You'll find them under Organization on the right side of each product editing screen.

You can also specify the  Number of products per row and the Number of rows that display on your collection pages using the dropdown menus.

Collection list page

startup-collection-list

The collection list page displays an index of your store's collections. To access the settings for this page, navigate to your catalog or collections page in the theme editor and then click  Collection list page under the Sections tab.

SETTINGS

The settings for this page could not be any simpler: do you want to  Show collection descriptions? Then check the box besides Show collection descriptions. Don't want to show 'em? Don't check it. We told you it was simple.