# Shopify ## Getting Started ## Create a connection 1. Sign in to [OpenGraph+](/) 2. Go to your website's **Meta Tags** page 3. Create a new connection and copy your connection URL Your connection URL looks like `https://$OGPLUS_KEY.ogplus.net`. ## Find your theme layout In your Shopify admin, go to **Online Store → Themes → Edit code**. Open `layout/theme.liquid`. ## Add Open Graph meta tags Add the following inside the `` tag in `theme.liquid`: ```liquid ``` Replace `https://$OGPLUS_KEY.ogplus.net` with your actual connection URL. ### Tag reference | Tag | Value | Source | |-----|-------|--------| | `og:title` | Current page, product, or collection title | `page_title` | | `og:description` | Page SEO description, falls back to store description | `page_description` / `shop.description` | | `og:url` | Full canonical URL of the current page | `canonical_url` | | `og:site_name` | Your store name | `shop.name` | | `og:type` | `product`, `article`, or `website` based on page type | `template` | | `og:image` | Dynamic social card image from OpenGraph+ | Connection URL + page path | | `twitter:card` | Always `summary_large_image` for large preview cards | Static value | ## What each variable does - **`page_title`** - Shopify sets this automatically for each page, product, collection, and blog post - **`page_description`** - the SEO description set in each page/product's SEO settings - **`shop.description`** - your store description from Settings → General (used as fallback) - **`canonical_url`** - the full URL of the current page, set by Shopify - **`shop.name`** - your store name from Settings → General - **`template`** - identifies the current page type (`product`, `article`, `collection`, `page`, etc.) - **`request.path`** - the current page path, used to build the og:image URL ## Remove existing og:image tags Shopify themes typically include `og:image` tags already. Search your theme files for existing `og:image` meta tags and remove or comment them out to avoid duplicates. Common locations: - `snippets/social-meta-tags.liquid` - `snippets/meta-tags.liquid` ## Verify Open the preview tool in your OpenGraph+ dashboard and paste a URL from your store. View your page source and confirm all Open Graph meta tags are present with correct values. ## Customize OpenGraph+ captures your page in a headless browser and renders it as an image. You control what gets captured using meta tags in your theme and CSS in your stylesheets. All of the rendering options below are standard HTML meta tags and CSS, so they work the same regardless of framework. The [HTML, CSS, & HTTP guide](/docs/html-css) covers each one in detail. This page shows how to wire them into a Shopify store. ## Meta tags Add these to `layout/theme.liquid` inside the `` tag alongside your `og:image` tag. They're all optional. ```liquid ``` See the [Rendering](/docs/html-css/rendering) guide for what each meta tag does and how they interact. ## CSS styling OpenGraph+ adds a `data-ogplus` attribute to your `` element during capture. Use it in your stylesheets to hide navigation, adjust spacing, or restyle anything for the social card without affecting your actual site. In your Shopify admin, go to **Online Store > Themes > Edit code** and add the following to your theme's CSS file in the `assets/` folder: ```css html[data-ogplus] { .header { display: none; } .footer { display: none; } .announcement-bar { display: none; } .product-single { padding: 60px; } } ``` If you're using Tailwind, there's a plugin that gives you `ogplus:` variants like `ogplus:hidden` and `ogplus-twitter:bg-sky-500`. See [CSS Styling](/docs/html-css/data-attributes) for plain CSS examples and [Tailwind setup](/docs/html-css/data-attributes#tailwind-css). ## Templates For fully custom social card layouts that pull content from your page, use `