Frameship & Framer: How to Eliminate the "Myshopify" URL with a Custom Checkout Subdomain

Congratulations on integrating Shopify into your Framer website using Frameship. You may have noticed that the checkout is still handled by Shopify. More importantly, there's an unprofessional domain switch from your custom domain (yourdomain.com) to a default Shopify URL (yourstore.myshopify.com), which can look suspicious to customers. This tutorial explains how to create a dedicated subdomain for your Shopify checkout to keep your brand experience seamless.

The goal is to move from a default Shopify URL to a professional, branded structure:

• Main Site: yourwebsitedomain.com (Framer)
• Checkout: shop.yourwebsitedomain.com (Shopify)

Step 1: Create the Subdomain in your DNS

Before connecting anything in Shopify, you need to prepare your domain's records so the internet knows where to send your "shop" traffic.

• Access Management: Log in to your domain registrar, such as Namecheap, and open the DNS management panel for your domain.
• Add CNAME Record: Create a new record with the type CNAME.
• Configure Host: Set the Host or Name to shop.
• Set Target: Set the Value or Target to shops.myshopify.com.
• Check for Conflicts: Ensure there are no existing A or CNAME records for the "shop" prefix, as these will cause connection errors.

[!IMPORTANT]

Do not modify the A records pointing to Framer (e.g., 31.43.160.6) or the www CNAME record. These must remain untouched to keep your main site live

Step 2: Link the Subdomain to Shopify

Now that your DNS is configured, you need to tell Shopify to accept traffic from your new subdomain.

• Domain Settings: In your Shopify Admin, navigate to Settings and select Domains.
• Connect Domain: Click Connect existing domain.
• Enter Subdomain: Type your full subdomain (e.g., shop.yourwebsitedomain.com) and click next.

Shopify will ask you to add this record:

Once you've added this new DNS record to your domain registrar, you can click on "I updated DNS records".

You should have these records:

Step 3: Finalize and Redirect

Primary Domain

Find your new subdomain in the Shopify list and set it as your Primary domain.

Security: Shopify will automatically provision a TLS/SSL certificate for the subdomain to ensure all checkout connections are secure.

Once verified, you need to ensure the new URL is the one customers see during checkout.

Optional Home Page Redirect

At this point, you might notice that clicking the logo on the checkout page redirects users to your Shopify subdomain rather than your main site. To ensure they return to your Framer website instead, you can add a custom redirect script.

• Go to Online Store > Themes and click Edit code.

• Open theme.liquid and paste the following right before the </head> tag:

{% if request.path == "/" %}
<script>
window.location.href = "https://yourwebsitedomain.com";
</script>
{% endif %}

Now, when visitors click on the logo, they will be redirected to Framer.

[!IMPORTANT]

This is only recommended if you don't want users to navigate the default Shopify online store at all.

Conclusion

By implementing a custom subdomain, you have bridged the gap between your Framer design and the Shopify checkout process. This setup ensures your brand remains front and center, eliminating the "myshopify" URL that often causes friction or suspicion for customers. With a seamless transition from your main domain to your professional shop subdomain, you provide a trustworthy shopping experience that keeps users focused on their purchase.

Need help with your Framer site? Reach out to Nexio Studio and let's build something exceptional.