> ## Documentation Index
> Fetch the complete documentation index at: https://magicpatterns.mintlify.site/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify

> Create a landing page in Magic Patterns that links directly to your Shopify store

This guide walks you through the full workflow: creating a landing page in Magic Patterns, hosting it on your own domain, and linking it to your Shopify store so visitors can buy your products directly.

This is a very common setup for businesses that already sell on Shopify and want a custom-designed landing page to drive traffic to their store.

**How it works:** your landing page lives on a subdomain (like `landing.yourbrand.com`) and when visitors click "Shop Now" or any product link, they go to your Shopify store on your root domain (`yourbrand.com`).

## Step 1: Create Your Landing Page

<Steps>
  <Step title="Sign in to Magic Patterns" icon="right-to-bracket">
    Go to [magicpatterns.com](https://www.magicpatterns.com) and sign in or create a free account.
  </Step>

  <Step title="Create a new design" icon="plus">
    Click **Create New Design** on your dashboard.
  </Step>

  <Step title="Describe what you want" icon="comment">
    For example: *"Create a modern landing page for a skincare brand with a hero section, featured products, testimonials, and a footer."*

    You can also upload a screenshot of a landing page you like for inspiration. Just drag the image into the chat.
  </Step>

  <Step title="Iterate on your design" icon="wand-magic-sparkles">
    Use the chat to make changes: *"Change the hero headline to 'Glow From Within'"* or *"Add a section showing our three best-selling products."*

    Keep going until you're happy with the design.
  </Step>
</Steps>

## Step 2: Add Your Shopify Links

You can link your CTAs directly to a Shopify cart URL so that when someone clicks "Buy Now", the product is already in their cart. The link format is:

```
https://yourbrand.com/cart/VARIANT_ID:1
```

The `1` at the end is the quantity. Replace `VARIANT_ID` with the actual ID of the product variant you want to sell.

### How to Find the Variant ID

1. Go to your Shopify admin panel (`yourbrand.myshopify.com/admin`).
2. Navigate to **Products** and click on the product you want to link.
3. If the product has variants (size, color, etc.), click on the specific variant.
4. The Variant ID is the number at the end of the URL in your browser's address bar: `admin/products/PRODUCT_ID/variants/VARIANT_ID`.

For example, if your variant ID is `41234567890123`, your cart link would be:

```
https://yourbrand.com/cart/41234567890123:1
```

Since most landing pages are built around a single product, the easiest approach is to update all buttons at once. Just type something like this in the chat:

*"Make all the CTAs on this page open this link in a new tab: [https://yourbrand.com/cart/41234567890123:1](https://yourbrand.com/cart/41234567890123:1)"*

## Step 3: Publish Your Landing Page

<Steps>
  <Step title="Publish your design" icon="rocket">
    Click the **Publish** button at the top of the editor. Your design is now live on a free Magic Patterns URL (something like `project-abc123.magicpatterns.app`).
  </Step>

  <Step title="Test your links" icon="vial">
    Open the link in a new browser tab and test that all your Shopify links work correctly.
  </Step>
</Steps>

At this point your landing page is live and working. If you're happy with the free URL, you're done. But most businesses want their own domain, so keep going.

## Step 4: Set Up Your Domain

Most Shopify store owners already have their root domain (like `yourbrand.com`) pointing to their Shopify store. In that case, the recommended setup is:

| Domain                  | Points to                            |
| ----------------------- | ------------------------------------ |
| `yourbrand.com`         | Your Shopify store (keep this as-is) |
| `landing.yourbrand.com` | Your Magic Patterns landing page     |

<Note>
  We always recommend keeping your root domain pointed at Shopify and using a subdomain for your Magic Patterns landing page. Your Shopify store is your storefront and it should stay on the main domain for SEO and customer trust. The landing page works perfectly on a subdomain.
</Note>

### If You Don't Have a Domain Yet

Buy one from any registrar:

* [Namecheap](https://www.namecheap.com)
* [GoDaddy](https://www.godaddy.com)
* [Cloudflare Registrar](https://www.cloudflare.com/products/registrar)
* [Squarespace Domains](https://domains.squarespace.com)

Then point the root domain to your Shopify store (Shopify has [instructions for this](https://help.shopify.com/en/manual/domains/add-a-domain/connecting-domains)) and follow the steps below to connect a subdomain to Magic Patterns.

### Connect a Subdomain to Magic Patterns

<Steps>
  <Step title="Choose your subdomain" icon="at">
    Pick a subdomain name. Common choices:

    * `landing.yourbrand.com`
    * `promo.yourbrand.com`
    * `go.yourbrand.com`
  </Step>

  <Step title="Add a CNAME record in your DNS settings" icon="server">
    Go to your domain registrar (or wherever your DNS is managed) and find the DNS settings. Add a CNAME record:

    | TYPE  | NAME    | VALUE             |
    | ----- | ------- | ----------------- |
    | CNAME | landing | magicpatterns.dev |

    Replace `landing` with whatever subdomain you chose.

    <Warning>
      Do **not** change or delete the A record or CNAME for your root domain. That's what keeps your Shopify store working.
    </Warning>
  </Step>

  <Step title="Wait for DNS propagation" icon="clock">
    This can take anywhere from 5 minutes to 48 hours. Check the status at [whatsmydns.net/CNAME](https://www.whatsmydns.net/?t=CNAME). Enter your subdomain and look for `magicpatterns.dev` in the results.
  </Step>

  <Step title="Connect the domain in Magic Patterns" icon="link">
    1. Go back to your design in Magic Patterns and click the **Publish** button.
    2. Click **Add a custom domain**.
    3. Enter your subdomain (e.g. `landing.yourbrand.com`) and click **I have added DNS records**.
    4. Magic Patterns will verify the connection. Once verified, your landing page is live on your subdomain.

    We automatically set up SSL (HTTPS) for you, so your site is secure.
  </Step>
</Steps>

For more details on custom domains, see the [full custom domain guide](/documentation/get-started/custom-domain).

## A Note About the Watermark

Designs published through Magic Patterns include a small "Built with Magic Patterns" badge. This badge is automatically hidden on any [paid plan](https://www.magicpatterns.com/dashboard?dl=billing). If you're on the free plan, the watermark will appear on your published site.

## FAQ

<AccordionGroup>
  <Accordion title="Can I use the same domain for both my landing page and Shopify store?" icon="globe">
    Not on the exact same domain. A domain can only point to one place. The recommended setup is:

    * **Root domain** (`yourbrand.com`) → Shopify store
    * **Subdomain** (`landing.yourbrand.com`) → Magic Patterns landing page

    This keeps your Shopify store on the main domain for SEO and customer trust, while your landing page lives on a subdomain.
  </Accordion>

  <Accordion title="How do I find the Variant ID for a Shopify product?" icon="magnifying-glass">
    1. Go to your Shopify admin → **Products** → click on the product.
    2. Click the specific variant (size, color, etc.).
    3. The Variant ID is the number at the end of the URL: `admin/products/PRODUCT_ID/variants/VARIANT_ID`.

    Use this ID to build a direct cart link: `https://yourbrand.com/cart/VARIANT_ID:1`
  </Accordion>

  <Accordion title="Can I update my landing page after it's live?" icon="arrows-rotate">
    Yes. Make changes in Magic Patterns and click **Publish** again. The update goes live immediately on your domain.
  </Accordion>

  <Accordion title="Do I need to know how to code?" icon="code">
    No. Magic Patterns generates all the code for you. You describe what you want in plain language.
  </Accordion>

  <Accordion title="Can I add Google Analytics or Meta Pixel tracking to my landing page?" icon="chart-simple">
    Yes. Magic Patterns supports [Google Analytics](/documentation/integrations/google-analytics), [PostHog](/documentation/integrations/posthog), and [Meta Pixel](/documentation/integrations/meta-pixel). You can add tracking directly in your design.
  </Accordion>
</AccordionGroup>