The Problem
German laws are hard to cover with Shopify
Shopify is an awesome tool to build your own eCommerce store.
However, german merchants have a hard time complying with german laws with Shopify’s default settings.
Merchants have the options to build in custom code for their online shops, which is hard to do and requires coding skills.
In particular, merchants struggle to add these sections:
- Checkboxes for Terms of Service
- Checkboxes for expiry of the right of withdrawal for digital content
- Tax information
- Unit prices
- Essential product features
- Shipping and payment terms
The Solution
Shopify App to cover these laws
Together with IT-Recht Kanzlei from Munich, we’ve built a Shopify app that helped german merchants comply with these laws and automatically adds required sections to the online shops.
My Role
Design & Development
My part was designing and developing the Shopify app.
- Server + API
- Shopify App
- Design
- Admin-Panel
Tech Stack
Structure
Easy setup
Merchants installed the app, went through the onboarding, and answered all the questions necessary.
In order to give merchants an easy way to set up the app, we wanted to answer as many questions as possible by using the Shopify API.
A lot of questions for the shipping terms could be answered automatically by fetching the shipping zones via an API call. With that, we could prefill most of the questions so merchants just had to confirm these settings.
Integrating this made it possible to go through the entire setup in 5-10 minutes.
After that, merchants had to go through only 5 steps to set up everything they needed in their online shop. Once finished, merchants could customize the design of the sections so it fits the design of their online store.
In order to give merchants an easy way to set up the app, we wanted to answer as many questions as possible by using the Shopify API.
A lot of questions for the shipping terms could be answered automatically by fetching the shipping zones via an API call. With that, we could prefill most of the questions so merchants just had to confirm these settings.
Integrating this made it possible to go through the entire setup in 5-10 minutes.
After that, merchants had to go through only 5 steps to set up everything they needed in their online shop. Once finished, merchants could customize the design of the sections so it fits the design of their online store.
Deep Dive
Infrastructure for the scale
Fast loading times are crucial for Shopify merchants.
Especially when adding new sections into the actual online store itself.
So we had to approach the app with this in mind:
Fast loading times
Handle a ton of API calls
Very easy to configure
No-code for merchants
It had to be well crafted…
The page speed of Shopify stores is VERY important for merchants and their customers.
We tried a lot of different approaches and it took a lot of redos to get a great result.
First of all, the script had to get the current settings of the app.
Since a lot of settings like the essential product features and unit prices are product-dependent, we had to scan the page first and filter out the displayed products.
We also had to figure out if a product could be added to the cart on a page. Additionally, we had to check whether a customer could checkout on a particular page.
The sections we needed to add were dependent on these conditions.
In order to find out what we had to manipulate on a page, we searched each page for these indications:
But this isn’t too hard, is it?!
Yes and no…
In theory, this is relatively easy. You just have to check a page of a shop for specific indications.
It also is easy to do this for one store.
It’s even easy to do this for an entire theme.
But having this work on EVERY store with EVERY theme is very hard.
Themes can have different configurations and merchants could even insert custom code into a page.
So there was no one size fits all.
I ended up reaching out to the big Shopify theme developers to get their themes to test out the app.
It became clear that we had to write different code for different themes.
Therefore we built custom files for each theme that were loaded accordingly to the theme in use.
After tweaking the identifying functions for 40+ themes, we just had to load the right file…
… which was also not too easy.
When installing a Shopify theme via the Shopify Theme Store, you can identify the theme used by its id.
However, if you upload a theme via zip, you don't get the id and have to identify the theme in a different way.
If I remember correctly, we could identify the theme by its id on about 65% of stores.
We came to 98+% by checking the name of the used zip file for the name of each theme.
But now it had to work, right?
Almost…
Themes can have different versions and when we launched our app, Shopify decided to launch Online Store 2.0. That meant a lot of Shopify theme developers did big updates on their themes.
Therefore it was easier for us to also build in an option to write custom files for each store. We already covered most of the stores and identifying the right sections already worked really well. However, at some stores, it was just easier to customize the code after the install.
The page speed of Shopify stores is VERY important for merchants and their customers.
We tried a lot of different approaches and it took a lot of redos to get a great result.
First of all, the script had to get the current settings of the app.
Since a lot of settings like the essential product features and unit prices are product-dependent, we had to scan the page first and filter out the displayed products.
We also had to figure out if a product could be added to the cart on a page. Additionally, we had to check whether a customer could checkout on a particular page.
The sections we needed to add were dependent on these conditions.
In order to find out what we had to manipulate on a page, we searched each page for these indications:
- Checkout buttons
There were multiple ways to find checkout buttons. Most of the time, there was a checkout form with a submit button that was named "checkout". - Product forms/add to cart buttons
We had to find out if a product could be added to the cart.
This was the hardest part to solve. Sometimes, Shopify theme developers used forms with the layout added as children. Sometimes these forms had no children. Sometimes theme developers didn’t use forms, but only buttons with a functionality. Additionally, we had to identify the product that was used in these forms. There are countless different ways. - Prices
If a product needed some more information like essential product features, tax info, unit prices, or shipping times, we had to add these below the price of a product. We also had to be certain that the displayed price really was the price we were searching for. It sounds trivial but can become very complex fast.
But this isn’t too hard, is it?!
Yes and no…
In theory, this is relatively easy. You just have to check a page of a shop for specific indications.
It also is easy to do this for one store.
It’s even easy to do this for an entire theme.
But having this work on EVERY store with EVERY theme is very hard.
Themes can have different configurations and merchants could even insert custom code into a page.
So there was no one size fits all.
I ended up reaching out to the big Shopify theme developers to get their themes to test out the app.
It became clear that we had to write different code for different themes.
Therefore we built custom files for each theme that were loaded accordingly to the theme in use.
After tweaking the identifying functions for 40+ themes, we just had to load the right file…
… which was also not too easy.
When installing a Shopify theme via the Shopify Theme Store, you can identify the theme used by its id.
However, if you upload a theme via zip, you don't get the id and have to identify the theme in a different way.
If I remember correctly, we could identify the theme by its id on about 65% of stores.
We came to 98+% by checking the name of the used zip file for the name of each theme.
But now it had to work, right?
Almost…
Themes can have different versions and when we launched our app, Shopify decided to launch Online Store 2.0. That meant a lot of Shopify theme developers did big updates on their themes.
Therefore it was easier for us to also build in an option to write custom files for each store. We already covered most of the stores and identifying the right sections already worked really well. However, at some stores, it was just easier to customize the code after the install.
The Results
160+ active stores
Currently, Legal Pro is used by 160+ active stores.
It was featured in the German Shopify App Store and has a 5.0 rating.
It was featured in the German Shopify App Store and has a 5.0 rating.