How Developers Can Make Shopify Even Easier For Non-Developers To Manage Theme Customizations

At one point or another a Shopify brand owner goes through the Shopify Expert listings in search for a developer to build a theme customization for you.

You find one, they build exactly what you want and you are a happy camper.

Fast forward two months later...

You want to make a slight modification or remove the customization entirely. Simple enough. You search through your emails to see if the original developer gave instructions or send them an email asking for help.

Now you find out their rates went up... Bummer! You feel trapped.

You then go back to the Shopify Expert listings in search for a new developer. A few days goes by and you were able to find someone kind enough willing to help you update your theme in exchange for a review.

The time has come to prevent this from happening ever again...

The Customization

A simple request Shopify Plus brands ask for when they are running a promotion is to have the mobile Order Summary section automatically expanded so customers can easily see the discount code section.

Before:

Image via: The Home T

After:

Image via: The Home T

This is a simple coding change. In fact, here is the code that we needed to add into the checkout.liquid layout file:

<style>
@media (max-width: 999px) {
  .order-summary--is-collapsed {
    height: 100% !important;
  }
  button.order-summary-toggle.order-summary-toggle--show {
    display: none;
  }
}
</style>

The issue brands have is after the campaign they email the developer to remove or comment out this code.

The Modification To Eliminate The Developer

To fix the issue described at the beginning of the post once you want to remove the customization you get the developer to add logic based on an enable/disable checkbox within Customize Theme.

Within the settings_schema.json file you would ask the developer to add something like:

{
  "name": "Display Discount Box",
  "settings": [
    {
    "type": "checkbox",
    "id": "display_discount_box",
    "label": "Display discount box on checkout",
    "default": true
    }
  ]
}

Now when you click Customize Theme from within the Shopify admin you will see an option to display the discount box:

Now all you have to do is wrap the customization code in an if statement to determine if the checkbox is enabled or disabled:

{% if settings.display_discount_box %}
<style>
@media (max-width: 999px) {
  .order-summary--is-collapsed {
    height: 100% !important;
  }
  button.order-summary-toggle.order-summary-toggle--show {
    display: none;
  }
}
</style>
{% endif %}

Want to see what customizations can be supported with settings_schema.json? Start with an introduction to theme options.

Want To Know The 15 Tools We Used To Generate Over $24 Million For Our Clients?

This past year, we have tested dozens of products to figure out which ones yield the best results.
Our toolbox contains some of the most impactful tools we found to grow a brand on Shopify.