Skip to content

Instantly share code, notes, and snippets.

@joe-dempsey
Last active December 14, 2023 08:27
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save joe-dempsey/3b7fc7109a07c633c7fd5da22d5d462e to your computer and use it in GitHub Desktop.
Save joe-dempsey/3b7fc7109a07c633c7fd5da22d5d462e to your computer and use it in GitHub Desktop.
Shopify product richsnippet - structured data markup for Shopify product templates
{% assign current_variant = product.selected_or_first_available_variant %}
<div id="richsnippet">
<div itemscope itemtype="http://schema.org/Product">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
<meta itemprop="name" content="{{ product.title | escape }}">
<meta itemprop="description" content="{{ product.description | strip_html }}">
{% if product.vendor %}<meta itemprop="brand" content="{{ product.vendor }}">{% endif %}
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<meta itemprop="price" content="{{ current_variant.price | money_without_currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<meta itemprop="seller" content="{{ shop.domain }}">
<meta itemprop="itemcondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition" />
</div>
</div>
</div>
@joe-dempsey
Copy link
Author

Read the full article on richsnippets for Shopify here.

@henrybarn
Copy link

Most Shopify sites are using canonical URLs today. Should product.selected_or_first_available_variant actually be product.first_available_variant since search engine links will only land on the first variant. The canonical URLs say shopifysite.com/products/product-handle and shopifysite.com/products/product-handle?variant=800 are the same result.

@toledox82
Copy link

toledox82 commented Apr 20, 2018

If the price is above 999, it will cause warning on testing tool, so need to add this string filter remove: ","

This line 14 will be:
<meta itemprop="price" content ="{{current_variant.price | money_without_currency | remove: ","}}">

@joe-dempsey
Copy link
Author

joe-dempsey commented May 1, 2018

product.first_available_variant and product.selected_or_first_available_variant will return the same for google bot - assign either.

I'd actually use a remove/replace function to format currencies which use a comma if google don't like that.

{{ current_variant.price | money_without_currency | remove: "." | replace: ',', '.' }}

most countries use the decimal - but easy to modify - this is just a guide

@joe-dempsey
Copy link
Author

joe-dempsey commented Nov 21, 2018

one addition is
<meta itemprop="itemcondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition" />

@rkvisai
Copy link

rkvisai commented Jul 19, 2019

I'm still getting warnings for missing SKU

@Spika-SEO
Copy link

Note the Google prefers JSON and not itemprop

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment