03/50 — Show a Shopify section only on product pages: free Liquid code + placement guide

[vistabylara-dev]

كيف تعرض قسماً مخصصاً في صفحات المنتجات فقط؟

ملاحظة خاصة بالمنتجات لا تحتاج إلى الظهور في الصفحة الرئيسية أو المدونة أو السلة. ابدأ بإضافتها داخل قالب المنتج المناسب، ثم استخدم إعدادات القسم وشرط Liquid لتحديد مكان ظهورها.

هذا المثال ينشئ قسماً جديداً قابلاً للتعديل. خذ نسخة احتياطية وجرّبه على قالب غير منشور. لا تستبدل قسم المنتج الرئيسي ولا تضع الصفحة كاملة داخل شرط الإظهار.

---

Problem 03/50: How do I show a custom Shopify section only on product pages?

You want shoppers to read a useful note while considering a product. Instead, the note appears elsewhere because it was added to a shared layout or global area.

Start with placement: If a section belongs on product pages, add it to the relevant product template. You may not need custom code if an existing section already gives you what you need.

For a new custom component, the example below combines editor restrictions with a page-type check.

Two controls with different jobs

Control	What it does	What it does not do
enabled_on with templates: ["product"]	Restricts the new section's supported editor placement to product templates.	Does not add an instance to every product template.
request.page_type == 'product'	Renders the example's content only in product-page context.	Does not select an individual product or automatically move existing content.
Adding the section through the editor	Places an instance in the template you are editing.	Does not modify every alternate product template.

This guide targets a page type. If you want the note on just one selected product, use Topic 2's product-picker example.

Before adding code

Check where the unwanted section currently comes from: a product template, header/footer group, custom layout include or app. If an existing section was placed in the wrong location, adding this new example will not remove the original.

Keep a record of its current placement. Avoid deleting shared code until you know which pages depend on it.

Free code suggestion: product-page help section

Suitable for: Compatible Online Store themes with product templates supporting addable sections. This example is not for headless storefronts or checkout customization.

Use cautiously: Duplicate and back up your theme, then edit the unpublished copy. Create the new file below without overwriting existing files. Do not paste this into theme.liquid, a JSON template or a Custom Liquid field. Never put content_for_layout, navigation, price or the product form inside this condition. The condition is only for this optional help content.

Exact file: sections/vbl-product-help.liquid

From Online Store → Themes, open Edit code on the duplicate theme. Create that file in sections, paste the full example and save. If the filename already exists, inspect it first.

{% if request.page_type == 'product' %}
  {% if section.settings.heading != blank or section.settings.text != blank %}
    <div class="vbl-product-help">
      {% if section.settings.heading != blank %}
        <h2>{{ section.settings.heading | escape }}</h2>
      {% endif %}
      {% if section.settings.text != blank %}
        <div class="vbl-product-help__text">
          {{ section.settings.text }}
        </div>
      {% endif %}
    </div>
  {% endif %}
{% endif %}

{% stylesheet %}
  .vbl-product-help {
    max-width: 48rem;
    margin-inline: auto;
    padding: 1.25rem;
    overflow-wrap: anywhere;
  }
  .vbl-product-help h2 {
    margin-block: 0 0.75rem;
  }
  .vbl-product-help__text {
    line-height: 1.6;
  }
{% endstylesheet %}

{% schema %}
{
  "name": "VBL product help",
  "tag": "div",
  "enabled_on": {
    "templates": ["product"]
  },
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Help text"
    }
  ],
  "presets": [
    {
      "name": "VBL product help"
    }
  ]
}
{% endschema %}

Add and activate it

1. Open the same unpublished theme in the theme editor.
2. Select the product template you want to change.
3. Choose Add section → VBL product help.
4. Enter your heading and help text. Both start empty intentionally.
5. Place it where the information helps the shopper, then save.
6. Preview an actual product using that template.

There is no extra activation line to paste into theme.liquid for this workflow. The section is added through the template editor.

Choose content that applies to all products sharing that template. For example, use a truthful contact instruction rather than a delivery promise that applies to only some items. Add appropriate translations before using it across languages.

If adapting an existing section

Do not replace an established section with this demonstration. Preserve its settings, blocks and behaviour.

A section has one schema block. Modify its existing availability rules carefully: Shopify allows either enabled_on or disabled_on, not both. Review existing template/group references before narrowing where an established section can be used.

Keep the schema outside the Liquid page-type condition. Wrapping the schema itself inside an if is not the solution.

Checks before publishing

Check	Expected result
Product template's Add section picker	VBL product help is available.
Homepage or collection template's picker	This product-only section is not offered there.
Product page with the section added and text saved	Your help content appears.
Different product template without this section	No instance appears automatically.
Both text settings cleared	The example's inner content disappears.
Mobile, desktop and keyboard use	Text is readable; any links remain usable.

Check the cart, homepage and collection page to confirm no old duplicate note remains. Verify the product's price, variants and Add to cart still work as before.

Possible spacing issue: The theme may add margin or padding to Shopify's outer section wrapper even when the inner content is empty. If that leaves a gap, request a targeted fix for this section. Do not hide all empty sections globally.

Rollback

Remove VBL product help from each template where you added it and save. Then delete only the new file if nothing references it.

If you changed an existing section's placement or availability rules, restore the original file and placement from your change record. Keep the original theme available until the revised version is fully reviewed.

Verification and official documentation

Validation passed: Shopify AI Toolkit's Liquid/theme validator reported that vbl-product-help.liquid passed all checks.

Not tested in your store: Theme styling, template configuration and app interactions still need preview testing. This guide did not modify a live merchant store.

Official references, reviewed 24 October 2026:

• Shopify section schema: enabled_on and disabled_on
• Liquid request object and page_type

Want help with the right placement?

Reply with your theme name/version, where the section appears now, and where you want it to appear. Share relevant code only, without passwords, tokens or customer data.

Join our free Shopify code-fixing discussion · See the 50-topic roadmap

Join our free LinkedIn group · Follow Dr Lara on GitHub

Call Dr Lara on +971 50 799 4292 for free Shopify guidance and a free consultation.
Ask on WhatsApp · Visit Vista by Lara

Free guidance. No commitment.

Dr Lara | Dubai, UAE | Vista by Lara