If you have a Product in Shopify with multiple variations, one for each color for example - you may have noticed that when linking to this image from a Sauce Product tag, you only see the product featured_image, which is the image for the first product variation in the list in Shopify.
This is how most Shopify themes are built to work, and you'll find the same situation when trying to share a link to the product variation through other mediums, such as when posting to Facebook. In many cases this might be ideal, but should you want Sauce (and other platforms) to specifically use the image for the variant URL you've used, follow these steps:
NOTE: please proceed with caution when modifying code for your theme - ensure you are comfortable modifying code or know someone who is. Be sure to take notes on what you change - to help should you need to reverse the change.
1️⃣ Head into your Shopify Theme Code Editor
You'll find this section under the 'Actions' dropdown of the 'Online Store > Themes' section in the sidebar of your Shopify backoffice:
2️⃣ Click to edit the file which contains renders OG tags
The exact file will likely vary depending on your theme. On the Shopify Debut theme, the file is social-meta-tags.liquid. You're looking for the og:image line, which may alternatively appear in a file such as header.liquid. To help locate the file, you may want to download your theme code or use a browser extention such as 'Shopify Theme Search' for Chrome which provides a helpful feature to search across all of your theme files.
3️⃣ Override the page_image variable to be your product variant image
Now, locate where the og:image is rendered, and it'll likely be within an if block which checks that a page_image is available. By default the page_image is the 'featured image' for the product, but we want to change this to be the image for the current variant selected.
So above this block of code, paste in the following:
{%- assign current_variant = product.selected_or_first_available_variant -%}
{% if current_variant.featured_image %}
{% assign page_image = current_variant.featured_image %}
{% endif %}
Note that if your theme code differs significantly from what you see below, the step you need to carry may vary. Please speak to your theme developer if unsure. The result should look as follows:
Be sure to Save changes, and you're done!
You can confirm your changes by visiting the Product Variation URL (via the URL obtained via this article) and viewing the page source. Note that if you have already used this URL for a Product Tag in Sauce, you may need to head into your Account Details section and refresh your Product Tags.
Need further help? Reach out to us at support 👍