Skip to main content
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

Sign in to Magic Patterns

Go to magicpatterns.com and sign in or create a free account.

Create a new design

Click Create New Design on your dashboard.

Describe what you want

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.

Iterate on your design

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.
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”

​
Step 3: Publish Your Landing Page

Publish your design

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).

Test your links

Open the link in a new browser tab and test that all your Shopify links work correctly.
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:
DomainPoints to
yourbrand.comYour Shopify store (keep this as-is)
landing.yourbrand.comYour Magic Patterns landing page
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.

​
If You Don’t Have a Domain Yet

Buy one from any registrar: Then point the root domain to your Shopify store (Shopify has instructions for this) and follow the steps below to connect a subdomain to Magic Patterns.

​
Connect a Subdomain to Magic Patterns

Choose your subdomain

Pick a subdomain name. Common choices:
  • landing.yourbrand.com
  • promo.yourbrand.com
  • go.yourbrand.com

Add a CNAME record in your DNS settings

Go to your domain registrar (or wherever your DNS is managed) and find the DNS settings. Add a CNAME record:
TYPENAMEVALUE
CNAMElandingmagicpatterns.dev
Replace landing with whatever subdomain you chose.
Do not change or delete the A record or CNAME for your root domain. That’s what keeps your Shopify store working.

Wait for DNS propagation

This can take anywhere from 5 minutes to 48 hours. Check the status at whatsmydns.net/CNAME. Enter your subdomain and look for magicpatterns.dev in the results.

Connect the domain in Magic Patterns

  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.
For more details on custom domains, see the full custom domain guide.

​
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. If you’re on the free plan, the watermark will appear on your published site.

​
FAQ

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.
  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
Yes. Make changes in Magic Patterns and click Publish again. The update goes live immediately on your domain.
No. Magic Patterns generates all the code for you. You describe what you want in plain language.
Yes. Magic Patterns supports Google Analytics, PostHog, and Meta Pixel. You can add tracking directly in your design.