1. Instagram Widget Configuration

2. How to display the featured image or featured video of a blog post?

3. Material v1.3 to v1.4 - a full list of edited files

4. How to setup the Color Swatches for custom colors?

5. How to setup Advanced Group Filtering?

6. Fastor Header Types

1. Instagram Widget Configuration

Most of our Shopify themes, there is a beautiful widget called Instagram Feed. To use this useful feature, you have to provide some of your Instagram information via Theme Settings, just like this:

(If you are using Fastor Theme, please watch Fastor Social Widgets Configuration)

Unfortunately, Instagram has just made some changes in their API so it can make the Instagram Feed stop working. 

This article is about to guide you how to get the right info of Instagram Client ID, Instagram Access Token and Instagram User ID

1. Instagram Client ID: 

Actually, this is optional and you can totally leave it blank :)

2. Instagram Access Token:

To get this, please go to then click on Generate Access Token. You will be required to log into your Instagram account to process this. 

This tool does not have access to your Instagram tokens, nor does it intend to use them or your photos for any purpose.

3. Instagram User ID:

The Instagram User ID is the first part of the Access Token which is separated by a dot. For example if your access token is:


then your Instagram User ID will be:


Best Regards,
RoarTheme Support Team

2. How to display the featured image or featured video of a blog post?

If you want to display the featured image of a blog post, like this:

Please follow this instruction:
- Go to the blog post in Admin for editing it
- Scroll down finding a link named "Add excerpt" and click it, like this:

- Click "Insert Image" and choose your image, like this:

- In case you want to put a VIDEO, first please get the embedded code of the video (YouTube or Vimeo), then click <> icon to switch to HTML mode and PASTE the code, like this:

- Save the changes.

Hope this helps!
RoarTheme Support Team.

3. Material v1.3 to v1.4 - a full list of edited files


Please make sure that you back up your current theme before making any changes in the source code. It's recommended that you must have good knowledge at web development (HTML/CSS/JS/liquid).

When you edit the source code, please keep in mind that you are doing at your own risk. RoarTheme are NOT responsible for any damages you caused.

Here is the full list of edited(E)/added(A) files in Material v1.4 (upgrading from v1.3)

assets > audio.min.js (A)
assets > audiojs.swf (A)
assets > myfont.otf (A)
assets > myfont-bold.otf (A)
assets > player-graphics.gif (A)
assets > (E)
assets > rt.password.scss.liquid (E)
assets > (E)
assets > snow1.png (A)
assets > snow1-hot.png (A)
assets > snow1-cold.png (A)
assets > snow2.png (A)
assets > snow2-hot.png (A)
assets > snow2-cold.png (A)
assets > snow3.png (A)
assets > snow3-hot.png (A)
assets > snow3-cold.png (A)
assets > xmas_music.mp3 (A)

config > settings_schema.json (E)

layout > theme.liquid (E)

snippets > collection-item-below-title.liquid (A)
snippets > collection-slider.liquid (E)
snippets > footer.liquid (E)
snippets > header.liquid (E)
snippets > home-slider.liquid (E)
snippets > product-promo-block.liquid (E)
snippets > rt-music.liquid (A)
snippets > promo-block.liquid (E)
snippets > static-block.liquid (E)

templates > index.liquid (E)

4. How to setup the Color Swatches for custom colors?

If you want to setup swatches for custom colors, like this:

Please upload an image (50x50 pixels, PNG format) with the color you want into Assets

Please note that the image file name must match the color.

For example, if you have a color called 'Burgundy', then name your image burgundy.png (all characters must be in lower case)

If you have a color called 'Déjà Vu Blue', then name your image deja-vu-blue.png

Other example, if your color is 'Blue/Gray', then name your image blue-gray.png

Most simple example, if your color is 'Black', the name your image black.png

Best Regards,
RoarTheme Support Team.

5. How to setup Advanced Group Filtering?

Here is the instruction of enabling Advanced Group Filtering

1. Define your groups. For example the groups are Size, Price, Color

2. In Admin Panel, export your products into a CSV file.

(If you are creating new products, you can skip this step)

3. Prepend all existing tags with what group you want them to be in, with the format Group_Tag Name

For example, we would have tags like Size_Small, Price_100$ - 200$, Color_Red ... and so on

The left side of the underscore is the group name, and the right side is the tag for the product. Spaces can be included on either side of the underscore

You can check example here

4. Save your .csv file and import the products back into your store.

Make sure you check "Overwrite existing products that have the same handle" when uploading the file to prevent duplicate products from being created.

In case you have less products, you can do this manually by go to your products, one by one and editing the tags. This way you don't have to do "export/import"

6. Fastor Header Types

Fastor comes with 29 header types: