Theme Gallery Guide
This support article explains how to manage themes in your store's theme gallery. It covers the differences between the Theme Applied, which is the...
This component allows you to display the latest posts from the Instagram account that can be connected to your store.
If you don’t have it connected yet, please follow the next steps to achieve it:
- First, make sure that you are logged in to the Instragram account you own to connect, in the same browser where you have your store’s admin panel opened.
- On your store’s admin panel go to
Settings > General > Preferences > Social Mediaand click on the “Edit information” button that’s within this section. - Inside the new page you will be taken to, click on the
Instagram Loginbutton that’s further down at the end. - You will be redirected to a new page where you need to accept and authorize the connection.
- Once it’s approved, your posts will be displayed automatically on the component.
Note: It may happen that at times you Instagram account gets disconnected, which is mostly for security purposes. Whenever that occurs, you can just follow the steps above and connect it back again.
The component will not be displayed on the storefront if there isn’t an account connected, but you will be able to visualize a preview of it on the Visual Editor.
Next is the full list of component options so you can customize how it looks and behaves.
Amount of posts
Allows to define the maximum amount of posts that will be displayed in the component.
Title
Title that displays before the account name (e.g. @my.store).
Space between
Allows you to define if there will be a visible space between posts.
Note: this option will only be visible and available to be used if what’s defined at the Spacing option in
Theme settings > Design > Theme stylesis any other thanNone.
Display
Allows to define if the component content will be displayed within a section of type Carousel or Grid.
You can read more about the differences between these two types on this page.
The amount of columns on which posts will be displayed will vary depending on what you choose here, as it follows:
Carousel
| Device width | Amount of visible posts |
|---|---|
| ≥ 1201px | 6 posts |
| ≤ 1200px | 5 posts |
| ≤ 991px | 4 posts |
| ≤ 767px | 3 posts |
| ≤ 414px | 2 posts |
Grid
| Nº of posts | ≥ 992px (Desktop) | ≥ 768px (Tablet) | ≥ 576px (Small tablet) | ≤ 575px (Mobile) | ≤ 414px (Small mobile) |
|---|---|---|---|---|---|
| 6 posts | 6 columns / 1 row | 3 columns / 2 rows | 3 columns / 2 rows | 3 columns / 2 rows | 2 columns / 3 rows |
| 8 posts | 8 columns / 1 row | 4 columns / 2 rows | 4 columns / 2 rows | 2 columns / 4 rows | 2 columns / 4 rows |
| 12 posts | 6 columns / 2 row | 4 columns / 3 rows | 3 columns / 4 rows | 3 columns / 4 rows | 2 columns / 6 rows |
Carousel settings
This group of options will become visible when you choose Carousel, and they will allow you to customize its behavior.
You can find the full list of options in this page.
Heading options
By enabling this, a Heading section will be displayed before the component’s content. You can find the list of options in this page.
Appearance
This group contains the following options to customize the component:
- Top margin: allows to control the upper margin of the section.
- Bottom margin: allows to control the lower margin of the section.
- Content colors: allows to choose the Color Pack for the component.
Animations
The Customize options allows to adjust the animations for this specific component. You can read which ones are available in this page.
