Make an index page with images for your collections

Here's a custom page where you can add a grid of images that link to your Collection pages. 

Essentially, it's the same section on the homepage called Collection List except you can use it on a Shopify Page and also choose any image for the collection.

Example:

How to:

1

Create a section file

Open your Code Editor:

https://shopify.com/admin/themes/current

Under the Sections folder, choose Add a new section:

Call the new section:

page-collection-grid

Example:

Use the Create section button to complete.

Erase all the default code that generated:

Replace with all the code from one of these files:

Pipeline 5.0 and higher, use this code:
Click to view code

Pipeline 4.3, use this code:
Click to view code

Pipeline 4.0-4.2, use this code:
Click to view code

Pipeline 2-3, use this code:
Click to view code

Save the file.

2

Create a new template

In the templates folder, choose Create Add a new template:

(1) Change the first drop-down to page:

(2) Call the template:

collection-grid

Use the Create template button to complete.

Erase all the default code that's generated:

Replace all the code with this:

{% section 'page-collection-grid' %}

Example:

Save the file.

3

Assign the template to your Shopify Page

You're now ready to use the template on a page. Find the page you'd like to have the banner image on in the Page editor:

https://shopify.com/admin/pages

Change the page template type to page.collection-grid

On the left side, use the template drop-down and change from page to page.collection-grid:

Save the page settings.

4

Add a link in your navigation

Use the Navigation Editor:

https://shopify.com/admin/links

Create a link to your new page that's using the page.collection-grid template. 

This step is important as we'll need to open this page in the Theme Editor. Having a link in your navigation is the easiest method to customize the new page for the next step.

5

Use the Theme Editor to customize the collection grid

In the Theme Editor:

https://shopify.com/admin/themes/current/editor

Browse to your page and now you'll be able to customize the collection grid settings in the left sections area:

Start by adding a collection:

After choosing your collection (1), the collection's featured image will automatically be used as the grid image.

There is an option for an alternate image (2). You can choose any image you like here to represent your collection:

Use the six-dot icon to drag and drop the the section blocks for sorting the collections:

If you'd a clean look without buttons over the images, simply remove the Button text:

The entire image remains as the link to the associated collection. 

6

Optional: Modify the heading font

The heading used for this module can be customized. It's using the standard subtitle heading we use on the homepage sections. 

Sample code to increase the size:

/* -- code to modify h4 heading font size -- */
.template-page h4.home__subtitle { font-size:1.5em; }
/* - end - */

The value 1.5em can be adjusted, use small increments like 1.4em; or 1.6em;

Sample code to change to from uppercase to capital case:

/* -- code to modify h4 heading capital case -- */
.template-page h4.home__subtitle { text-transform: capitalize; }
/* - end - */

Sample code to change from uppercase to lowercase:

/* -- code to modify h4 heading lowercase -- */
.template-page h4.home__subtitle { text-transform: lowercase; }
/* - end - */

Sample code to remove the underline style for the subtitle:

/* -- code remove H4 heading underline -- */
.template-page h4.home__subtitle::after  { display:none;  }
.template-page h4.home__subtitle {
    margin-bottom: $gutter / 3;
}
/* - end - */

Sample code to change the subtitle underline color:

/* -- code to change H4 heading underline color -- */
.template-page h4.home__subtitle::after  { 
  background: #cc0000;
  opacity: 0.9;
}
/* - end - */

Use a standard hex color code for the value of color (#cc0000 is a red color):

http://www.colorhexa.com/web-safe-colors

Adjust the opacity to dim the effect. The default is 0.2 (very light). 

7

Optional: Adjust the image height for longer square-type style

Sample code for longer images, adjust the value of 500px to your preference:

/* -- code to make collection list images longer on page template -- */
@include at-query($min, $medium) {
.template-page .collection-grid-item {
    min-height: 500px;
  }
}
/* - end - */

Where to add the code for optional steps 6 and 7:

Open your Code Editor. 

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

Next, in the Code Editor find your theme's CSS file, this will vary depending on which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you know your version, find the right file in the left Assets folder:

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Quick link if the theme is live/published:
assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/style.scss.liquid

Add the code to the very bottom of the file on a new line. Make a couple blank lines before pasting the code snippet. 

Example:

Save the file after adding your code.