Sometimes, when you have a light colored logo because your storefront / site has a dark colored background, this can make your shared image difficult to see.

The good news is that you can fix this with a couple simple steps!

The below the code will set the same image for your entire site. If you only want to change the image for the Home Page, you must change this via the Code Editor in the _seo.liquid file, which does require liquid knowledge. If you are not familiar with HTML and Liquid, please refer to: Hiring a Developer for Advanced Custom Changes

Step 1: Choose or create a darker colored background/logo image.

Step 2: Upload your new logo image to your assets.

Step 3: Copy the new url of the image you just uploaded and paste it somewhere where you will have easy access to it for a future step.

Step 3: Navigate to Customizations > Advanced > Code Snippets.

Step 4: Add the following code to your Head Code Snippets section:

<meta property="og:image" content="URL">

<meta name="twitter:image" content="URL">

Step 5: Replace the two URL's in Step 4 with the url of your newly uploaded logo image.

Step 6: Click Save Changes.

Step 7 (optional): If you are using a Facebook Developer account, you can debug the image (https://developers.facebook.com/tools/debug), by using Facebook Debugger and clicking on Scrape or Scrape Again, depending on whether you just scraped your site's url. This should help Facebook retrieve the updated image quicker.

Did this answer your question?