Startup's products and collections


Your products and collection pages are the lifeblood of your ecommerce store–displaying your products, conveying their value, and making the sale.

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. 

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, description, price, and add-to-cart (ATC) 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

Center product title and price over content by selecting that option (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 a detailed look at your product.

Here you can also configure the settings to Show names of vendors and/or 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).

Clicking the  Show dynamic checkout button will add a secondary button below the ATC that will take you right to the Checkout process. 

If you'd prefer your product ordered in a vertical sequence when no variants are present, select  Use single column layout if no variants.

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.

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 markRulerShirtPencil, 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

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, navigate to that product in the Products admin and select the product.slideshow template from the dropdown found in the bottom-right. 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 in the right-side preview. 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 page 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.

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. 

startup-slideshow-layouts

You can choose between having your slides  Slide horizontally or Fade in and out under Transition, then select how long you want each to display for by selecting a time period under Change slides every.  You can also check Use thumbnails for pagination if you want to to show small previews of the other product images. If this option is disabled, a line of small circles will be visible representing the slides position in the sequence.

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 pages under 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, when 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. They are found under Organization on the right side of each product editing screen.

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

Collection list page

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's right-side preview,  then click Collection list under the Sections tab.

SETTINGS

Here you can configure the settings to Show collection descriptions with your collections.


Back to top ↑

Next article:

Startup's blog and article pages