How to Make Custom Collection Template in Shopify Dawn Theme

Step 1: Duplicate the Existing Collection Template

1. Log in to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Find the Dawn theme, click on Actions, then Edit code.

Step 2: Create a New Template

1. In the Templates directory, find the collection.json file.
2. Click on collection.json to open it.
3. Create a copy of this file with a new name. For example, collection.custom.json.

Step 3: Edit the New Template

1. Open collection.custom.json.
2. Modify the sections and blocks as needed to customize the collection template. For example, if you want to add a new section or modify the layout, you can do so here.

Here is an example of a custom collection template (collection.custom.json):

{
  "name": "Custom Collection",
  "sections": {
    "main": {
      "type": "main-collection",
      "settings": {
        "enable_collection_info": true,
        "show_vendor": false,
        "enable_sorting": true,
        "enable_filters": true
      }
    },
    "custom-section": {
      "type": "custom-section",
      "settings": {
        "custom_text": "This is a custom section"
      }
    }
  },
  "order": [
    "main",
    "custom-section"
  ]
}

Step 4: Add a Custom Section

1. In the Sections directory, create a new file named custom-section.liquid.
2. Add the HTML, CSS, and Liquid code to define your custom section. Here is an example:

<!-- custom-section.liquid -->
<section id="custom-section" class="custom-section">
  <div class="custom-section__content">
    <h2>{{ section.settings.custom_text }}</h2>
    <!-- Add more custom content here -->
  </div>
</section>

<style>
  .custom-section {
    background-color: #f4f4f4;
    padding: 20px;
  }
  .custom-section__content h2 {
    color: #333;
  }
</style>

3. In the schema section of your custom-section.liquid file, define the settings for your custom section:

{% schema %}
{
  "name": "Custom Section",
  "settings": [
    {
      "type": "text",
      "id": "custom_text",
      "label": "Custom Text",
      "default": "This is a custom section"
    }
  ]
}
{% endschema %}

Step 5: Assign the Custom Template to a Collection

1. Go back to your Shopify admin panel.
2. Navigate to Products > Collections.
3. Select the collection you want to use the custom template.
4. In the Theme template section, select your new custom template (e.g., collection.custom).
5. Save the collection.

Step 6: Customize Further as Needed

You can continue to customize your collection.custom.json template and custom-section.liquid section to add more features or modify the layout according to your requirements.

Summary

By following these steps, you have created a custom collection template in the Shopify Dawn theme:

1. Duplicated the existing collection template to create a new template.
2. Modified the new template to include custom sections and settings.
3. Created and customized a new section to include in your custom template.
4. Assigned the custom template to a specific collection in your Shopify admin.

This approach allows you to have a unique layout and functionality for specific collections in your Shopify store.