Hello! David
I understand that you want to add an external iframe to your Shopify homepage and that you mentioned a correction regarding the section name. No worries, Shopify offers a section called "Custom Liquid", which allows you to add custom code, including HTML, Liquid, CSS, and JavaScript. This is perfect for adding your iframe. I'll guide you step by step to do it correctly.
Step 1: Create a Custom Section in Shopify
Since the "Custom HTML" option isn’t showing up when you try to add a new section, we’ll create one from scratch in your theme’s code. Here’s how
- Log in to your Shopify admin panel.Go to the Theme Editor:
- Navigate to Online Store > Themes.
- Find the theme you’re using and click Actions > Edit Code.
Create a New Section:
- In the left sidebar, find the Sections folder.
- Click Add a new section at the top.
- Name it something like custom-iframe (or whatever you prefer), then click Create section.
Add the Section Code:
- In the new custom liquid file that opens, replace its default content with this code:
<div class="custom-iframe">
{{ section.settings.custom_html }}
</div>
{% schema %}
{
"name": "Custom Iframe",
"settings": [
{
"type": "html",
"id": "custom_html",
"label": "Custom HTML"
}
],
"presets": [
{
"name": "Custom Iframe",
"category": "Advanced"
}
]
}
{% endschema %}
- Click Save. This creates a section where you can input custom HTML, like your iframe.
Add the Section to Your Home Page:
- Go back to Online Store > Themes and click Customize on your theme.
- In the theme editor, click Add section (usually at the bottom or sidebar).
- Look for Custom Iframe in the list (under "Advanced" if you used the code above), select it, and add it to your home page where you want the iframe to appear.
Step 2: Add the JavaScript and Iframe
Now that you have a custom section, let’s include the JavaScript and the iframe code as per the instructions you provided.
Add the JavaScript to Your Theme:
- Return to Online Store > Themes > Actions > Edit Code.
- Open the theme.liquid file (usually under the Layout folder).
- Find the </head> or </body> tag:
- If you want it in the <head>, look for </head>.
- If you prefer it before the closing </body>, scroll to the bottom and find </body>.
- Just before that tag, paste this Javascript:
<script src="https://tuning-shop.com/media/js/iframe-loader.js"></script>
- Click Save. This ensures the iframe loader script runs on your site.
Add the Iframe to the Custom Section:
- Go back to the theme editor (Online Store > Themes > Customize).
- Find the Custom Iframe section you added to your home page.
- Click on it to open its settings.
- In the Custom HTML field, paste this iframe code:
<iframe src="https://tuning-shop.com/iframe/iframe.php?user=*******" width="100%" height="auto" scrolling="no" frameborder="0" style="border: 0;"></iframe>
- Important: Replace ******* with your actual user ID or parameter provided by the iframe source.
- Click Save.
Step 3: Preview and Troubleshoot
- Check Your Home Page: In the theme editor, preview your home page to see if the iframe loads correctly.
- Adjust the Size: If the iframe doesn’t look right, tweak the height in the iframe code (e.g., change height="auto" to height="500px" for a fixed size).
- Fix Loading Issues: If the iframe doesn’t appear:
- Double-check that the JavaScript is correctly added in theme.liquid
All Done!
You’ve now created a custom section and added the external iframe to your Shopify home page, complete with the necessary JavaScript. It should be working smoothly now. If you run into any issues or need further help, just let me know—I’m here to assist!
Best regards!
Luis Forero | Shopify Developer | Experto en Liquid | Personalización de temas | Optimización de código | Soluciones a medida | Soporte en español e inglés | Hablemos sobre tu tienda Shopify
Si resolví tu pregunta, haz clic en Aceptar como solución.
Para soluciones personalizadas, contáctame por correo | luisforero.co@gmail.com
