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

🧭 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:

<section class="zhd-how-order" style="--color-primary: {{ section.settings.accent_color | default: '#007bff' }};">
  <div class="zhd-how-order__container">
    <div class="zhd-how-order__content">
      <div class="zhd-how-order__text">
        {% raw %}{% if section.settings.main_title != blank %}{% endraw %}
          <h2 class="zhd-how-order__title">{{ section.settings.main_title }}</h2>
        {% raw %}{% endif %}{% endraw %}
        <div class="zhd-how-order__list">
          {% raw %}{% for block in section.blocks %}{% endraw %}
            <div class="zhd-how-order__item">
              <div class="zhd-how-order__icon-wrapper">
                {% raw %}{% if block.settings.step_icon != blank %}{% endraw %}
                  <img src="{{ block.settings.step_icon | image_url: width: 60 }}" alt="{{ block.settings.step_title }}" class="zhd-how-order__icon" />
                {% raw %}{% else %}{% endraw %}
                  <div class="zhd-how-order__icon-placeholder">★</div>
                {% raw %}{% endif %}{% endraw %}
              </div>
              <div class="zhd-how-order__info">
                <h3 class="zhd-how-order__heading">{{ block.settings.step_title }}</h3>
                <p class="zhd-how-order__text">{{ block.settings.step_content }}</p>
              </div>
            </div>
          {% raw %}{% endfor %}{% endraw %}
        </div>
      </div>
      <div class="zhd-how-order__image">
        {% raw %}{% if section.settings.side_image != blank %}{% endraw %}
          <img src="{{ section.settings.side_image | image_url: width: 800 }}" alt="How to Order Image">
        {% raw %}{% endif %}{% endraw %}
      </div>
    </div>
  </div>
</section>

<style>
  .zhd-how-order {
    background: #f9f9f9;
    padding: 60px 20px;
  }

  .zhd-how-order__container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .zhd-how-order__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
  }

  /* Left Column */
  .zhd-how-order__text {
    flex: 1 1 50%;
    max-width: 50%;
  }

  .zhd-how-order__title {
    font-size: 2rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 30px;
  }

  .zhd-how-order__list {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .zhd-how-order__item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
  }

  .zhd-how-order__icon-wrapper {
    flex: 0 0 50px;
  }

  .zhd-how-order__icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
  }

  .zhd-how-order__icon-placeholder {
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
  }

  .zhd-how-order__info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 5px;
  }

  .zhd-how-order__info p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.5;
  }

  /* Right Image */
  .zhd-how-order__image {
    flex: 1 1 45%;
    text-align: center;
  }

  .zhd-how-order__image img {
    width: 100%;
    height: auto;
    max-height: 500px;
    border-radius: 8px;
    object-fit: cover;
  }

  /* Responsive */
  @media (max-width: 991px) {
    .zhd-how-order__content {
      flex-direction: column;
      text-align: center;
    }

    .zhd-how-order__text {
      order: 2;
      max-width: 100%;
    }

    .zhd-how-order__image {
      order: 1;
    }

    .zhd-how-order__item {
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }
  }
</style>

{% 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.

Back to blog

Leave a comment