Instagram has recently changed their API which is causing problems with our themes. Version 3.5 and later of the theme have fixed this issue. If you have an older version of the ShowTime theme, there are a couple of different ways to go about updating the theme. One of them is fairly easy, one of them is a bit more advanced.

I understand that these instructions may look daunting, and I apologize that there are so many steps, but unfortunately, the API updates were out of our hands, and making this great feature work on your site is more complex than it used to be.

The Easier Way

Perhaps the easiest way to get Instagram functionality back in your theme is to simply install a SnapWidget. This is a highly-customizable Instagram widget that you can install on your own website. It is free to use and has some nice customization options. To create and install the widget, please follow these steps:

  1. Head over to https://snapwidget.com/widgets/create?plan=free&service=instagram&type=grid
  2. Scroll down a bit and you'll see some options to customize your widget
  3. Enter your Username and choose the other options. The background color should match the content background color you've setup in your theme settings, and the "Responsive" option should be set to "Yes"
  4. You can click the "Preview" button to see how it looks, and if you're happy with it, click the Get Widget button.
  5. You will now be presented with a snippet of code to add to your website. Copy all of this code.
  6. Now login to your Shopify dashboard. Click the Sales Channels link on the left side of your Shopify dashboard, then click Online Store > Themes and look for the ShowTime theme.
  7. Click the the ... button and choose Edit HTML/CSS from the drop-down menu.
  8. Open the Snippets folder and look for home-instagram.liquid. Click to open this file in the editor.
  9. Replace all the code in this file with this code. You'll see some placeholder text in there where your SnapWidget code should go. Paste it in there.
  10. Save the file and you're done. Now just make sure that you have the Instagram widget enabled in your theme settings under Home Page and the SnapWidget should show on your home page.

 

The More Advanced Way

1. Click Sales Channels > Online Store > Themes and look for the ShowTime theme.

2. Click the the ... button and choose Edit HTML/CSS from the drop-down menu as shown below.



3. Open the Assets folder and locate the style.css.liquid file. Click it to open it in the built-in editor.

4. Hit Control + F (or CMD + F on a Mac) and search for .instafeed. You should see three references that look like this:

#content .h_row_5 .instafeed {
  list-style:none;
  padding:0;
  margin:30px 0 0;
}
#content .h_row_5 .instafeed img {
  width:100%;
  max-width:100%;
  height:auto;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=100);
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
}
#content .h_row_5 .instafeed img:hover {
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=80);
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
}

Replace all this with:

#content .h_row_5 #instafeed {
  list-style:none;
  padding:0;
  margin:30px 0 0 -25px;
}
#content .h_row_5 #instafeed img, #content .h_row_5 #instafeed video {
  max-width:100%;
  height:auto;
  margin-bottom:25px;
}

#instafeed>.clear:nth-child(4n+1):before {
  content: '';
  display: table;
  clear: both;
}

5. Open home-instagram.liquid in the Snippets folder and replace all the code in that file with the code from this gist.

6. Next, open instagramlite.min.js.liquid in the Assets folder and replace all the code from that file with this gist.

7. Next, open settings_schema.json in the Config directory. Hit Control + F (or CMD + F on a Mac) and search for Instagram Widget. That should take you right to the correct place in the file.

Replace:

{
        "type": "checkbox",
        "id": "use_instagram_widget",
        "label": "Show Instagram widget? ([?](https:\/\/milehighthemes.zendesk.com\/hc\/en-us\/articles\/203710499))"
      },
      {
        "type": "text",
        "id": "instagram_client_id",
        "label": "Instagram Client ID ([?](https:\/\/milehighthemes.zendesk.com\/hc\/en-us\/articles\/203710499))"
      },
      {
        "type": "text",
        "id": "instagram_username",
        "label": "Instagram image user name"
      },
      {
        "type": "text",
        "id": "instagram_number",
        "label": "Number of images to display",
        "default": "8"
      },
      {
        "type": "select",
        "id": "instagram_rows",
        "label": "Number of images per row",
        "options": [
          {
            "value": "6",
            "label": "2"
          },
          {
            "value": "4",
            "label": "3"
          },
          {
            "value": "3",
            "label": "4"
          },
          {
            "value": "2",
            "label": "6"
          },
          {
            "value": "1",
            "label": "12"
          }
        ],
        "default": "2"
      }

With:

{
                "type": "checkbox",
                "id": "use_instagram_widget",
                "label": "Enable feed"
            },
            {
                "type": "text",
                "id": "instagram_client_id",
                "label": "Access token",
                "info": "[Get your access token](http://www.milehighthemes.com/pages/instagram-integration)"
            },
            {
                "type": "select",
                "id": "instagram_number",
                "label": "Total images",
                "options": [
                    {
                        "value": "4",
                        "label": "4"
                    },
                    {
                        "value": "8",
                        "label": "8"
                    },
                    {
                        "value": "12",
                        "label": "12"
                    },
                    {
                        "value": "16",
                        "label": "16"
                    },
                    {
                        "value": "20",
                        "label": "20"
                    },
                    {
                        "value": "24",
                        "label": "24"
                    }
                ],
                "default": "8"
            }

7. Finally, you'll need to ensure that you're logged into your Instagram account, and then generate an access token from Instagram and paste it into the Access Token field in your theme settings area. For versions 3.3 and below, this will be under the Home Page section. For versions 3.4 and later, this will be under Home page - Instagram section.

This should do it. You no longer need to provide your Instagram user name, nor can you select the number of rows that will show. Instead, the images will now show in a four column grid on your home page.

I apologize for the complex nature of these instructions, but unfortunately, the situation was beyond our control.