Shopify Open Graph Image Previewer & Safe Zone Checker
Simulate how Shopify product photos, collection banners, and default store social sharing images crop across Facebook, Twitter/X, and WhatsApp.
Displayed below main page header or above the tool container. • Zero CLS Container
OG & Twitter Card Image Safe-Zone Previewer1200 × 630 Safe Area
Audit social cards against 60px safe margin buffers, mobile cutouts & aspect ratio crops.
Configured with Shopify social image aspect ratios, crop boundaries, and meta tags.
Upload Social Image
PNG, JPG, WebPProcessed 100% locally in-browser with zero server uploads
Safe-Zone Overlays & Positioning
Separates the interactive tool output from the deep technical guide. • Zero CLS Container
Direct Answer: Shopify Social Image Safe Zones
Shopify themes default to extracting product.featured_image for social meta tags. Because e-commerce product photos are almost always square (1:1 / 1080x1080px) or vertical (3:4), horizontal social sharing crawlers like Facebook, Twitter, and LinkedIn forcibly crop the top and bottom 35% of the image to fit a 1.91:1 (1200x630px) container. This cuts off product logos, models' faces, and promotion badges.
To prevent clipped thumbnails, stores should maintain 60px safe-zone padding on all sides of social cards or inject dedicated 1200x630 landscape banners via Shopify metafields (product.metafields.custom.og_image) in theme.liquid.
Why Shopify Shares Show Broken Crops on WhatsApp & Facebook
Fixing 1:1 vs 1.91:1 Aspect Ratio Conflicts in Shopify Themes
In modern e-commerce merchandising, product photography is captured in 1:1 square or 4:5 vertical aspect ratios to maximize mobile catalog conversions. However, Open Graph protocol specifications expect a landscape 1.91:1 (1200x630px) ratio.
When an untuned theme outputs `<meta property='og:image' content='{{ product.featured_image | image_url }}'>`, Facebook and WhatsApp center-crop the square image horizontally. The top and bottom 200px are instantly discarded.
By previewing your social assets inside our safe-zone simulator, you can verify that all essential brand elements fall inside the central 1080x560px visible box.
Recommended theme.liquid Open Graph Snippet
Check for custom 1200x630 social metafields first before falling back to product.featured_image:
{% if product.metafields.custom.og_image %}
<meta property="og:image" content="{{ product.metafields.custom.og_image | image_url: width: 1200, height: 630, crop: 'center' }}" />
{% elsif product.featured_image %}
<meta property="og:image" content="{{ product.featured_image | image_url: width: 1200, height: 630, crop: 'center' }}" />
{% else %}
<meta property="og:image" content="{{ settings.share_image | image_url: width: 1200, height: 630 }}" />
{% endif %}
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />How to Configure & Update Social Sharing Images in Shopify
- 1
1. Upload a Storewide Fallback Image
In Shopify Admin, go to Online Store > Preferences > Social sharing image preview. Upload a 1200x630px landscape graphic with your store logo centered inside the safe zone.
- 2
2. Define a Dedicated 1200x630 Product Metafield
Go to Settings > Custom data > Products > Add definition. Name it 'Social Share Image' (key: custom.og_image) and select 'File (Image)'.
- 3
3. Update theme.liquid to Reference the Metafield
Edit your theme layout to check for product.metafields.custom.og_image with explicit og:image:width and og:image:height tags.
- 4
4. Clear Social Crawler Caches
Use the Facebook Sharing Debugger and LinkedIn Post Inspector to scrape your Shopify URL and clear old cached thumbnails.
Frequently Asked Questions (Shopify)
How do I prevent Shopify from cropping product images on Facebook and Twitter?▼
By default, Shopify shares the product's primary image, which is usually a 1:1 square. Because Facebook and Twitter use a 1.91:1 horizontal container (1200x630px), the top and bottom are cropped. You can resolve this by adding a dedicated 1200x630px image metafield in Shopify or ensuring product subjects are centered with generous margins.
Where do I upload a default social share image in Shopify?▼
In your Shopify Admin, navigate to Online Store > Preferences. Under the 'Social sharing image preview' section, click 'Add image' and upload a 1200x630px PNG or JPG image under 8MB.
How long does Facebook take to update a changed Shopify product image?▼
Facebook caches Open Graph data for up to 30 days. To force Facebook to re-crawl your updated Shopify product card immediately, enter the product URL into the Facebook Sharing Debugger and click 'Scrape Again'.
Related Tools & Next Workflow Steps
Complementary utilities to streamline your SEO audit, indexing, and content strategy.
Social Meta & OpenGraph Card Simulator
Preview and validate how your link previews look when shared on Twitter (X), Facebook, LinkedIn, and Discord before publishing.
Twitter Card Previewer
Simulate Twitter / X timeline card previews, validate image aspect ratios (1.91:1 & 1:1), and generate exact twitter:card meta tags.
Facebook Open Graph Debugger
Simulate Facebook desktop and mobile feed previews, validate og:image 1.91:1 ratios, and inspect Open Graph tag integrity in real time.
LinkedIn Link Previewer
Inspect LinkedIn feed cards, audit 1200x627 px images, prevent title truncations, and generate certified B2B social meta tags.
Displayed below main page header or above the tool container. • Zero CLS Container