Instagram Block
To show Instagram Block on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="halo_instagram" class="halo-marketing-banners">
<div class="halo-block halo-banners halo-instagram-gallery">
<div class="container">
<div class="halo-block-header">
<h3 class="title">Follow Us On Instagram</h3>
<p class="description">#BeauticaCosmetics</p>
</div>
<div class="halo-image-instagram disable-srollbar">
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-1-cp.jpg" data-fancybox="instagram_image">
<img
class="lazyload"
title="Image Instagram 1"
src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg"
alt="Image Instagram 1"
data-src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-1-cp.jpg"
/>
<span class="icon_plus">icon</span>
</a>
</div>
</div>
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-2-cp.jpg" data-fancybox="instagram_image">
<img
class="lazyload"
title="Image Instagram 2"
src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg"
alt="Image Instagram 2"
data-src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-2-cp.jpg"
/>
<span class="icon_plus">icon</span>
</a>
</div>
</div>
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-4-cp.jpg" data-fancybox="instagram_image">
<img
class="lazyload"
title="Image Instagram 4"
src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg"
alt="Image Instagram 4"
data-src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-4-cp.jpg"
/>
<span class="icon_plus">icon</span>
</a>
</div>
</div>
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-5-cp.jpg" data-fancybox="instagram_image">
<img
class="lazyload"
title="Image Instagram 5"
src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg"
alt="Image Instagram 5"
data-src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-5-cp.jpg"
/>
<span class="icon_plus">icon</span>
</a>
</div>
</div>
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-6-cp.jpg" data-fancybox="instagram_image">
<img
class="lazyload"
title="Image Instagram 6"
src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg"
alt="Image Instagram 6"
data-src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-6-cp.jpg"
/>
<span class="icon_plus">icon</span>
</a>
</div>
</div>
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-7-cp.jpg" data-fancybox="instagram_image">
<img
class="lazyload"
title="Image Instagram 7"
src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg"
alt="Image Instagram 7"
data-src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-7-cp.jpg"
/>
<span class="icon_plus">icon</span>
</a>
</div>
</div>
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-8-cp.jpg" data-fancybox="instagram_image">
<img
class="lazyload"
title="Image Instagram 8"
src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg"
alt="Image Instagram 8"
data-src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-8-cp.jpg"
/>
<span class="icon_plus">icon</span>
</a>
</div>
</div>
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-6-cp.jpg" data-fancybox="instagram_image">
<img
class="lazyload"
title="Image Instagram 6"
src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg"
alt="Image Instagram 6"
data-src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-6-cp.jpg"
/>
<span class="icon_plus">icon</span>
</a>
</div>
</div>
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-7-cp.jpg" data-fancybox="instagram_image">
<img
class="lazyload"
title="Image Instagram 7"
src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg"
alt="Image Instagram 7"
data-src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-7-cp.jpg"
/>
<span class="icon_plus">icon</span>
</a>
</div>
</div>
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-8-cp.jpg" data-fancybox="instagram_image">
<img
class="lazyload"
title="Image Instagram 8"
src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg"
alt="Image Instagram 8"
data-src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-8-cp.jpg"
/>
<span class="icon_plus">icon</span>
</a>
</div>
</div>
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-5-cp.jpg" data-fancybox="instagram_image">
<img
class="lazyload"
title="Image Instagram 5"
src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg"
alt="Image Instagram 5"
data-src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/instagram-5-cp.jpg"
/>
<span class="icon_plus">icon</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Last updated