How can I customize Facebook and Twitter share on Shopify home page?

In this tutorial, we will talk about how to customize the facebook share image on your Shopify store home page.

This method need to do some copy and paste on codes. If you need more help, please contact us via [email protected]

1. First, you need to find your current theme's liquid file.

1.1 Go to "https://[YOUR-SHOP-URL]/admin/" , remember to replace '[YOUR-SHOP-URL]' with your own shop's uri. Then you will enter the admin.

On the left side menu, click ' Online Store'.

1.2 Then, find your current theme, and on that theme's top right corner, click ' Customize Theme'.

1.3 On the left side menu, click the theme's name and then click ' Edit Code'.

1.4 Find the ' Snippets' folder and click it.

1.5 Find the 'social-meta-tags.liquid' and click it. Now you have find the target file.

PS: If you can't find your "social-meta-tags.liquid" file here, please jump to this tutorial.

1.6 Now, before go the next step, backup this file first. Save the whole social-meta-tags.liquid to a txt file or somewhere else.

2. Now add the code to the file.

2.1 Prepare your code:

<!-- SEO Product Optimizer: Homepage Share -->
{% if template == 'index' %}
  <!-- Facebook Share -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="{{ page_title }}">
  <meta property="og:description" content="{{ page_description }}">
  <meta property="og:image" content="[THE IMAGE URL]">
  <meta property="og:image:secure_url" content="[THE IMAGE URL]">

  <!-- Twitter Share -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="{{ page_title }}">
  <meta name="twitter:description" content="{{ page_description }}">
  <meta name="twitter:image" content="[THE IMAGE URL]">
{% endif %}
<!-- SEO Product Optimizer: Homepage Facebook Share - END -->

Replace the [THE IMAGE URL] with the image url that you want to display on your facebook share.

For example, here if i am using this image:  https://cdn.shopify.com/s/files/1/1498/3202/products/Longasands_Stay_Salty_1024x1024.jpg?v=1477296542

Then, i should paste the following code to the liquid file:

<!-- SEO Product Optimizer: Homepage Facebook Share -->
{% if template == 'index' %}
  <!-- Facebook Share -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="{{ page_title }}">
  <meta property="og:description" content="{{ page_description }}">
  <meta property="og:image" content="https://cdn.shopify.com/s/files/1/1498/3202/products/Longasands_Stay_Salty_1024x1024.jpg?v=1477296542">
  <meta property="og:image:secure_url" content="https://cdn.shopify.com/s/files/1/1498/3202/products/Longasands_Stay_Salty_1024x1024.jpg?v=1477296542">

  <!-- Twitter Share -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="{{ page_title }}">
  <meta name="twitter:description" content="{{ page_description }}">
  <meta name="twitter:image" content="https://cdn.shopify.com/s/files/1/1498/3202/products/Longasands_Stay_Salty_1024x1024.jpg?v=1477296542">
{% endif %}
<!-- SEO Product Optimizer: Homepage Facebook Share - END -->

If you want to change the share title and description, go to "https://[YOUR-SHOP-URL]/admin/online_store/preferences" , remember to replace '[YOUR-SHOP-URL]' with your own shop's uri. And edit the "Title and meta description" part.

2.2 Cautious: 

(1). The image should be large enough. At minimum, it should be 600 x 315 pixels. On high resolution device, the image should be at least 1200 x 630 pixels for the best display.

(2). The image cannot be too large, its maximum size is 8 MB.

(reference:  https://blog.bufferapp.com/ideal-image-sizes-social-media-posts#facebook)

We are almost there!

3. Remember to press 'SAVE' button on the top right corner!

4. Go to facebook debugger, input your shop home page's url and press 'Scrape', then you can preview your facebook share on home page. You can also go to twitter debugger and input your home page url to check your change.

(If you haven't shared you home page before, you may be need to press the 'Scrape' button again, after the first time)

Woohoo you've finished!

If you have further questions, please email us via [email protected]

If you want to customize each product's facebook share image, please try our app. Now it is still in beta and is FREE to use!

Still need help? Contact Us Contact Us