Custom Multi Row 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 multi-row and click Create section.

Step 3: Add Code to the New Section

Add the following code to your multi-row.liquid file:

{% schema %}
{
  "name": "Multi Row Section",
  "settings": [],
  "blocks": [
    {
      "type": "row",
      "name": "Row",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Row Heading"
        },
        {
          "type": "textarea",
          "id": "content",
          "label": "Content",
          "default": "Row content goes here."
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Multi Row",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<section class="multi-row-section">
  {% for block in section.blocks %}
    <div class="row">
      <h2>{{ block.settings.heading }}</h2>
      <p>{{ block.settings.content }}</p>
      {% if block.settings.image %}
        <img src="{{ block.settings.image | img_url: 'master' }}" alt="{{ block.settings.heading }}">
      {% endif %}
    </div>
  {% endfor %}
</section>

<style>
.multi-row-section {
  padding: 20px;
}

.multi-row-section .row {
  margin-bottom: 20px;
}

.multi-row-section .row h2 {
  font-size: 2em;
  margin-bottom: 10px;
}

.multi-row-section .row p {
  font-size: 1em;
  margin-bottom: 10px;
}

.multi-row-section .row img {
  max-width: 100%;
  height: auto;
}
</style>

Step 4: Add the Section to a Template

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

Example for index.json:

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

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 Multi Row section to your desired page (e.g., the homepage).
4. Add rows by clicking Add content and configuring each block with the heading, content, and image.
5. Save your changes.

Summary

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

1. Create a new section for displaying multi-row content.
2. Add Liquid and HTML to structure the rows and their content.
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 multiple rows of content on your Shopify store, enhancing the layout and content presentation.