STOP! See updated blog post here. Please note that Shopify has discontinued the Shopify Widgets completely. It has been replaced with the “Buy Button“. The instructions below will not work. Per Bob S. of Shopify via Chat this morning at 9:09AM EST:
Bob S: Just heard back and it appears the Buy button has replaced the widget. I asked about still being able to use it going forward but the entire option has been deprecated so it’s been pulled completely. Unfortunately, there’s no way to use it.
Over the past week I have been assisting a new client with migrating her site from Blogger to her self-hosted WordPress website. The client selected the Adorn Child Theme for the Genesis Framework which is an eCommerce theme using Woocommerce. My client decided to use Shopify.com for her shop instead. The instructions for adding the shop seem pretty straight forward to “me” however, for a noobie – it might not seem that easy. So I decided to write this tutorial on how to add your shop to your Genesis Child Theme.
Integrating Shopify – Note – do not attempt to follow these steps until your shop has been set up with products. The widgets are “product” dependent and you will need to select what products you’d like to showcase in your shop on your WordPress website.
- Log in to your Shopify account.
- Scroll down and click Apps from the left navigation.
- In the search box, type in Shopify Widgets.
- Click Shopify Widgets and then Install it.
- You will then see the “Pick a Widget” screen and you want to select “Embed a Shop.”
- The first screen is where you will need to put a check mark in the products you want in the shop. Once you do that, select Get Embed Code.
- Now, you will see instructions in there. Read them. Then select Get Embed Code.
- Copy the embed code.
Here’s the tricky part where a lot of people are getting confused. The embed code is not like your traditional embed code, i.e., copy and paste the code to a page or post. It doesn’t work that way. Item 2 of the embed instructions states you must put this code in between the head tags. In the case of the Genesis Framework, you will need to take your code and put it in the “header” of your site. Now, I guess you are wondering where the header is located, right?
Go to Genesis > Theme Settings. Scroll all the way to the bottom and you will see a box labeled “Header & Footer Scripts“. The first box is the header and the second box is the footer.
Take your embed code from Shopify and paste it in the header box. Then save it.
Now how do you get it to show up? To add it to your navigation with a tab labeled, let’s say “Shop” – move on over to Appearance > Menus.
- Click Screen Options in the top right corner of your screen.
- Make sure the “Links” box is checked, then click Screen Options to close it.
- Open the menu you wish to add the Shop tab to.
- Click on Links. When it opens up – add “#shopify-store” in the URL field. In the Navigation Label add the word “Shop.” Then click Add to Menu and save it (be sure to save!).
Now, go to the front of your website and click Shop and your store should pop up in a lightbox. If your site is in maintenance mode, it may open up in a new window. Take it off maintenance mode, click Shop and it should appear in the lightbox.
Lastly, if you add new products, you will need to update your widget embed code so that you can include those new items on the website.
I hope you found this tutorial helpful!
Winson Teo says
Now that shopify updated the widget to the “buy button”, are we still able to use the steps you described?
Anita C says
I am checking with Shopify technical support now. This is the response I received from the representative. I’ll have to post this message at the top of my blog. Thank you for bringing this to my attention.