Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!

How do I perform a HTML include in Shopify pages?

p3can
Tourist
7 0 2

Sorry to post another thread about this but I cannot find an answer to my problem. Perhaps it is explained better here.

 

Is anyone aware of any way to perform a 'HTML include' inside of the content of a Shopify page, i.e. a blog  post?

 

With my previous web site I used to use PHP includes and the process was simple to insert sections of HTML within HTML, from external files, for those pieces of content which are repeated across multiple pages of a web site which you would be able to update by editing only one file.

 

Let's say you wanted to include a DIV at the bottom of a blog post which includes the author's details. You would want to use a HTML include so that if those details changed in the future you could update one file and it would update across all pages.

 

I cannot find a way to do the same thing in Shopify. I've tried various Javascript methods and it isn't playing ball.

 

I know you can include Liquid snippets from within the theme files but I don't think this will work for me since I want to include the HTML in the middle of an article's content and not simply at the bottom of a page where it probably would work.

 

Is this possible?

Replies 11 (11)
oscprofessional
Shopify Partner
13859 2108 2715

Hello p3can,
Yes you can add html content by using blog-template.liquid file.

If you want to add html content at middle you can add it in edit blog code section.

Like this:

<span>test content</span>

If helpful then Please Like and Accept Solution. Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify App | Custom Pricing Wholesale App | Shopify SEO | Digital Marketing | Shopify Strategies Consultant
p3can
Tourist
7 0 2

Thanks for the reply. As I understand it, that does not help me to insert HTML in the middle of a blog post. The template file will make reference to the 'article-content'. Adding code to the template file is only going to allow me to add content above or below the article content and not in the middle of it.

 

Is that correct, and if so do you know how I can include HTML in the middle of a blog post from an external file?

oscprofessional
Shopify Partner
13859 2108 2715

You can also add html at the middle of content.

Write your content inside <> this section.

If helpful then Please Like and Accept Solution. Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify App | Custom Pricing Wholesale App | Shopify SEO | Digital Marketing | Shopify Strategies Consultant
p3can
Tourist
7 0 2

Thanks for the reply.

 

I'm not sure we're fully understanding one another here. I'm aware that I can insert custom HTML in the middle of a blog post using the rich text editor and using the <> function, which shows the code. I know all that.

 

What I'm trying to do is the insert HTML from another file - an external file - in the middle of a blog post. i.e. like a server-side include. 

 

Do you know this might be done?

oscprofessional
Shopify Partner
13859 2108 2715

You can't insert html from another file, you can use html tags only inside that editor.

If helpful then Please Like and Accept Solution. Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify App | Custom Pricing Wholesale App | Shopify SEO | Digital Marketing | Shopify Strategies Consultant
p3can
Tourist
7 0 2

I was hoping someone would come at me with a workaround for this. I know there are Javascript workarounds but I cannot get any of them to work. I stumbled upon a Shopify app which took care of this problem where it allowed you to create content in the dashboard and include it anywhere on the web site by simply inserting a tag in your content like these:

 

[customhtml1]
[customhtml2]

So I know it can be done, I just don't expect to have to pay $9.99 per month for it.

 

I can't be the only person with this problem. Having the same features throughout a site's content is commonplace. To update that content you should not have to go and edit 100's of pages individually, you should edit one file and bam! job done.

adamaaron
New Member
4 0 0

Let me know if you find a while.  I can't believe I've been trying to figure this out for as long as I have today.

adamaaron
New Member
4 0 0

I found an app that works that's only $10 one-time fee.  You still have to do some slightly weird things to get it to work perfectly, but it does the job for now.  Let me know if you want the name of the app, as I'm not sure I'm allowed to promote it.

Tipada
Excursionist
24 0 4

yes you can promote it

Tipada
Excursionist
24 0 4

here is what I do in my product-template.liquid I added the code just above description:

{% unless product.tags contains 'giftcard' %}
{% include 'my-custom-code-added-to-all-pages' %}
{% endunless %}

---------- 

so naturally if you don't have any "unless" issues you can just use:


{% include 'my-custom-code-added-to-all-pages' %}

---------

and then I had to create a snippet called "my-custom-code-added-to-all-pages.liquid"

and simply paste whatever HTML code you want to be displayed, for me it was just this:

 

<div class="text-left">
{{ 'Made in: USA' }}
</div>

-----------

so now for all products that are not giftcards I get a little line above description saying "Made in: USA"

you can use multiple of those

{% unless product.tags contains 'giftcard' %}
{% include 'my-custom-code-added-to-all-pages' %}
{% endunless %}

{% unless product.tags contains 'made-in-china' %}
{% include 'not-made-in-china' %}
{% endunless %}

and so on...

 

Good luck!