How to Add the “ZHD Order Step” Section to Your Shopify Store

Want to showcase your order process beautifully on your Shopify store? The ZHD Order Step custom section lets you display your business workflow (like "Order", "Design", "Ship", "Set Up") in a clean, modern, and responsive layout — without any apps.

🚀 Step 1: Create the Section File

Go to your Shopify admin and open:

Online Store → Themes → Edit Code → Sections → Add a new section → name it zhd-order-step.liquid
  

🧩 Step 2: Paste the Full Code

Copy and paste the following complete Liquid + HTML + CSS code into your new section file:

<section class="zhd-order-step" style="--color-primary: {{ section.settings.accent_color | default: '#007bff' }};">
  <div class="zhd-order-step__container">
    {% if section.settings.main_title != blank %}
      <h2 class="zhd-order-step__title">{{ section.settings.main_title }}</h2>
    {% endif %}

    <div class="zhd-order-step__steps">
      {% for block in section.blocks %}
        <div class="zhd-order-step__step">
          <div class="zhd-order-step__icon-wrapper">
            {% if block.settings.step_icon != blank %}
              <img src="{{ block.settings.step_icon | image_url: width: 80 }}" alt="{{ block.settings.step_title }}" class="zhd-order-step__icon" />
            {% else %}
              <div class="zhd-order-step__icon-placeholder">★</div>
            {% endif %}
          </div>

          <div class="zhd-order-step__number">{{ forloop.index }}</div>

          <h3 class="zhd-order-step__heading">{{ block.settings.step_title }}</h3>
          <p class="zhd-order-step__text">{{ block.settings.step_content }}</p>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<style>
/* Add your CSS styling here (as in the full Liquid section code) */
</style>

{% schema %}
{
  "name": "ZHD Order Step",
  "settings": [
    {
      "type": "text",
      "id": "main_title",
      "label": "Main Title",
      "default": "How To Order Trade Show Booths"
    },
    {
      "type": "color",
      "id": "accent_color",
      "label": "Accent Color",
      "default": "#007bff"
    }
  ],
  "blocks": [
    {
      "type": "step",
      "name": "Step",
      "settings": [
        { "type": "text", "id": "step_title", "label": "Step Title" },
        { "type": "textarea", "id": "step_content", "label": "Step Content" },
        { "type": "image_picker", "id": "step_icon", "label": "Step Icon" }
      ]
    }
  ],
  "presets": [
    { "name": "ZHD Order Step" }
  ]
}
{% endschema %}
  

🎨 Step 3: Customize in the Theme Editor

Once saved, go to Online Store → Customize, click Add Section, and find “ZHD Order Step” under “Custom Sections”.

• Add your process steps (e.g., Quote → Design → Ship → Setup)
• Upload icons for each step
• Change accent color to match your brand

💡 Step 4: Preview Your Section

Save and refresh your store. You’ll now see your step-by-step process displayed beautifully — fully responsive and aligned with your store’s branding.

Tip: You can duplicate this section for other uses like “How It Works”, “Our Process”, or “Shipping Steps”.

✅ Final Result

The final layout is clean, mobile-friendly, and perfect for guiding customers through your order process.

Written by ZHD Themes · Shopify Custom Section Tutorials