Twitter card images too big

New Member
19 0 0

I was trying out the share on twitter button on my product page in debut theme. The image is extremely big. I also looked at the card validator https://cards-dev.twitter.com/validator and entered my link https://seasprayjewelry.com/collections/necklaces/products/silver-knotted-multi-chain-lariat-necklac...

I looked at the social-meta-tags.liquid in Snippets section but changing those values didn't work.

Can someone tell me how to change the image resize for the twitter cards?

Thanks

0 Likes
Highlighted
New Member
19 0 0

Bump

0 Likes
New Member
19 0 0

Can someone give me a suggestion please?

Any help would be appreciated.

Thanks

 

0 Likes
New Member
19 0 0

I also noticed that if you have multiple images for a product and click the twitter share link the twitter card shows the last image in the list and not the primary.

How do I change this too?

Thanks

0 Likes
Shopify Partner
65 0 2

The page is loading this image as the twitter link preview, but twitter requires 2:1 width to height rectangle banner as the link preview image.

I guess your theme has been set to use the last image as the link preview image. 

If you want to edit link preview for each product, you can try my app

http://cdn.shopify.com/s/files/1/0003/5179/7308/products/Untitled_design_10_9de1c832-8500-40a7-ac9e-...

0 Likes
Shopify Partner
14 4 3

Hi SeaSpray,

To change your twitter share thumbnail size to a summary card just for products you can replace this code in your social-meta-tags.liquid

<meta name="twitter:card" content="summary_large_image">

with this:

<meta name="twitter:card" content="{% if template.name == 'product' %}summary{% else %}summary_large_image{% endif %}">

What you see in the twitter card validator is how shares will look in the twitter feed on desktop. On a mobile device a twitter summary card and summary_large_image card look very similar. Worth considering since 80-85% (according to statistics) of twitter users access the platform via moblie.

If you only want to show the first or product feature image the easiest way is changing this code:

{% for image in product.images limit:3 -%}

Change to this:

{% for image in product.images limit:1 -%}

It will be two places in the social-meta-tags.liquid

0 Likes
New Member
19 0 0

Hi Paul

Thanks for the reply. I tried both your suggestion and unfortunately neither worked on desktop or mobile device.

I noticed eBay twitter cards work fine with my images but not shopify.

0 Likes