How to check if environment in Shopify is Dev or Production?

Technical Q&A
1

Hi, I want to check if I’m inside the dev or prod environment within Liquid.

  • I have a live store and set up a development store
  • I’m developing locally with Shopify CLI

1. attempt

I found a .env file, but I don’t know how to read the variables that are inside the .env within Liquid.

2. attempt

I added new settings to the settings_data.json but I don’t know where these settings should appear. I don’t find them inside my admin backend

This is my JSON


"settings": [
{
"label": "Environment",
"id": "environment",
"type": "select",
"options": [
{
"label": "Development",
"value": "development"
},
{
"label": "Production",
"value": "production"
}
],
"default": "production"
},
{
"label": "Klaviyo Account",
"id": "klaviyo_account",
"type": "text",
"default": "XXXXXX"
}
],

Can anyone help?

2

I hope i understood your issue, you need to know either your are in the Theme Editor or in the actual website it self?

Use the Shopify.designMode in JS and request.design_mode in Liquid.

Check this link from Shopify’s team:

https://shopify.dev/changelog/detect-the-theme-editor-using-liquid-and-javascript

Hope it helped.

3

DEVELOPMENT = SANDBOX, PRODUCTION = LIVE

If DesignMode = true, your shop is being EDITED, totally different thing from sandbox and live

4

did you managed to find a solution?

5

I saw usages of [theme.role](https://shopify.dev/docs/api/liquid/objects#theme-role) Liquid variable to determine if the theme is in developement or prod.

Not sure if that corresponds to the store being in dev or prod.

6

Hmm interesting, it could be repurposed as dev vs prod

7

Theme.role sounds perfect! Alas, the theme object has been deprecated - https://shopify.dev/docs/api/liquid/objects/theme

Has anyone tried accomplishing this by adding a custom metafield to the market object (https://admin.shopify.com/store/***/settings/custom_data/market/metafields)? Perhaps a little janky, but the other objects that allow custom metafields seem to be on the user or product level (not sitewide), whereas market is kind of on the site level. Maybe could have an “environment” field on all the store’s markets that would get set differently for “production” vs “development” stores…!?

Then the liquid files can access it via: {{ localization.market.metafields.custom.environment }}