I don't get the custom HTML section

Español Debates Preguntas y respuestas técnicas
, ,
1

I want to add an external iframe to my home page but the custom HTML section does not appear in the new section. How do I create it and then what should I do to add the inframe?

Iframe instructions

To use our iframe you need to include some javascript on your website. This can be added in your or just before the closing tag.

After you have added the above to your website you can start including the iframe using the following code:

2

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:

  {{ section.settings.custom_html }}

{% 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 or tag:
    • If you want it in the , look for .
    • If you prefer it before the closing , scroll to the bottom and find .
  • Just before that tag, paste this Javascript:
  • 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

  • Ensure the iframe URL (https://tuning-shop.com/iframe/iframe.php?user=*******) is valid and your user parameter is correct.

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!