Keystone Documentation

Appearance

Legacy Theme FAQ Block Installation ​

Manually add the Keystone AI SEO FAQ block to themes that don't support Shopify 2.0 app blocks.

TIP

Recommended: Let our support team do this for you. We'll add the Keystone code to your theme and ensure everything is installed correctly. Contact us at support@key-stone.app or through the chat widget inside the Keystone app.

Overview ​

If your store uses a legacy (Shopify 1.0) theme or a custom theme that doesn't support app blocks, you can still display Keystone AI SEO FAQs by manually adding a small Liquid snippet to your theme.

WARNING

Advanced setup. This guide requires editing your Shopify theme code. If you're not comfortable editing Liquid files, we recommend using our free installation service instead.

When You Need This ​

Use manual installation if:

  • Your theme doesn't support app blocks in the Theme Editor.
  • You're using a legacy (vintage) Shopify theme.
  • You're using a custom-built theme without Online Store 2.0 support.
  • The standard app block installation isn't available.

Installation ​

Step 1 — Create the Snippet ​

  1. From Shopify Admin, go to Online Store → Themes.

  2. Click the ⋯ (three dots) next to your active theme.

  3. Select Edit code.

  4. Open the Snippets folder.

  5. Click Add a new snippet.

  6. Name it:

    keystone-faq

    NOTE

    Do not include the .liquid extension. Shopify will add it automatically.

  7. Click Create snippet.

Step 2 — Add the Snippet Code ​

Paste the following code into the new snippet:

liquid
{% comment %}
  Keystone FAQ — vintage theme snippet (product + article)
  Usage: {% render 'keystone-faq' %}
{% endcomment %}

{% assign faqs_list = blank %}

{% if product %}
  {% assign faqs_list = product.metafields.faqs.questions_and_answers.value %}
{% elsif article %}
  {% assign faqs_list = article.metafields.faqs.questions_and_answers.value %}
{% endif %}

{% if faqs_list != blank and faqs_list.size > 0 %}
  <div class="keystone-faq-block">
    <div class="keystone-faq-list">
      {% for faq in faqs_list %}
        {% assign question = faq.q | default: faq.question %}
        {% assign answer = faq.a | default: faq.answer %}

        {% if question != blank or answer != blank %}
          <details class="keystone-faq-item">
            <summary class="keystone-faq-question">
              {{ question }}
            </summary>
            <div class="keystone-faq-answer">
              {{ answer }}
            </div>
          </details>
        {% endif %}
      {% endfor %}
    </div>
  </div>

  <style>
    .keystone-faq-block {
      max-width: 700px;
      margin: 24px auto;
      font-family: inherit;
    }

    .keystone-faq-item {
      border-bottom: 1px solid #ddd;
      padding: 10px 0;
    }

    .keystone-faq-question {
      cursor: pointer;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
      list-style: none;
    }

    .keystone-faq-question::-webkit-details-marker {
      display: none;
    }

    .keystone-faq-question::after {
      content: "▼";
      font-size: 0.8em;
      transition: transform 0.2s ease;
      margin-left: 12px;
      flex-shrink: 0;
    }

    details[open] .keystone-faq-question::after {
      transform: rotate(-180deg);
    }

    .keystone-faq-answer {
      margin-top: 8px;
      padding-left: 10px;
      color: #444;
      font-weight: 400;
      line-height: 1.5;
    }
  </style>
{% endif %}

Click Save.

Step 3 — Add the Snippet to Product Pages ​

  1. Locate your product template. Common locations include:

    • sections/product-template.liquid
    • sections/main-product.liquid
    • templates/product.liquid

  2. Find where you'd like the FAQ section to appear (typically below the product description) and insert:

    liquid
    {% render 'keystone-faq' %}

  3. Save the file.

Step 4 — Add the Snippet to Article Pages ​

  1. Locate your article template. Common locations include:

    • sections/article-template.liquid
    • sections/main-article.liquid
    • templates/article.liquid

  2. Find where you'd like the FAQ section to appear (typically below the article content) and insert:

    liquid
    {% render 'keystone-faq' %}

  3. Save the file.

For the best user experience, place the render tag:

  • Immediately after the product description
  • Immediately after the article content

Example Placement ​

Product template:

liquid
<div class="product-single__description rte" itemprop="description">
  {{ product.description }}
</div>

{% render 'keystone-faq' %}

Article template:

liquid
<div class="rte" itemprop="articleBody">
  {{ article.content }}
</div>

{% render 'keystone-faq' %}

Common Theme Locations ​

Legacy Shopify Themes ​

Examples: Debut, Brooklyn, Supply, Simple, Venture

Template typeCommon location
Productsections/product-template.liquid
Articlesections/article-template.liquid

NOTE

Custom themes may organize files differently.

Verify the Installation ​

After completing the installation:

  1. Save all modified files.
  2. Open your storefront.
  3. Navigate to a product or article that has been optimized and contains FAQs.
  4. Verify that the FAQ block appears correctly.

If the FAQ Block Doesn't Appear ​

Check the following:

  • The keystone-faq.liquid snippet was created correctly.
  • The {% render 'keystone-faq' %} tag was added to the correct template.
  • The product or article actually contains FAQ data.
  • Clear your browser cache and refresh the page.

IMPORTANT

Only add {% render 'keystone-faq' %} once per product or article page. Adding it multiple times will display duplicate FAQ sections.

Upgrading to Shopify Online Store 2.0 ​

If you later switch to a Shopify 2.0 theme:

  1. Remove the render tag from your templates.
  2. Delete the keystone-faq.liquid snippet (optional).
  3. Install the Keystone FAQ block using the standard App Block installation.

TIP

Shopify Online Store 2.0 themes provide easier customization, drag-and-drop app blocks, better compatibility, and automatic app updates. If possible, consider upgrading your theme.

Need Help? ​

If you run into any issues:

When contacting support, please include:

  • Your Shopify theme name
  • Any error messages
  • Screenshots of where you inserted the code

Our team will help you identify the correct template files and complete the installation.