The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the Instagram Feed Section
The Flex theme includes an option to add your 'Instagram Feed' as a homepage section. These days, social media is a key way to connect with customers, generate awareness, and increase sales. Adding the 'Instagram Feed' to your homepage is a excellent way for your customers to engage with your company and brand.
Adding an Instagram Feed involves generating an Instagram Access Token. The feed can display as a standard width, which will sit in a 'container,' or as wide display which will spread out the feed to be the full width of the screen. On hover, you can choose to display the date the image was posted.
Custom CSS and additional layout options can also be configured for the section.
In order to set up the Instagram Feed, click into Customize (your Theme Editor) > Sections > Add Section > Instagram Feed.
Instagram Feed Section Settings
The 'Instagram Feed' section settings determine the look and layout of this section! The settings are divided into the following areas: general, layout and advanced settings.
The general settings include adding the Instagram token, hover information, a heading and where you can determine the number of images to show.
If you'd like to add a heading above your Instagram feed, you can enter text here! The heading will display with a divider right underneath. You can choose the style of divider by heading into Theme Settings > Elements > Heading Divider. The options are short horizontal, long horizontal and vertical.
Instagram access token
You will need to generate an 'Instagram access token' which can be created by visiting our website. Once you've got your token, you can then add it into this the 'Instagram access token' field.
Show date posted on hover
If you'd like the date of the image to display on hover, you can enable the 'show date posted on hover' setting. This will only display when hovered on desktop.
Images per row
You can decide how many images you'd like to display per row of the Instagram feed with the 'images per row' setting. Choose from 3 - 8.
Number of rows
You can also choose the number of rows for your feed! You can choose between 1 - 4.
The layout settings include options to adjust the spacing and width in this section, and enable animation for when the Instagram Feed section loads in.
The options under the 'width' setting include: 'standard' and 'wide.' Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width.
When enabled, the 'show gutter' setting will add space (margin) in between your Instagram images. If you don't want space between the images and want them to be flush with each other, you can disable this setting.
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
The 'animation' setting will determine how the section 'loads in' . The options for animation are: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' 'slide in left,' and 'slide in right.'
In the advanced settings, you can add in your own CSS class and custom CSS.
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
When viewed on a mobile device, the images in the Instagram Feed will stack, 2 per row. What ever you've chosen for the 'width' and 'show gutter' settings will apply on mobile as well.