How do you force HTTPS with Namecheap and Heroku?

I fixed the problem. I added redirect records so that if the url was entered with or without www and with or without https it would be redirected to include https and www. This required 4 redirects for the domain.

In addition, the app.domain.io url had not content because I hadn't set something up there yet. I was planning on using the app.domain.io for a new heroku app later on.

Remember to wait long enough and try clearing your cache to see if the issue is resolved.

Edit

In my domain settings under Redirect Domain

Source Url       Destination Url
domain.xyz       https://www.domain.xyz/
www.domain.xyz   https://www.domain.xyz/

The above ensures https is always used.

In my domain advanced DNS settings under Host Records

Type                   Host    Value                      TTL
CNAME Record           www     <link from heroku>         30 min
URL Redirect Record    @       https://www.domain.xyz/    unmasked
URL Redirect Record    www     https://www.domain.xyz/      unmasked

This is what you need to do on namecheap to work with a heroku app. There is more to do on the heroku side of things.

In Heroku under app settings there is a Domains and certificates section. You can add your domain there. This will create a DNS Target which is what you put in the <link from heroku> block from above. Heroku will also let you use LetsEncrypt and they will automatically refresh your SSL certificate.

Remember to wait awhile between changes. DNS changes can take up to 24 hours to apply.

For anyone using Heroku, Django, and namecheap that still has a similar problem (i.e. you have a working https website, but http is not automatically routed to https), you also have to set SECURE_SSL_REDIRECT = True in your settings.py file. Making this addition fixed the issue in my case.

This change, in addition to the URL configurations posted in @Programmingjoe's answer, should fix the issue.