Integrating WordPress and Shopify

A question has been posed, and I’m always happy to oblige my readers. So – how did I merge my WordPress blog with my Shopify website?

I’ve heard rumors of Shopify apps that will import the contents of your WordPress blog to your Shopify site, but they were either paid apps, a one-time transfer, or, based on the reviews, just plain non-functional. I opted instead to completely remove the blog portion of my Shopify layout, remove all additional pages from my WordPress layout, and link the two together using the navigation bars.

Step One: Find similar themes on WordPress and Shopify.

For me, this was the hardest part. You’ll need to find themes on WordPress and Shopify that flow together – you won’t get  two that are exact, but you can match elements such as the header, navigation bars and colour schemes to achieve the a nice flow.

I’m using the WordPress theme Gateway, and the Shopify theme Minimal, with plenty of changes to both to ensure they work well together.

You can see the same set up on J.A. Konrath’s website, though he uses Blogspot for the blog portion, and I’m-not-sure-what for the website portion. The layouts are not identical, but they are similar enough not to be jarring, and most importantly, they link together – which is what we’ll be doing next.

Step Two: Remove any additional pages and adjust your navigation on WordPress.

Once your WordPress blog is integrated into your Shopify layout, you’ll no longer need any additional pages you may have created through WordPress. My original WordPress blog had pages for book lists and contact info – that’s all gone now, leaving my WordPress as a single blog page.

Once you’re working with a single page, return to the Dashboard, select Appearance, and then Menus. Here you’ll find a Menu Structure editor, which is how we will link our blogs back to Shopify.

First, if there are any links to old WordPress pages in your navigation, remove them now. You’ll want to start with an empty menu. Once there, you can begin adding links using the Custom Links option to the left – you’ll want this navigation to match your Shopify navigation exactly. Add as many links as you have in your Shopify navigation, name them in exactly the same way, and link them to exactly the same pages.

For me, this means having links for Home, Catalogue, About the Author, and Blog, with the first three linking to Shopify pages, and the last, of course, linking to WordPress. Once this is complete, your visitors will be able to view your website directly from your blog – now you just need to make sure they can make it back.

Step Three: Remove your blog and adjust your navigation on Shopify.

One of the great things about removing your blog from Shopify this way, especially if you’ve been using it for a long time, is that your old blog posts are safe – my Shopify blog can even still be accessed if you have the URL, just not through the main site navigation.

To remove your blog, enter the Shopify Dashboard. Under the Online Store tab, choose Navigation. There, you’ll see options for both the main menu and the footer, unless you have either of them disabled/renamed. Click ‘Edit Link List’ in any list that includes a link to your blog, and more options will become available.

Where “Blog” is listed under ‘Link Name,’ change the ‘Links To…’ option to “Web Address” in the drop down bar. In the space provided, enter the exact URL of your WordPress blog.

That’s it! Your main navigation will now link to your WordPress blog rather than your Shopify blog – and since we’ve already reformatted your WordPress to link back to your Shopify page, the two sites are now integrated to work as one.

…I bet you thought it was a lot more complicated.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s