💸 Create a Dynamic Pricing Table Section in Shopify (With Gradient Background Support)

Want to add a stylish, flexible pricing section to your Shopify store without relying on apps? In this tutorial, you’ll learn how to create a custom section called “ZHD Pricing Table” that includes editable plans, prices, and background customization — all built using Shopify’s Online Store 2.0 section schema.

🧱 Step 1: Create a New Section File

Go to your Shopify admin and navigate to:
Online Store → Themes → Edit Code → Sections → Add a new section.
Name it: zhd-pricing-table.liquid

Then, paste the following complete Liquid + CSS code inside the file:

<section 
  class="zhd-pricing-table"
  style="
    {% raw %}{% if section.settings.background_type == 'color' %}{% endraw %}
      background-color: {{ section.settings.background_color }};
    {% raw %}{% elsif section.settings.background_type == 'gradient' %}{% endraw %}
      background: {{ section.settings.background_gradient }};
    {% raw %}{% endif %}{% endraw %}
  "
>
  <div class="container">
    {% raw %}{% if section.settings.heading != blank %}{% endraw %}
      <div class="row text-center mb-8">
        <div class="col">
          <h1 class="zhd-pricing-heading">{{ section.settings.heading }}</h1>
        </div>
      </div>
    {% raw %}{% endif %}{% endraw %}

    <div class="row mt-5 align-items-stretch justify-content-center">
      {% raw %}{% for block in section.blocks %}{% endraw %}
        <div class="col-12 col-sm-10 col-md-6 col-lg-4 mb-5 text-center">
          <div class="zhd-pricing-card">
            {% raw %}{% if block.settings.title != blank %}{% endraw %}
              <h2>{{ block.settings.title }}</h2>
            {% raw %}{% endif %}{% endraw %}
            {% raw %}{% if block.settings.description != blank %}{% endraw %}
              <p class="lead">{{ block.settings.description }}</p>
            {% raw %}{% endif %}{% endraw %}
            {% raw %}{% if block.settings.price != blank %}{% endraw %}
              <p class="price">{{ block.settings.price }}</p>
            {% raw %}{% endif %}{% endraw %}
            {% raw %}{% if block.settings.button_label != blank and block.settings.button_link != blank %}{% endraw %}
              <p>
                <a href="{{ block.settings.button_link }}" class="btn {{ block.settings.button_style }}">
                  {{ block.settings.button_label }}
                </a>
              </p>
            {% raw %}{% endif %}{% endraw %}
          </div>
        </div>
      {% raw %}{% endfor %}{% endraw %}
    </div>
  </div>
</section>

<style>
  .zhd-pricing-table {
    padding: 80px 20px;
    text-align: center;
  }

  .zhd-pricing-heading {
    color: {{ section.settings.heading_color }};
    font-size: 2.4rem;
    font-weight: 700;
  }

  .zhd-pricing-card {
    background: #fff;
    border-radius: 12px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .zhd-pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.1);
  }

  .zhd-pricing-card h2 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .zhd-pricing-card .lead {
    font-size: 1rem;
    color: #666;
    margin-bottom: 25px;
  }

  .zhd-pricing-card .price {
    font-size: 2rem;
    font-weight: 700;
    margin: 25px 0;
  }

  .zhd-pricing-card .btn {
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
  }

  .btn.btn-dark {
    background-color: #111;
    color: #fff;
  }

  .btn.btn-dark:hover {
    background-color: #333;
  }

  .btn.btn-secondary {
    background-color: #007bff;
    color: #fff;
  }

  .btn.btn-secondary:hover {
    background-color: #005fcc;
  }

  @media (max-width: 768px) {
    .zhd-pricing-card {
      margin-bottom: 30px;
    }
  }
</style>

{% raw %}{% schema %}{% endraw %}
{
  "name": "ZHD Pricing Table",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Section Heading",
      "default": "Pricing"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading Color",
      "default": "#ffffff"
    },
    {
      "type": "select",
      "id": "background_type",
      "label": "Background Type",
      "options": [
        { "value": "color", "label": "Solid Color" },
        { "value": "gradient", "label": "Gradient" }
      ],
      "default": "color"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#1a1a1a"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "Background Gradient"
    }
  ],
  "blocks": [
    {
      "type": "pricing_plan",
      "name": "Pricing Plan",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Plan Title",
          "default": "Hobby"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "Plan Description",
          "default": "Far far away, behind the word mountains, far from the countries Vokalia."
        },
        {
          "type": "text",
          "id": "price",
          "label": "Price",
          "default": "$99"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button Label",
          "default": "Buy Now"
        },
        {
          "type": "text",
          "id": "button_link",
          "label": "Button Link",
          "default": "https://www.example.com"
        },
        {
          "type": "select",
          "id": "button_style",
          "label": "Button Style",
          "options": [
            { "value": "btn-dark", "label": "Dark" },
            { "value": "btn-secondary", "label": "Blue" }
          ],
          "default": "btn-dark"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "ZHD Pricing Table",
      "category": "Custom Sections",
      "blocks": [
        { "type": "pricing_plan" },
        { "type": "pricing_plan" },
        { "type": "pricing_plan" }
      ]
    }
  ]
}
{% raw %}{% endschema %}{% endraw %}
  

🎨 Step 2: Customize Your Pricing Plans

Once added, go to your Theme Editor → Add Section → ZHD Pricing Table. You can now:

• Set a solid color or gradient background
• Edit section heading and color
• Add up to three (or more) pricing blocks
• Customize title, description, price, and buttons individually

✨ Step 3: Final Result

You now have a clean, responsive pricing section that works beautifully across devices and supports gradients for modern design flexibility.

💡 Pro Tip: Adjust your theme’s container padding or add animation libraries like AOS (Animate On Scroll) for a more dynamic feel.