🧭 Create a “How To Order” Step-by-Step Section for Your Shopify Store

In this tutorial, we’ll build a professional “How To Order” section using custom Liquid and CSS. This layout visually explains your store’s ordering process — complete with icons, text, and an image — and is ideal for product pages, homepages, or service landing pages.

🧱 Step 1: Add a New Section in Shopify

From your Shopify admin, go to:
Online Store → Themes → Edit Code → Sections → Add a new section
and name it zhd-how-order.liquid.

Then paste the following complete code:

  

    

      

        {% raw %}{% if section.settings.main_title != blank %}{% endraw %}
          
{{ section.settings.main_title }}
        {% raw %}{% endif %}{% endraw %}
        

          {% raw %}{% for block in section.blocks %}{% endraw %}
            

              

                {% raw %}{% if block.settings.step_icon != blank %}{% endraw %}
                  
                {% raw %}{% else %}{% endraw %}
                  
★
                {% raw %}{% endif %}{% endraw %}
              
              

                
{{ block.settings.step_title }}
                
{{ block.settings.step_content }}
              
            
          {% raw %}{% endfor %}{% endraw %}
        
      
      

        {% raw %}{% if section.settings.side_image != blank %}{% endraw %}
          
        {% raw %}{% endif %}{% endraw %}
      
    
  




{% raw %}{% schema %}{% endraw %}
{
  "name": "ZHD How Order",
  "settings": [
    {
      "type": "text",
      "id": "main_title",
      "label": "Main Title",
      "default": "How To Order Trade Show Booths"
    },
    {
      "type": "image_picker",
      "id": "side_image",
      "label": "Side Image"
    },
    {
      "type": "color",
      "id": "accent_color",
      "label": "Accent Color",
      "default": "#007bff"
    }
  ],
  "blocks": [
    {
      "type": "step",
      "name": "Step",
      "settings": [
        {
          "type": "text",
          "id": "step_title",
          "label": "Step Title",
          "default": "Order Online"
        },
        {
          "type": "textarea",
          "id": "step_content",
          "label": "Step Content",
          "default": "Choose your trade show booth, add to cart, and checkout online. Be mindful of lead times as they determine production duration."
        },
        {
          "type": "image_picker",
          "id": "step_icon",
          "label": "Step Icon"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "ZHD How Order",
      "category": "Custom Sections",
      "blocks": [
        {
          "type": "step",
          "settings": {
            "step_title": "Order Online",
            "step_content": "Choose your trade show booth, add to cart, and checkout online. Be mindful of lead times as they determine production duration."
          }
        },
        {
          "type": "step",
          "settings": {
            "step_title": "Upload Artwork",
            "step_content": "Download the design template or hire our in-house designers. Submit artwork by clicking 'Upload Files'."
          }
        },
        {
          "type": "step",
          "settings": {
            "step_title": "Approve Proofs",
            "step_content": "Review and approve proofs online. You’ll receive a tracking link as soon as your order ships."
          }
        }
      ]
    }
  ]
}
{% raw %}{% endschema %}{% endraw %}
  

🎨 Step 2: Customize in Theme Editor

After saving, go to your Shopify theme editor and add this new section:

• Set a main title such as “How to Order Trade Show Booths”
• Upload a side image — for example, your team or production photo
• Add 3 step blocks:
  • Order Online
  • Upload Artwork
  • Approve Proofs
• Adjust your accent color to match your brand

✨ Step 3: Result Preview

You’ll get a clean two-column layout:

• Left side — clear “How It Works” steps with icons
• Right side — optional supporting image
• Fully responsive, stacking beautifully on mobile

💡 Pro Tip: Use your brand accent color for icons to match your theme and upload simple monochrome SVG icons for a professional appearance.