Change your page thumbnail

This article will explain what a thumbnail is and how you can change your sub pages’ thumbnail pictures right from inside the Editor.

What is a thumbnail image?

Every website has a preview image that is used as a placeholder whenever the page URL is shared on a social media platform (i.e. Facebook, Twitter, etc.) – this is called a thumbnail, or a featured image.

With GemPages, you can easily update your subpage’s thumbnail right from inside the Editor using the Page Settings panel, just like any other page type on Shopify.

Change your thumbnail in GemPages

Step 1: Go to your GemPages Dashboard > Landing Pages, select one of your pages to open the Editor.

Step 2: In the Editor, click on the 3-dot icon and open the Publish Settings panel.

Step 3: In the Social sharing tab, you will see the current featured image of the page.

Step 4: Hit “Upload Image” and choose an image from your local device.

Step 5: Hit “Save” and exit out of the Page Settings panel.

Still fancy coding? Follow this method instead

We recommend contacting our GemPages Support Team to get assistance with changing your sub-page thumbnail. Because this is an advanced solution that will modify your theme’s code, and since each theme has its own code structure – the required steps could vary from theme to theme.

For reference, we’ll go over an example using the Debut theme. Please keep in mind that the steps below might be different for other themes.

Prepare necessary links

Step 1: Go to your Shopify Admin > Settings > Files and hit “Upload files” to upload your thumbnail image to Shopify’s Content Delivery System (CDN).

Step 2: Once your image is uploaded, click on the chain icon to get the URL of the image for later use.

Step 3: Open your page that needs a new thumbnail. Copy the URL handle for later use.

Modify the theme code

Step 1: Go to Shopify Admin > Online store > Themes > Actions > Edit Code.

Step 2: After that, look for the file “theme.liquid” under the Layout section or via the search bar. Open the file to look for the “social-meta-tags” mini file, click on the right arrow button next to the file to open it in another tab.

Step 3: Copy this code and paste it into the social-meta-tags files:

 {{9ea1a9982572377d1351b1ee381ce3c79f845f8b385acd5af084e202d738581f}if page.url == 'XXXXX'{9ea1a9982572377d1351b1ee381ce3c79f845f8b385acd5af084e202d738581f}}
<meta property="og:image" content="YYYYY">
  <meta property="og:image:secure_url" content="YYYYY">
{{9ea1a9982572377d1351b1ee381ce3c79f845f8b385acd5af084e202d738581f}endif{9ea1a9982572377d1351b1ee381ce3c79f845f8b385acd5af084e202d738581f}}

In which:

XXXXX is the URL handle of your live page

YYYYY is the URL of your thumbnail image uploaded to Shopify CDN.

Step 4: Hit “Save” and exit the page

Double-check your hard work

To check if the thumbnail you changed has been updated successfully or not, there are two methods.

Method #1: Using Facebook Sharing Debugger

Sharing Debugger is Facebook’s tool to help you check and see how your page will preview when shared on social media platforms.

Step 1: Go to Facebook Sharing Debugger and log in with your account.

Step 2: Paste your page URL into the field and hit “Debug”

Step 3: After a few seconds, when the results return – scroll down to the Link Preview, this is an exact demonstration of your URL Preview when posted. Check and see if the thumbnail has been updated.

Method #2: Check the page’s source code.

Step 1: Open your live page on the browser

Step 2: Right-click on the page to open the browser’s options, and select “View page source” or hold down CTRL + U (Cmd + U) keys.

Step 3: The page source will open in a new tab, hold down CTRL + F (Cmd + F for MacOS) to open the browser search box

Step 4: Please type in “og:image” to look for the code you put in earlier. If you see the same code along with the URL, this means you have succeeded.

You can also copy the URL and paste it into a new browser tab to check for the image.