instantcommerce/shopify-headless-theme

Liquid theme that automatically redirects customers to your custom storefront.

shopify-headless-theme's Issues

Discount links don't provide a way to pass the code through to the headless store.

When a shareable discount link evaluates … for example…

theme.com/discount/freeshipping?redirect=/pages/contact

The theme currently would redirect you to … 

headless.com/pages/contact, and there is a cookie for discount_code set to freeshipping but for the domain theme.com.

This is because the client side code isn't executed until the routing is complete — one way to get around this would be to add a search param called discount_code and set it to the value passed above.

e.g.

      const discount_code = getCookie('discount_code');

      function getCookie(name) {
        name = name + '=';
        var decodedCookie = decodeURIComponent(document.cookie);
        var cookies = decodedCookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
          var cookie = cookies[i].trim();
          if (cookie.indexOf(name) == 0) {
            return cookie.substring(name.length, cookie.length);
          }
        }
      }

      const url = new URL(window.location.href)

      let params = new URLSearchParams(url.search);
      
      params.append("discount_code", discount_code);

      // Continue with existing logic…

Edit checkout code

How can I edit checkout code?
There is no reference for the checkout page in the source code and I don't find any default checkout code on shopify

Inquiry Regarding Custom Sections in Next.js and Shopify Integration

Hello Team,
I have come across an issue that pertains to website sections, a crucial element of any web platform. I am seeking your expertise on the following matters:

1. Incorporating Custom Sections, Specifically a Hero Section, into a Next.js Template:
I am interested in understanding the process of integrating a custom section, such as a Hero Section, into a
Next.js template. Your guidance on this would be greatly appreciated.

2.Integrating Custom Sections into a Shopify Store for User-Friendly Editing:
One of my primary objectives is to seamlessly incorporate these custom sections into a Shopify store, allowing
users to easily edit and customize them. Your insights on how to achieve this would be invaluable.

3. Utilizing GraphQL to Fetch Section Data, Particularly for Products:
I am also keen to explore the use of GraphQL to retrieve data for sections, such as products, by leveraging
categories and product attributes. I am interested in learning how to implement this functionality and display the
fetched data on my deployed website.

Any advice or potential solutions in this regard would be greatly appreciated.

Theme seems to be broken

Did this break for someone else?

We just started seeing an issue, when users click on the checkout button they are redirected to my-domain.myshopify.com/password instead of the checkout page.

Disable redirect for certain templates

I'm trying to set up some custom xml feeds, is it possible to disable redirects for certain templates / paths?

[docs] add best practices section in readme

e.g. what logic should be added on the login page such as redirecting to the checkout_url query params (with multi-pass)

Error at Navigation menu

Navigation menu don't appear on frontend

When trying to add this theme directly from a cloned repo, Shopify says is not a valid theme.

I'll investigate. When uploading the theme it works fine.

[feat] add gift card template

/favicon.ico returns 404 in checkout

Is there a way to get a favicon working in checkout? I have a favicon uploaded to Theme Settings > Favicon, but doesn't appear to be working:

Supporting domain aliases

Hello,

This theme is really a great idea. I just tried it out on a store that uses a domain alias:

normalsetup.myshopify.com —> custom.customdomain.com

And I see that clicking the logo in the checkout causes an infinite redirect loop. Any way around this behavior, with this theme?

[question] login page redirection fixed?

problem

Not sure if i did it right, but I had a bug in the login process.

After redirecting the customer to the checkout page, when they clicked "log in", they'd be redirected to the {{ settings.storefront_hostname }}/password for some reason.

I couldn't track easily why I was redirected to /password so I deactivated Javascript in advance and navigated to the Login link where i could see that there was a redirection block at the end of the page (see details ↓)

Login page with redirect block

I tracked it down to the main layouts/template.liquid here:

shopify-headless-theme/layout/theme.liquid

