How to set custom meta image for different pages?

How to set custom meta image for different pages?

SandyChan
Tourist
6 0 2

Dear all, 

 

Firstly I'm using non-shopify theme, and I managed to set different products image for different products like following:
file: [theme.liquid]
<meta property="og:image" itemprop="image" content={{ product.featured_image.src | img_url: '600x600' }}>

But some pages like collections/AAA and collections/BBB don't have product.featured_image.src, how can I keep showing products image for products pages, while showing other images for collections/AAA and collections/BBB?

 

I tried something like following but not working:
{% if page_title == 'AAA' %}
<meta property="og:image" itemprop="image" content="https://cdn.shopify.com/s/files/xxx.jpg"
{% endif %}

{% if page.url == 'collections/AAA' %}
<meta property="og:image" itemprop="image" content="https://cdn.shopify.com/s/files/xxx.jpg"
{% endif %}

 

Thanks

 

Reply 1 (1)

PaulNewton
Shopify Partner
7746 679 1617

Hi @SandyChan 👋


But some pages like collections/AAA and collections/BBB don't have product.featured_image.src,

 

A product is not a collection , if you want to work with a collection you refer to the collection not a product.

 

Use the docs to find different properties for different objects

https://shopify.dev/docs/api/liquid/objects/collection#collection-featured_image

 

Use the objects handle , or the routes object,  for conditionals based on the url

https://shopify.dev/docs/api/liquid/basics#handles 

https://shopify.dev/docs/api/liquid/objects/routes 

i.e. {% if collection.handle == "some-collection-handle" %}....

 

Good Hunting

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org