Melbourne ecommerce theme - Displaying an Instagram feed on your home page

From Spiffy Stores Knowledge Base

Jump to: navigation, search

From the Theme Settings > Home Page - Instagram widget section, you can enable the Instagram Widget to display Instagram images on your shop's home page.

You will require a Client ID from Instagram before this feature can enabled. You can register for one on Instagram's website

Contents

Getting your Client ID from Instagram

  1. Go to the Instagram website and log in to your account.
  2. Follow this link to the page where you can register a new Client ID
  3. For Application Name, enter "Social Pics of my Products"
  4. For Description, enter "Instagram photos to display on my website"
  5. For Website URL, enter the address of your store (e.g. http://joesgifts.com.au)
  6. For Valid redirect URIs, enter
    http://www.spiffystores.com/instagram
  7. For Contact email, enter your email address
  8. Click on the Security tab, and un-tick Disable implicit OAuth
  9. Click on the Register button and copy the provided Client ID into the Theme Settings.

Enabling the Instagram feed in your store

Once you have registered your client ID, you'll need update your theme settings.

  1. Go to the Design & Assets -> Theme editor section, and scroll down to the Home Page - Instagram widget section
  2. Paste your Client ID from Instagram into the Instagram Client ID field in your Theme Editor
  3. Also paste your Client ID from Instagram into the Instagram Client ID field below on this page, and click the Generate Access Token button
  4. Approve the permissions, and then copy and paste your Instagram Access Token (that should now be displayed below) into the Instagram Access Token field in your Theme Editor
  5. Instagram Widget Title is the title that appears above your Instagram feed on your home page
  6. Enter your Instagram username. It's important to only enter your Instagram username without any special characters. Please do not include the @ symbol with your username or the URL to your Instagram profile.
  7. Number of Images sets the number of images to show. By default it's 12. It should be 2 or 3 times whatever number you set in the Number of Images to display per row field.
  8. Number of Images to display per row is how you can make your Instagram images bigger or smaller. The higher the number, the smaller the images are, and the more that are displayed in the row.


Instagram feed not showing?

As of June 1st, 2016, Instagram now requires the use of an Instagram Access Token. We have already added support for this new Instagram token to your theme. To display an Instagram feed on your home page, you need to generate an Instagram Access Token below, by entering your Instagram Client ID.

Your Client ID should be stored in your Theme Editor, but you can also log in to Instagram to find it.

This token allows the theme to securely access your Instagram profile, for the sole purpose of displaying your Instagram photo feed in your store.




Errors getting your Access Token?

There are only two reasons we are aware of why there should be an error;

  1. You haven't added us to the list of Valid redirect URIs.
    1. Go back to https://www.instagram.com/developer/clients/manage/
    2. Click on the Manage button
    3. Click the Security button
    4. Add
      http://www.spiffystores.com/instagram
      to the list of Valid redirect URIs.
    5. Click the Update Client button
    6. Try submitting the form with your Client ID above


  2. Disable implicit OAuth has not been un-ticked.
    1. Go back to https://www.instagram.com/developer/clients/manage/
    2. Click on the Manage button
    3. Click the Security button
    4. Un-tick Disable implicit OAuth
    5. Click the Update Client button
    6. Try submitting the form with your Client ID above

If that doesn't resolve the issue, we'll need you to submit a ticket providing your Instagram username and password so we can log into your Instagram account and investigate further.


Pictures out of alignment?

The Instagram feed in this theme supports only square images. To modify your feed so that only square images are used, follow the instructions below.

  1. Go back to https://www.instagram.com/developer/clients/manage/
  2. Click on the Manage button
  3. Click the Migrations tab
  4. Un-tick the Non square media option
  5. Click the Update Client button








« The Melbourne theme guide