Disable Shopify Front-end

Highlighted
New Member
2 0 0

Hello,

I was wondering if there was a way to disable the shopify store front-end. I am currently using Shopify GraphQL API for a headless implementation with a react based front-end. I want to know If I can can link only the API (without Shopify's native front-end) to a sub.domain. Does anyone know if this is possible? 

0 Likes
Highlighted
Explorer
81 8 11

you can lock use of password protected 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
516 100 97

Yes absolutely you can use a subdomain for your headless site. You can also remove the Online Store channel by going to "manage channels"  if you want to, but often folks redirect from it (if you ever had it published this can help with SEO/404s) 

 
 

Vix | Developer Support @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 


0 Likes
Highlighted
Explorer
81 8 11

@vix  can you please provide the article link here. or list of the steps 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
516 100 97

https://help.shopify.com/en/manual/online-sales-channels#remove-an-online-sales-channel-from-your-sh...

 
 

Vix | Developer Support @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 


0 Likes
Highlighted
Excursionist
13 1 2

Ywtstewart

You can use Axios, JQuery Ajax or the Javascript Fetch API to get data from a store.

If you're using npm and want to use JQuery do npm i jquery first.

For example if the store url is myawesome-widgets.myshopify.com use: 

$.ajax({
      url: 'https://myawesome-widgets.myshopify.com/api/2020-10/graphql',
      data: '{ 
                 productByHandle(handle: "<handle name>") {
                   id
                 }
      }',
      headers: 'X-Shopify-Storefront-Access-Token: <store token>'
    }).done(data => {
      console.log(data)
    });

 

More detailed information here:

https://reactjs.org/docs/faq-ajax.html

0 Likes
Highlighted
New Member
2 0 0

@vix  I am currently using using Cloudflare to handle DNS. So ideally I would like like to redirect the root of my  subdomain (shop.xxxx.com) to the homepage (xxxx.com/) and shop.xxxx.com/admin to Shopify admin. Can I do this with cloudflare?

0 Likes
Highlighted
Tourist
6 2 3

You cannot put Cloudflare in front as Shopify is already using Cloudflare.

We have a headless storefront and some experience with this setup. I would advise against disabling the online shop sales channels as too much of the Shopify ecosystem relies on it's existence. So you're better off having a very minimal theme that redirects users to your headless store. However, you'll need to use a client side redirect.

The important part of our implementation looks something like code snippet below, note that we use the themes engine for account management and a few other features, so we're only redirecting some routes. We have multiple methods of redirect to ensure we catch it:

  1. Ideally we redirect using JavaScript in the head so we can pass along any query string params (e.g. utm tags, etc) - there's no way to access these from liquid
  2. We then use a HTML meta tag with 1 second delay in case the js doesn't kick in, we'll lose the query string. 
  3. A delayed CSS hidden user message for a manual redirect.

 

