How to use a common header across subdomains

Question

I have two sites, on two different platforms. One is on Wordpress, it lives at blog.example.com. The other is on Shopify, it lives at shop.example.com.

They both have the same header.

What is the best way to have the header code live in one place and have the header included on both sites? The only way I can think of off the top of my head is an iframe, which doesn't seem like the right idea.

Anyone have a way to do this?

Answer 1

The best approach will be to manage the header from one platform Shopify or Wordpress and get it from the other via AJAX ( if you allow CORS on the WordPress side) or using a crawler.

---

Since WordPress is more robust when it comes with custom back-end logic I recommend managing the Header from Shopify and crawling it from WordPress in order to use it. (have in mind that the links must be absolute, not relative)

---

If you plan to manage it from WordPress and if the CORS is not enabled, you will need to create custom App that will have to craw the WordPress site and get the header. From there depends how you like to store the header:

• create a snippet via the Assets API and update it manually with a sync button or cron job
• create a proxy app page that you will request and will return the header markup

---

TLDR; the easiest solution will be to make an AJAX request from the Shopify site to the Wordpress site and get the HTML, if you enable CORS on your wordpress hosting.