Manual Installation
Manual installation is for developers who want complete control over where and how the FAQ panel appears.
For Most Users
Unless you have specific technical requirements, we recommend Theme Block installation instead.
Overview
Manual installation involves:
- Adding the Convertiko FAQ script to your theme
- Placing a container element where you want the FAQ to appear
- The script will automatically populate the container with FAQ content
Step 1: Add the Script
Add this script tag to your theme's <head> section or before the closing </body> tag:
<script src="https://your-app-url.com/convertiko-faq.js" defer></script>Your App URL
Replace your-app-url.com with your actual Convertiko FAQ app URL. You can find this in your Shopify admin under Settings → Apps → Convertiko FAQ → App settings.
Adding to theme.liquid
- Go to Online Store → Themes → Edit code
- Open
layout/theme.liquid - Find the
</head>tag - Add the script tag before it:
<!-- Convertiko FAQ -->
<script src="https://your-app-url.com/convertiko-faq.js" defer></script>
</head>2
3
- Save the file
Step 2: Add the Container
Place this container element wherever you want the FAQ to appear:
<div id="convertiko-faq" data-product-id="{{ product.id }}"></div>Product Page Placement
For product pages, add the container in your product template:
- Go to Edit code
- Open your product template (usually
sections/main-product.liquidortemplates/product.liquid) - Find where you want the FAQ to appear
- Add the container:
{% comment %} Convertiko FAQ {% endcomment %}
<div id="convertiko-faq" data-product-id="{{ product.id }}"></div>2
Container Attributes
| Attribute | Required | Description |
|---|---|---|
id="convertiko-faq" | Yes | Identifies the container for the script |
data-product-id | Yes | The Shopify product ID |
data-shop | No | Your myshopify.com domain (auto-detected) |
Full Example
<div
id="convertiko-faq"
data-product-id="{{ product.id }}"
data-shop="{{ shop.permanent_domain }}"
></div>2
3
4
5
Multiple Containers
You can have multiple FAQ containers on different pages:
Collection Page
{% for product in collection.products %}
<div class="product-card">
<!-- Product info -->
<div id="convertiko-faq-{{ product.id }}"
class="convertiko-faq"
data-product-id="{{ product.id }}">
</div>
</div>
{% endfor %}2
3
4
5
6
7
8
9
Performance
Loading FAQs for many products simultaneously may impact page load time. Consider lazy-loading for collection pages.
Styling the Container
The FAQ panel inherits your theme's styles but you can customize it:
#convertiko-faq {
margin: 24px 0;
padding: 16px;
}
/* Or use a wrapper */
.faq-wrapper {
background: var(--color-background);
border-radius: 8px;
margin-top: 32px;
}2
3
4
5
6
7
8
9
10
11
Verifying Installation
After setup:
- Generate FAQ content for a product in your Convertiko dashboard
- Visit that product page
- Open browser DevTools (F12) → Console
- Look for:
[Convertiko FAQ] Loaded for product: [ID] - The FAQ should appear in your container
Troubleshooting
FAQ Not Loading
Check the browser console for errors:
- Script not found: Verify the script URL is correct
- Product ID missing: Ensure
data-product-idis set - No content: Generate FAQ content in the dashboard first
Styling Conflicts
If the FAQ doesn't look right:
- Check for CSS conflicts in DevTools
- Use more specific selectors to override
- Check the Appearance guide for customization options
Multiple FAQs Appearing
If using both manual and Theme Block/Embed:
- Disable the App Embed in theme settings
- Remove any Theme Blocks
- Use only the manual container
Updating the Script
The script URL may change with app updates. If FAQs stop working:
- Check your Convertiko dashboard for the latest script URL
- Update the script tag in your theme
- Clear any CDN or browser caches