Custom Categories Section in Shopify Dawn Theme

Step 1: Access the Theme Code

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

Step 2: Create a New Section

1. In the Sections directory, click Add a new section.
2. Name the section custom-categories and click Create section.

Step 3: Add Code to the New Section

Add the following code to your custom-categories.liquid file:

{% schema %}
{
  "name": "Custom Categories",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Section Title",
      "default": "Our Categories"
    },
    {
      "type": "collection_list",
      "id": "collections",
      "label": "Collections to display"
    }
  ],
  "presets": [
    {
      "name": "Custom Categories",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<section class="custom-categories-section">
  <div class="container">
    <h2>{{ section.settings.title }}</h2>
    <div class="categories-wrapper">
      {% for collection in section.settings.collections %}
        <div class="category">
          <a href="{{ collection.url }}">
            <img src="{{ collection.image | img_url: 'medium' }}" alt="{{ collection.title }}">
            <h3>{{ collection.title }}</h3>
          </a>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<style>
.custom-categories-section {
  padding: 40px 0;
  text-align: center;
}

.custom-categories-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.custom-categories-section h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
}

.custom-categories-section .categories-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.custom-categories-section .category {
  flex: 1 1 calc(25% - 20px);
  max-width: calc(25% - 20px);
  box-sizing: border-box;
}

.custom-categories-section .category img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.custom-categories-section .category h3 {
  margin-top: 10px;
  font-size: 1.25em;
}
</style>

Step 4: Add the Section to a Template

1. In the Templates directory, open the template where you want to include the custom categories section (e.g., index.json for the homepage or page.json for a custom page).
2. Add the custom-categories section to the desired location within the template.

Example for index.json:

{
  "name": "Home",
  "sections": {
    "main": {
      "type": "main-collection",
      "settings": {}
    },
    "custom-categories": {
      "type": "custom-categories"
    }
  },
  "order": [
    "main",
    "custom-categories"
  ]
}

Step 5: Configure the Section in the Theme Customizer

1. Go back to your Shopify admin panel.
2. Navigate to Online Store > Themes, and click on Customize for your theme.
3. In the theme customizer, add the new Custom Categories section to your desired page (e.g., the homepage).
4. Set the section title and select the collections you want to display.
5. Save your changes.

Summary

By following these steps, you can create a custom categories section in the Shopify Dawn theme:

1. Create a new section for displaying categories.
2. Add Liquid and HTML to structure the category display.
3. Style the section with CSS for better visual appearance.
4. Include the section in a template and configure it in the theme customizer.

This approach allows you to dynamically showcase your store’s collections in a visually appealing and organized manner.