war4k.md

Step 1

If you have not created categories for each Army/Faction that you want to display, do that now. Ensure that you add a category photo to these, no larger than 240x240 for best results, as this is where it will pull those sub-pages from.

Step 2

Enter the Edit Code section of your Theme

Step 3

Create a new template for a page and call it list-40k

Step 4

Paste in the code below and save it.

<div class="pageTemplate__wrap">
    {% section 'page-intro' %}
    <div class="pageTemplate">
      <div class="pageContent">
        {% assign linklist = 'warhammer-40-000' %}


  <div class="collection-list-container">
    
        {% for link in linklists[linklist].links %}
          {% assign link_handle = link.handle %}
          {% assign collection = collections[link_handle] %}
          	<div class="collection-list-item">
              {% assign collection_title = collection.title %}
			  {% assign collection_url = collection.url %}

				{% if collection.image %}
  					{% assign image = collection.image %}
				{% else %}
  					{% assign image = collection.products.first.featured_media.preview_image %}
				{% endif %}
  				<a href="{{ collection_url }}">
    				<figure class="collection-list-item-image">
        				{% if collection.image %}<img src="{{ image | img_url: '240x240', crop: 'bottom' }}">{% endif %}
    				</figure>

    			<span class="collection-list-item-title">
        			{{ collection_title }}
    			</span>
  				</a>
			</div>
      		
        {% endfor %}
        
        </div>
        </div>
    </div>
</div>

Step 5

Add the following to your Custom.css file under Assets

/* CSS for Custom Collection Display Page - 40k */

.collection-list-container {
  display: grid;
  align-content: center;

  /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
  grid-gap: 15px 20px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.collection-list-item {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
}

.collection-list-item-image {
  margin: 0;
}


.collection-list-item-title {
  margin-top: 10px;
  font-size: 19px;
  font-weight: 700;
  display: inline-block;
  line-height: 1.4;
  color: rgb(45,45,45);
  text-decoration: none;
  text-shadow: 1px 2px 8px rgb(95,95,95);
}

@media only screen and (max-width: 650px) {
  /* For mobile phones: */
  .collection-list-container {
    grid-template-columns: repeat(1, 360px);
  }
}
@media only screen and (min-width: 651px) {
  /* For desktop: */
  .collection-list-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 992px) {
  /* For desktop: */
  .collection-list-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

Step 6

Got back to you Shopify Admin and create a new menu under Navigation (under the Online Store header). Call it whatever you’d like, I called mine Warhammer 40,000, but ensure that the Handle is set to Warhammer-40-000 to have it link into the code properly. Then in this menu, add all the categories for each faction. Whatever order you enter these in is the order they will display in. It will not alphabetize them for you.

Step 7

Add a link somewhere on your page, and you should be able to browse to it.

This section should be responsive to the screen size of the device, so on a PC you should see 4 columns, on a tablet 2 columns and on a smart phone 1 column.
Big thank you to Chris at Silver Goblin for helping refine this responsive CSS