Belle Member
January 18, 2017

images in my facebook store

How can I control the order of my images in facebook store I have tshirts and I need the one with the sample loading first the others are just color samples. They load fine in my shopify store but not in the facebook one they get out of order.


Thanks Belle

Mel O Shopify Employee
February 07, 2017

Hi, Belle!

I’m Melissa, a Shopify Guru.

It can be limited with how it will pull the information from Shopify to your Facebook store.Facebook will pull the image that is assigned to the first variant of any given product. This would be known as the primary image and that is what Facebook will use when pulling over the information. 

If you want to make sure the main image is displayed on Facebook, you would need to make sure the first variant displays that image. The easiest way to achieve this is just with the 'Reorder Variants Option' in the Variants section of your Product page. Once the window pops up, you can drag the variant from the main image to the beginning. Once you save that should then be set as the primary image. Please note that the collections on Facebook refresh a couple of times an hour so you will need to give it a chance to update once you've made the change!

Also, another option would be to create products specifically for Facebook - so that you have the control over the image that Facebook picks up to show on the Facebook store. You can set the visibility to only show for Facebook and not the other sales channels.

Hope this information helps! You can reach out to the Guru team  https://docs.shopify.com/support  if you have any questions.

Have a great day!

Melissa | Shopify Guru

5 months ago

The code needs to specify which image is pulled by Instagram.  The problem is this... you have all of the images being pulled for the "og:image" which from this point Facebook has to choose one... 

<meta property="og:image" content="http://cdn.shopify.com/s/files/1/0004/8696/5292/products/BKWH_1_1200x1200.jpg?v=1525027630"><meta property="og:image" content="http://cdn.shopify.com/s/files/1/0004/8696/5292/products/1_6b70e251-5ce1-44aa-b2f0-aa7eab7cf68d_1200x1200.jpg?v=1525027631"><meta property="og:image" content="http://cdn.shopify.com/s/files/1/0004/8696/5292/products/1B_9561768f-4fef-4104-8c78-5b1e2e237f56_1200x1200.jpg?v=1525027631">


What needs to happen is that only the 1st image should be pulled by Facebook and the code should only display one image for the "og:image" instead of ALL of the images and variants.  The code is the problem, NOT Facebook!

Code needs to be able to specify the Facebook Share image if desired so that:

If og_image = image.jpg, then display: og:image "image.jpg"

5 months ago

I was able to limit the share image to 1 image instead of all the variants.  Now it will ONLY select the Featured Image as I've desired using this:


 {%- capture og_image_tags -%}{% for image in product.images limit:1 -%}<meta property="og:image" content="http:{{ product.featured_image | product_img_url: '1200x1200' }}">{% endfor -%}{% endcapture -%}
    {%- capture og_image_secure_url_tags -%}{% for image in product.images limit:1 -%}<meta property="og:image:secure_url" content="https:{{ product.featured_image | product_img_url: '1200x1200' }}">{% endfor -%}{% endcapture -%}

However, Facebook is still not pulling the correct image for facebook shop.... UGHHHHH

about 1 month ago

Did anyone ever find a good solution to this?  I am dealing with this same problem now.  Facebook is displaying a variant image instead of the main product image I have chosen.