How to change your Subpage 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 > Sub Page, select one of your pages to open the Editor.

 

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

 

 

Step 3: In the General tab, scroll down to the Social sharing section, 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:

 

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

 

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.

 

If you are not comfortable with editing your theme’s code, please contact our GemPages Support Team to receive professional assistance.

We can be reached at any time via email or live chat.


Was this helpful?