Lines 220 to 239 in 4a8a8f1

	{%- if should_redirect -%}
	<div class="redirect">
	{%- if settings.storefront_hostname != blank -%}
	<h1>Redirecting...</h1>
	<p>
	<a id="redirect-link" href="https://{{ settings.storefront_hostname }}/">Click here</a>
	if you are not automically redirected.
	</p>
	<script>
	if (!window.Shopify.designMode) {
	var redirectLink = document.getElementById("redirect-link");
	redirectLink.href = window.storefrontRedirectUrl;
	}
	</script>
	{%- else -%}
	<h1>Redirect URL not set</h1>
	<p>Configure the redirects in "Theme settings > Storefront".</p>
	{%- endif -%}
	</div>
	{%- endif -%}

...and should_redirect was (hopefully) explained in a comment a bit above:

shopify-headless-theme/layout/theme.liquid

Lines 149 to 154 in 4a8a8f1

	{% comment %}
	Should redirect if all conditions are met:
	- The template is defined (will be undefined for app proxies like /apps|a|community|tools/*)
	- The current template is not the login page, unless multipass login is enabled
	{% endcomment %}
	{%- assign should_redirect = template != blank and template.name != 'login' or settings.multipass_login -%}

So according to the logic of the comment, the redirection should not happen when we navigate to the login page.

In order to debug I just added this:

<!-- should_redirect={{ should_redirect }} ⇒

And to my surprise the value wasn't a boolean but rather the template value.

solution

I changed this:

shopify-headless-theme/layout/theme.liquid

Line 154 in 4a8a8f1

{%- assign should_redirect = template != blank and template.name != 'login' or settings.multipass_login -%}

To become that:

{%- assign should_redirect = false -%}
{% if template != 'customers/login' or settings.multipass_login %}
  {% assign should_redirect = true %}
{% endif %}

and it seems now that should_redirect is a boolean which is true/false according to the logic of the comment.

question(s)

• was this a bug?
• how come nobody had the issue?
• do you need a PR?

Customise email notifications

I would like to specify a logo and accent color that is used across all email notification templates using the following form:

When I try to upload a logo, or specify an accent color I receive an error that Shopify support tells me is because the theme doesn't allow editing notification templates. Is that true? And how would I go about changing the email notification templates in that case?

/password > / (not working)

I've password-protected the default Shopify store.
Custom front end lives on: godsent.gg
The checkout lives on a custom subdomain: checkout.godsent.gg

When I try to set up a custom redirect to link to the index page of godsent.gg:
/password > /

I'm greeted by the Redirecting template after clicking on the logotype on the checkout page, the "Click here" link wants to ref to:
checkout.godsent.gg/undefined but it should go to godsent.gg/

How do I solve this?

Not able to see designs as per documentation

I have added the headless theme, yet I cant't see same checkout page as shown in documentation

I am getting redirect to my headless storefront on shopify customer login page.

[feat] use OS 2.0 structure from Dawn

cannot create a custom redirect for root/index

The location of our online store is https://ourdomain.com/swag. The following custom redirect doesn't appear to work:

/ > /swag

Otherwise working well. Thank you for writing this tool.

Cabecera

Necesito ayuda para cambiar la cabecera de mi sitio web, no me abre el editor de shopify

Error at Page update

No update is render in frontend

Possible to not redirect away from the customer account section?

I'm building a Next.js Shopify site and I'm using this to redirect users that visit the Shopify domain to the Next.js site. But we're still looking to lean on an out-the-box template for users to log in and see their orders. Is this possible with this theme?

Variable storefrontBaseUrl is undefined + URL match check is wrong

In theme.liquid the variable storefrontBaseUrl is referred to wrongly. Looking at the changes made in commit f43aae1 it looks like storefrontBaseUrl was renamed to storefrontHostname but not in all places it should've been renamed.

Furthermore at line 43 redirectUrl.startsWith(storefrontBaseUrl + fromPath) isn't working as expected due to the fact that the redirectUrl that is initialized as var redirectUrl = window.location.href.replace(currentHostname, storefrontHostname); can never start with the provided value as it will always start with http:// or https://.

Can't open the PR with the fixes at the moment so just quickly reporting on the issue.