Introducing Styles for No-Code Paywalls

No-code paywalls are a huge part of what makes the Nami platform so valuable for our customers.  With just a couple lines of code to setup our SDK and then invoke the paywall, developers and app publishers are able to start selling in-app purchases and subscriptions to their customers on Android and Apple devices without having to write any code to process the transactions or manage the complexity of the subscription lifecycle.

Today we are adding even more power and flexibility to our no-code paywall solution by introducing styles.

Prior to the introduction of styles, Nami users were limited to matching their brand on the purchase screen by selecting imagery and uploading it as a background.

Now you can reflect your brand on the purchase screen by adjusting the many styles on the paywall to match your brand palette, including the colors of all fonts, buttons, and the bottom overlay on the paywall.  

Let’s start by opening up the Cloud Paywall Creator in the Nami Control Center.

Simply look for the Theme subsection at the end of each screen where you modify the content and design of your paywall.  You’ll now see new options to adjust colors and font sizes.  Click on a color label to open up the color picker.

Additionally, all text now has the options to add a shadow.  Simply turn on the toggle next to Shadow for each text field that you wish to have a shadow.  Select a radius and color that works with your designs.  See the changes previewed right away our our Paywall Previewer in the web browser.

Add the paywall to a live campaign and click Update and you’ll see the changes reflected in your mobile app right away.

Have really great imagery that you really want to highlight in the design of your paywall?  Simply switch off the toggle for Use Bottom Overlay and it will go away, placing the buttons for your in-app purchase products directly on the image.

Drawing attention to your most popular SKUs can both help in increasing conversion rates on your paywalls and increasing revenue by driving users to select different SKUs that may reduce churn rates or increase conversions from free trials with your users.  

We have introduced 2 new features to help you put the focus where you want it.

• Drag and drop SKU ordering
• Featured SKU colors

👉Read more: Reasons to Use a No-Code Paywall Builder

You’ll find both of these options on the Products section of the paywall.  Put your SKUs in the right order and change the color of your best seller!

‍

If you already spent all your time hunting for the best image for your purchase screen, open the eyedropper tool to select colors directly from your image into any color picker tool in the paywall design.  Quickly match the rest of your paywall to the image you’ve selected.

Have a designer that can help you make your paywalls even better or want to reuse a great style you already built in another paywall?  No problem.  Use the export button on the Overview tab to get a JSON of all your styles.  Modify it and then import it into the paywall to get all your style information right away.

Happy designing and we are excited to see the beautiful designs you are able to pull together using our new tools!

👉Read more: Five Paywall Product Best Practices

Please note that to fully leverage the new style options requires that your are using the following versions of our mobile platforms.

• Android: v0.5.0+
• Apple:  v2.4.0+
• React Native: v0.3.0+

If you still have users that are using an older version of the SDK, paywalls will display in the old style with no font size or color changes.