Taking design control of Shopify Policies

Shopify Policies are a fairly new feature within Shopify - they're simple, text-based pages which live under the path "shop.com/policies/". At this this time of writing, there's five Policies you can choose to use:

• Refund policy - shop.com/policies/refund-policy
• Privacy policy - shop.com/policies/privacy-policy
• Terms of service - shop.com/policies/terms-of-service
• Shipping policy - shop.com/policies/shipping-policy
• Subscription policy - shop.com/policies/subscription-policy

They're setup via Shopify Admin -> Settings -> Legal:

By default, a Policy looks something like this on the front-end:

It doesn't look terrible, but I recently worked on a project where the designer wanted these pages to be more interesting with a different layout, images and other varied content. Shopify doesn't give you much creative freedom with Policies, all you have access to is a rich text editor for the content and you can use the theme CSS file to style the Policy pages - there's only so far you can go with this.

My first thought was to just stop using Policies to display this content and revert to using Pages, this way I can create a custom page template for each policy and make use of Sections as the content-input mechanism to code the page however I please. It turns out this isn't feasible if the store uses the Google channel because the Google Merchant Centre requirements state that you must use actual Policies and not regular Pages for this content.

With some Liquid trickery in the store theme, I was able to achieve the best of both worlds with keeping the Policy URL structure the same while using a custom template to code up each Policy page to look however I please, with theme Sections as the content-input mechanism.

It all starts within theme file "/layout/theme.liquid", look for this line:

{{ content_for_layout }}

To render a custom Section for the Refund Policy instead of the default Policy content, I changed it to this:

{% if request.path == '/policies/refund-policy' %}
  {% section 'refund-policy' %}
{% else %}
  {{ content_for_layout }}
{% endif %}

With this in place, I'm able to format the "refund-policy" Section however I please and ended up with this design:

Notice how the URL path is still "/policies/refund-policy" and the page content is structured via a custom design.

If you want to add other custom Sections to other Policies, tweak the above code to something like this:

{% if request.path == '/policies/refund-policy' %}
  {% section 'refund-policy' %}
{% elsif request.path contains '/policies/privacy-policy' %}
  {% section 'privacy-policy' %}
{% elsif request.path contains '/policies/terms-of-service' %}
  {% section 'terms-of-service' %}
{% elsif request.path contains '/policies/shipping-policy' %}
  {% section 'shipping-policy' %}
{% elsif request.path contains '/policies/subscription-policy' %}
  {% section 'subscription-policy' %}
{% else %}
  {{ content_for_layout }}
{% endif %}

This will render a custom Section for every Policy setup in the store.

This seems like a convoluted solution but I don't think there's any other way to achieve this for now - as always, it's all fun and games with Shopify development!