Reduce Instagram feeds displayed

Solved
Tourist
14 0 0

Hi,

Is there any way to reduce the number of Instagram feeds displayed on the site? I really wish that there're just 6 or 8 big images displayed there.

Has anybody already faced the same issue? If so, can you help me with that?

Thank you in advance

P/s: Here is my site gemour.com

KateCapture.JPG

 

 

0 Likes
Shopify Expert
96 17 12

@gemour - I think I may be able to help ;)

 

- What theme are you using?

- Is the instagram feed embedded into the theme or was it added via an app?

- If an app, what is the name?

0 Likes
Tourist
14 0 0

Hi 

 

 

0 Likes
Highlighted
Trailblazer
548 134 176

Hi, @gemour ,

 

This is Evita from On The Map.

 

I don't see any options to reduce image count, we could add a code that doesn't show the last line.

 

#instafeed a:nth-child(7),#instafeed a:nth-child(8), #instafeed a:nth-child(9),#instafeed a:nth-child(10),#instafeed a:nth-child(11),#instafeed a:nth-child(12) {
     display: none!important;
}

1. https://prnt.sc/p81qx6

2. https://prnt.sc/p81r8w

 

And that's it, hope it helps :)

 

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Tourist
14 0 0

Hello,

Thanks for your help!

Still, I really want the site to look balanced with 2 image lines, each with 4 images. So is there any way to do that?

Thanks in advance!

Best

Kate

0 Likes
Trailblazer
548 134 176

You want it to look like this: https://prnt.sc/p83l7i ?

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Tourist
14 0 0

Yeah, but a bit smaller would be great!

0 Likes
Trailblazer
548 134 176
#instafeed a:nth-child(9),#instafeed a:nth-child(10),#instafeed a:nth-child(11),#instafeed a:nth-child(12) {
     display: none!important;
}

#instafeed a {
    // You can play with the calc and see what size you want the images to be.
    width: calc(80% /4.4);
}

#instafeed {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    justify-content: center;
}

Here you go!

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Tourist
14 0 0

Hi,

Thanks for your help, I tried it but the whole feed disappears. Maybe there's something wrong with the way I insert your code on, please see images below:

Best,

Kate

 

Capture 1.JPGCapture.JPG

0 Likes
Trailblazer
548 134 176

You added the code in the wrong file, add the code to assets/theme.scss.liquid

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes