如何在Shopify中创建自定义区块并在任意页面调用，以及创建可在所有页面调用的自定义板块？

Hey fellow Shopify developer! Let's walk through exactly how to build custom blocks and sections that you can use anywhere on your store. I've tackled this many times, so I'll break it down into clear, actionable steps.

Custom blocks are reusable components you can drop into pages—either via the theme editor or directly in your code. Here are two common approaches:

Method 1: Configurable Blocks (Editor-Friendly) #

This lets you create blocks that can be customized via Shopify's theme editor (like adjusting text, links, or images):

• Open your theme's sections folder and create a new file, e.g., custom-block-container.liquid
• Paste this code (we'll add a CTA block and a feature block as examples):

<div class="custom-block-container">
  {% for block in section.blocks %}
    {% case block.type %}
      {% when 'custom_cta' %}
        <div class="custom-cta-block">
          <h3>{{ block.settings.cta_title }}</h3>
          <p>{{ block.settings.cta_description }}</p>
          <a href="{{ block.settings.cta_link }}" class="btn">{{ block.settings.cta_button_text }}</a>
        </div>
      {% when 'custom_feature' %}
        <div class="custom-feature-block">
          <img src="{{ block.settings.feature_icon | img_url: '32x32' }}" alt="{{ block.settings.feature_title }}">
          <h4>{{ block.settings.feature_title }}</h4>
        </div>
    {% endcase %}
  {% endfor %}
</div>

<style>
.custom-block-container {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem 0;
}
.custom-cta-block {
  flex: 1 1 300px;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 8px;
  text-align: center;
}
.custom-feature-block {
  flex: 1 1 200px;
  text-align: center;
}
</style>

{% schema %}
{
  "name": "Custom Block Container",
  "settings": [],
  "blocks": [
    {
      "type": "custom_cta",
      "name": "Custom CTA Block",
      "settings": [
        {
          "type": "text",
          "id": "cta_title",
          "label": "CTA Title",
          "default": "Get Started Today"
        },
        {
          "type": "textarea",
          "id": "cta_description",
          "label": "CTA Description",
          "default": "Join thousands of happy customers now."
        },
        {
          "type": "url",
          "id": "cta_link",
          "label": "CTA Link"
        },
        {
          "type": "text",
          "id": "cta_button_text",
          "label": "Button Text",
          "default": "Learn More"
        }
      ]
    },
    {
      "type": "custom_feature",
      "name": "Custom Feature Block",
      "settings": [
        {
          "type": "text",
          "id": "feature_title",
          "label": "Feature Title"
        },
        {
          "type": "image_picker",
          "id": "feature_icon",
          "label": "Feature Icon"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom Block Container",
      "category": "Custom Blocks"
    }
  ]
}
{% endschema %}

• Now head to your Shopify admin → Online Store → Themes → Customize. Go to any page, click "Add section", find "Custom Block Container", and add your custom CTA/feature blocks. Adjust settings directly in the editor!

Method 2: Static Snippet Block (Code-Only) #

If you don't need editor customization and just want a fixed block to drop anywhere:

• Create a new file in your theme's snippets folder, e.g., custom-static-block.liquid
• Add your block code:

<div class="custom-static-block">
  <h3>Welcome to Our Store</h3>
  <p>We offer the best products at unbeatable prices.</p>
  <a href="/collections/all" class="shop-now-btn">Shop Now</a>
</div>

<style>
.custom-static-block {
  background: #e3f2fd;
  padding: 3rem;
  text-align: center;
  margin: 2rem 0;
}
.shop-now-btn {
  background: #2196f3;
  color: white;
  padding: 1rem 2rem;
  text-decoration: none;
  border-radius: 4px;
}
</style>

• Call this snippet in any page template (e.g., templates/page.liquid, templates/product.liquid) with:

{% render 'custom-static-block' %}

Custom sections are full-width components you can add to any page. To make them available everywhere, follow these steps:

• Create a new file in your theme's sections folder, e.g., custom-hero-section.liquid
• Add this code (with editor-configurable settings):

<div class="custom-hero-section">
  <div class="hero-content">
    <h1>{{ section.settings.hero_title }}</h1>
    <p>{{ section.settings.hero_subtitle }}</p>
    <a href="{{ section.settings.hero_link }}" class="hero-btn">{{ section.settings.hero_button_text }}</a>
  </div>
  {% if section.settings.hero_image %}
    <img src="{{ section.settings.hero_image | img_url: '1200x' }}" alt="{{ section.settings.hero_title }}" class="hero-image">
  {% endif %}
</div>

<style>
.custom-hero-section {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 4rem 2rem;
  background: #f5f5f5;
}
.hero-content {
  flex: 1;
}
.hero-image {
  flex: 1;
  max-width: 500px;
  border-radius: 8px;
}
.hero-btn {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 1rem 2rem;
  background: #ff5722;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}
</style>

{% schema %}
{
  "name": "Custom Hero Section",
  "settings": [
    {
      "type": "text",
      "id": "hero_title",
      "label": "Hero Title",
      "default": "Amazing Products, Unbeatable Prices"
    },
    {
      "type": "textarea",
      "id": "hero_subtitle",
      "label": "Hero Subtitle",
      "default": "Discover our curated collection of high-quality items."
    },
    {
      "type": "url",
      "id": "hero_link",
      "label": "Button Link"
    },
    {
      "type": "text",
      "id": "hero_button_text",
      "label": "Button Text",
      "default": "Shop Now"
    },
    {
      "type": "image_picker",
      "id": "hero_image",
      "label": "Hero Image"
    }
  ],
  "presets": [
    {
      "name": "Custom Hero Section",
      "category": "Custom Sections",
      "templates": ["index", "page", "product", "collection", "blog", "article", "search"]
    }
  ]
}
{% endschema %}

• Key Tip: The templates array in the presets section lists all page types where this section will appear. Add every template you want to support (e.g., list-collections for the collections page).
• Now go to any page in the theme editor, click "Add section", and you'll see "Custom Hero Section" ready to use.

If you want a section to always appear on a specific page (no editor action needed), add this line to your page template:

{% section 'custom-hero-section' %}

You can still edit the section's settings in the theme editor—this just locks it into the page layout.

内容的提问来源于stack exchange，提问作者Infostans