Shopify #
Setup lives in the help centre: Integrating eCardWidget with my Shopify store. This page is the developer's companion to it: how the storefront pieces behave, how the shopper's language is handled, and what data flows into the order and the eCard.
What the integration adds to a store #
All of it is configured in the dashboard under Shopify, per connected store.
| Piece | Where shoppers see it | Notes |
|---|---|---|
| Product-page Form | Replaces Add to Cart on the products you attach it to | The eCard is sent once the order is paid |
| Product-page Add-on checkbox | "Add an eCard with this item", under the normal Add to Cart | Non-replacing; exclusive with the Form on the same product |
| Cart add-on | Cart page and cart drawer | Deliver now, when the order ships, or let the shopper choose |
| Thank-you page | After checkout | A Checkout UI extension block ("eCard Share Form") you add in the checkout editor; optional limit of one send per item bought |
| Automatic eCard | Nothing to click; sent by us | On payment or on fulfilment, after an optional delay, on every order or the first only |
Product scope is per design: Specific products (attach product by product) or Every product in my store, which replaces Add to Cart storefront-wide and is meant only for stores that sell nothing but eCards. The storefront pieces run from the eCardWidget app embed, switched on once in the theme editor; the dashboard links straight to it. Changes take effect after Save changes; allow a few minutes for the storefront to pick them up.
Language #
The storefront form follows the shopper, not the store's default language.
- Detection. The form reads the page's language: a locale prefix in the URL such as
/fr/products/…, thenShopify.locale, then the page's<html lang>. Regional variants fold to the base language (fr-CA→ French,pt-BR→ Brazilian Portuguese). - Supported languages. English, French, Spanish, German, Brazilian Portuguese, Dutch, Arabic, Hebrew, Korean, Vietnamese and Polish. Anything else falls back to English.
- Which designs are shown. When a product carries designs from more than one Widget Form, the form shows only the designs whose Widget Form language matches the shopper's. If none match, every attached design is shown. A Widget Form set to a Custom translation keeps that translation regardless of the page language.
- Wording per language. Under Shopify › Text & languages you can override the panel heading, subtitle and button, the sending-page heading and description, and the cart and product add-on copy, one language at a time. Overrides apply only to that language; the rest keeps our defaults.
- The eCard itself is sent in the language the form resolved, so the envelope email and the card page match what the shopper saw.
Data that reaches the order and the eCard #
Order line items. A product-page send adds line-item properties to the cart line: From, To,
eCard Name and eCard ID, so the eCard is visible on the order in Shopify admin.
Product merge tags. The product-page form sends these merge tags with every eCard, read from the product page's Open Graph tags. Put them in the eCard's subject, header or body text (eCards → Details) and the card describes the product it was bought with:
[shopify_product_title] · [shopify_product_description] · [shopify_product_url] ·
[shopify_product_price_amount] · [shopify_product_price_currency] · [shopify_product_image]
[shopify_product_image] is the address of the product's share image (og:image), so it goes inside an
image tag, for example in the page content below the card:
<img src="[shopify_product_image]" alt="[shopify_product_title]" width="320">
The page-level custom merge tags
hook (window.ecw_merge_tags) applies to the standard embedded widget, not to the storefront forms.
Custom fields. A custom fields preset assigned to the attached Widget Form appears on the product-page
form. The shopper's answers are recorded with the send and show in your eCard logs and exports; use
[field_name] merge tags in the eCard to print them on the card.
Webhooks. Storefront sends fire the same ecard_shared webhook as any other send,
with the merge tags above in its merge_tags field.
Notes #
- The dashboard's "Test on my store" check opens a product page and reports whether the app embed is active, whether that product is set up, and whether the store is password-protected.
- Our app installs the
orders/create,orders/paid,orders/fulfilled,orders/partially_fulfilledandapp/uninstalledwebhooks on the store; nothing else is written to the store. - Lost connection? The dashboard shows the store as disconnected; reconnecting from the Shopify admin restores it without re-doing the product setup.