<!doctype html>
<html>
<head>
  <title>{{ page_title }}</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="{{ page_description | escape }}">
  <link rel="canonical" href="{{ canonical_url }}">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

  {%- comment -%}
  Detect what 'mode' the page is in. We cannot auto redirect under certain modes.
  {%- endcomment -%}
  {%- if content_for_header contains "previewBarInjector.init();" -%}
    {%- assign page_mode = "preview" -%}
  {%- elsif content_for_header contains "Shopify.designMode" or content_for_header contains 'editor_domain' -%}
    {%- assign page_mode = "design" -%}
  {%- else -%}
    {%- assign page_mode = "live" -%}
  {%- endif -%}

  {%- comment -%}
  ## Headless router

  Re-route to the headless store by assigning the redirect path to `headless_redirect_path`.

  If a path is not assigned to then we will render the liquid template.
  {%- endcomment -%}
  {%- case request.page_type -%}
  {% when "404" %}
  {% when "article" %}
  {% when "blog" %}
  {% when "cart" %}
  {% assign headless_redirect_path = "/cart" %}
  {% when "collection" %}
  {% assign headless_redirect_path = "" %}
  {% when "list-collections" %}
  {% assign headless_redirect_path = "" %}
  {% when "customers/account" %}
  {% when "customers/activate_account" %}
  {% when "customers/addresses" %}
  {% when "customers/login" %}
  {% when "customers/order" %}
  {% when "customers/register" %}
  {% when "customers/reset_password" %}
  {% when "gift_card" %}
  {% when "index" %}
  {% assign headless_redirect_path = "" %}
  {% when "page" %}
  {% when "password" %}
  {% when "product" %}
  {% assign headless_redirect_path = "/products/" | append: handle %}
  {% when "search" %}
  {% assign headless_redirect_path = "" %}
  {% else %}
  {%- endcase -%}

  {%- assign headless_origin = settings.headless_origin -%}
  {%- assign headless_redirect_base_url = settings.headless_redirect_base_url -%}

  {%- comment -%} Construct the full headless path {%- endcomment -%}
  {%- if headless_redirect_path and settings.headless_redirect_enabled == true -%}
    {%- assign headless_redirect_url = headless_origin | append: headless_redirect_base_url | append: headless_redirect_path -%}
  {% endif %}

  {%- comment -%} We attempt a meta redirect, JS redirect with a fallback to an actual link. {%- endcomment -%}
  {%- if headless_redirect_url -%}
    {%- if page_mode == "live" -%}
      <meta content="noindex" name="robots">
      <script>
        (function (){
          var href = {{ headless_redirect_url | json }};
          if (window.location.search) {
            href += window.location.search;
          }
          if (window.location.hash) {
            href += window.location.hash;
          }
          window.location.href = href;
        })();
      </script>
      <style>
        #headless-manual-redirect {
            opacity: 0;
            animation: delayFadeIn 500ms;
            animation-delay: 2s;
            animation-fill-mode: forwards;
        }

        @keyframes delayFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
      </style>
      <meta content="1;url={{ headless_redirect_url }}" http-equiv="refresh">
    {%- endif -%}
  {%- else -%}
    {%- comment -%}
    Head for the themes engine
    {%- endcomment -%}
    {{ content_for_header }}
  {%- endif -%}
</head>
<body class="site">
  {%- if headless_redirect_url -%}
    <div
    id="headless-manual-redirect"
    style="align-items: center; display: flex; flex-direction: column; height: 100vh; justify-content: center; width: 100%;">
    <h1>{{ 'general.headless_redirect.title' | t }}</h1>
    <p>
      <a href="{{ headless_redirect_url }}">{{ 'general.headless_redirect.link' | t }}</a>
    </p>
    {%- if page_mode != "live" %}<em>auto-redirect from {{ headless_redirect_path }} to {{ headless_redirect_url }} skipped in {{ page_mode }} mode</em>{%- endif %}
  </div>
  {%- else -%}
    {%- section 'site-header' -%}

    <main role="main" class="site-content">
      {{ content_for_layout }}
    </main>

    {%- section 'site-footer' -%}
  {%- endif -%}

</body>
</html>

 

 

A few other lessons learnt the hard way:

Be aware that any apps that rely on Shopify URL structure will get it wrong. For example: Klaviyo, Drip, Facebook, Google Shopping, etc will all point to your themes engine. Some of them also do not like redirects, Google Shopping bans them. 

If you're not using Multipass, you're probably better off using the themes engine for account management functionality as access via a customerAccessToken is not the same being authenticated. The user will not be authenticated on the Shopify Web Checkout. 

We have our headless site on example.com and our store on subdomain.example.com. That way we can share analytics cookies between the two and it feels relatively seamless experience.

Access the graphql api via subdomain.example.com/api/version/graphql.json not via .myshopify.com domain, that way when the web checkout url will be on subdomain.example.com, not .myshopify.com. Same with abandoned cart emails.

 

0 Likes