Quick tip: Create a feature flag system in your Shopify site for faster and safer deploys

A feature flag allows you to turn functionalities on and off during runtime (or your live theme for this matter), without the need to deploy specific code changes every time. It is also a quick way to roll back, and even give Shopify Administrators control over the functionalities of the theme. Let’s implemented a quick feature-flag system without any third-party app and within your theme.

⚠️ Feature flags and continuous deployment strategy are way deeper than we will see in this article. However, I think we can take some ideas to make our developer lives easier.

Pros about implementing a “feature-flag-like” system

• You can deploy safely, as soon you finish your code and deliver faster. You don’t need to wait until a certain moment to deploy because the code is already there.
• You feel like you have a safety net. Even if you have your theme synced with Github, having a toggle on your theme that will disable your new code will be faster than performing a code roll-back. It could also be done by non-developers, even the users.
• It forces you to isolate your code and make it more maintainable. You need to have an isolated code for your functionality if you want to rely on these feature flags.
• They allow you to modify your feature behavior (not just enabling) without making any changes in the code. It gives you and your users more autonomy. Like adding different configurations to your functionality.
• They can help measure the impact on performance without touching the code. Sometimes measuring the impact of a code change can be challenging if you need to keep deploying code on production. Enable, measure, disable, measure again 😉

Cons of this “feature-flag-like” system

• Not all your changes in the code apply for a feature flag. Or your changes are so dispersed around your theme that it would dirty the code. For example, it’s easier to add a feature flag for enabling a “Smartbanner to download our app”, rather than adding a feature flag to visual changes on the product page. Also, we really don’t need to be able to enable/disable these changes.
• You will have to clean up every certain time. Sometimes these flags are used as a “QA” period or “beta”. This means that after a while the feature flag is no longer needed because the functionality is now a permanent part of the site. You would have to go through the code and delete all of these.
• It adds more complexity to the coding. By forcing you to isolate the code, it adds a bit of overhead instead of just throwing the code and putting it to work as soon as deployed.

Do I need this?

Be mindful about creating feature flags. Ask yourself:

• Will this have to be disabled at any point? Then yes.
• Do we need our users to be autonomous when showing/hiding this? Then yes.
• Can my code be a dynamic section? Then no. Dynamic sections per se allow you to include and delete them, acting as feature flags themselves.

Feature flags are more suitable for global functionalities, or changes affecting the whole site, involving additional Javascript code, for example.

Visual changes on the layout are not usually good use-case for feature flags. But they could be if, for instance, we want to change the whole theme to a certain color configuration (like a dark mode, or themed season color palette) that we will be disabling or changing in the future.

How to implement feature flags

You can implement a feature flag either inside a Shopify global section if it only affects there. However, section schemas’ values are only available inside the section itself. If you need to use this value prior to rendering your section, you’ll want to use a global theme setting.

1. Locate the settings_schema.json file.

2. Create a new object within your JSON. You can create a global “Feature flags” section and add here all the checkboxes you need.

[
   {
      "name":"theme_info",
      "logo":"https://cdn.shopify.com/s/files/1/080/70/files/mylogo.jpg",
      "settings":[
         {
            "type":"header",
            "content":"Umamicart"
         },
         {
            "type":"paragraph",
            "content":"v1.0"
         }
      ]
   },
   {
      "name":"Feature flags",
      "settings":[
         {
            "type":"checkbox",
            "id":"ff_smartbanner",
            "label":"Show smartbanner for app"
         }
      ]
   }
]

Or, if you have several options to configure your feature, you can create a section for each feature:

[
   {
      "name":"theme_info",     "logo":"https://cdn.shopify.com/s/files/1/080/70/files/mylogo.jpg",
      "settings":[
         {
            "type":"header",
            "content":"Umamicart"
         },
         {
            "type":"paragraph",
            "content":"v1.0"
         }
      ]
   },
   {
      "name":"Smartbanner",
      "settings":[
         {
            "type":"checkbox",
            "id":"is_smartbanner_enabled",
            "label":"Enable smartbanner"
         },
         {
            "type":"checkbox",
            "id":"is_smartbanner_darkmode",
            "label":"Smartbanner darkmode"
         },
      ]
   }
]

3. Checking the feature flag value:

Settings defined within the settings_schema.json file are exposed globally, within the settings object, meaning that you can access the feature flag value anywhere.

{% if settings.ff_smartbanner %}
    {% render 'comp-smartbanner' %}
{% endif %}

And that’s it. Then having this functionality enabled or not is as easy as going to the customizer > Theme Settings and checking your box.

Other interesting readings

Feature Toggles (aka Feature Flags)

Feature Flags | Atlassian

Peace & Code 😬

Nadine

P/S: cover image — from mk. s at Unsplash