Embed Your Shop

Add your shop to Ghost via the API or by pasting embed code.

Option 1: Auto-publish to Ghost (recommended)

If you've connected your Ghost Admin API key, you can publish your shop straight from Mytho. It's the tidier route, and it saves you the copy-and-paste.

  1. Go to Storefront in your dashboard
  2. Customize your theme and display settings
  3. On the Shop Code tab, set your Page slug (e.g. shop)
  4. Click Publish to Ghost
  5. Your shop is live at yoursite.com/shop

Any change you make to the storefront theme updates the published page automatically.

Option 2: Paste the embed code

  1. Go to Storefront → Shop Code in your dashboard
  2. Click Copy code
  3. In Ghost Admin, create a new page
  4. Add an HTML card
  5. Paste the embed code
  6. Publish the page

Adding the cart button

The cart button is a separate snippet. It drops a floating cart icon onto every page of your site.

  1. Go to Storefront → Cart Code
  2. Copy the cart widget code
  3. In Ghost Admin, go to Settings → Code injection
  4. Paste the code into the Site footer section
  5. Click Save

The cart button sits in the corner and shows the item count. It follows the customer on every page, not only the shop.

Adding a Track my order link

Once the cart code is on your site, you can add a Track my order link so customers can check their own delivery. Put it wherever suits, like your footer or main menu:

<a href="#mytho-track">Track my order</a>

Clicking it opens a popup where the customer enters their order number and the email they used at checkout, and sees the delivery status and tracking. It's styled from your shop's own theme, so it matches the rest of your storefront with nothing to set up. There's a copy button for this link on the Storefront page too. For what customers see, read Managing orders.

Customizing appearance

Go to Storefront → Theme to change how your shop looks. A save bar sits at the bottom of the page; it flags unsaved changes until you click Save theme. You can adjust:

  • Colors: background, card, text, borders, accent, and sale badge
  • Type: nothing to set. Your shop, cart, and product pages all use your Ghost theme's own fonts, so the shop reads as part of your site rather than something bolted on
  • Button style: square, rounded, or pill
  • Display options: stock badges, tag pills, and product click behavior

Clear the Page Background colour to leave it transparent. Your Ghost theme's own background then shows through the shop instead of a painted panel, which is handy on a dark or heavily styled theme. Every hex field also takes 8 digits, where the last two set transparency (#RRGGBBAA); the swatch pickers choose solid colours only.

Light and dark mode

If your Ghost site switches between a light and a dark look, your shop can follow it. On the Theme tab, tick Light & dark mode in the colour settings. Each colour section (Shop Page, Product Modal, and Cart) then carries two palettes: your existing fields sit under a moon-marked Dark mode heading, and a sun-marked Light mode row appears below for the light versions. Both palettes start from your current colours, so nothing changes until you edit one. Accent colours are shared between the two.

You don't wire anything up. The shop detects whether your site is showing light or dark on its own, follows your theme's toggle when a visitor flips it, and falls back to their system preference. Use the Preview light and Preview dark buttons on the Shop Code and Cart Code tabs to check both looks before you publish.

What happens when a customer clicks a product

It depends on whether Ghost is connected:

  • With Ghost connected: clicking a product card opens its full Ghost product page. Turn on Show Quick View in Display Options to add a small eye button that opens a quick popup preview instead.
  • Without Ghost: clicking a product card opens a popup with the product details.

Last updated