To empower you to create a design that fits your brand, we have created a free app design template powered by Figma. In this article, we will walk you through the different banners you can create by downloading our template to your Figma account!
Important Note: Before getting started to access your free Figma template contact us through LiveChat within your dashboard or email us at [email protected]!
Collection Banners
Improve your app’s navigation by customizing your multi-level collection menu. The collection banners can be displayed under the hamburger menu to show all of your collections.
Multipage Banners
Utilizing the ‘Custom Image Block’ you can create a unique and interactive experience within your app. Leveraging the page builder feature with this block, allows you to create a dynamic experience while highlighting collections, content, and more!
Show Now Banner
Using the ‘Show Now Banner’ is a great way to highlight a product or collection using a lifestyle image. This banner usually includes an image and copy that reflects the product or collection with a CTA (Call to Action).
Pro-Tip:
Check the contrast of the copy and the background image for the best readability.
Figma Design Tips:
Select the background image, in the ‘Design’ panel on the right side of Figma, add ‘Fill Layer’ by selecting the ‘+’ icon. Make sure it’s black or a darker hue and lower the opacity.
Add a drop shadow to the copy. Select the text you want to add a drop shadow to. In the ‘Design’ panel on the right side, click on ‘Effects’ and adjust drop shadow settings.
Shop By Banner
With a ‘Shop By Banner’ block, you can display multiple collections in your app without taking up too much space. This block is great to use under a collection carousel block or on its own ‘Shop By’ page. The ‘Shop By Banner’ can also be used to create a category to separate collections underneath. For example, you can use a longer banner with the category name, ‘Shop Men's Styles’ and then separate the collections underneath like ‘Just Landed’ or ‘New Arrivals’.
Pro-Tips:
Keep thin, constraint banners throughout the page. Include an icon to show that the collection can be clicked into (similar function as having a CTA).
Add a product image to the banner to keep them unique from one another.
Video Banner
Incorporating video content within your app creates a unique experience for your app users and builds brand loyalty by offering more than simply early access to sales. Incorporating a ‘Video Banner’ allows you to create a design that represents your video content. Link this banner out to your video's URL through the dashboard.
Pro-Tip:
Adding a play button, video title, and description helps users understand what the video is about before clicking on the banner.
Figma Tip:
Use the same method as your ‘Shop Now Banners’ to make sure the play button is clearly displayed (opacity overlay/drop shadow).
Blog Banner
Create a content hub within your app by adding a ‘Blog Banner’. Incorporating your blog is a great way to show content that represents your brand.
Pro-Tips:
Include an image, date, title, brief description or excerpt, and CTA button.
Adding an image helps readers grasp what your blog post is about.
Use the first few lines of your blog post to loop readers in, then include a CTA that links out to the rest of the post.
Locations Banner
Have a brick-and-mortar store? Incorporating a ‘Location Banner’ is a great way to highlight where customers can come to visit you in person.
Pro-Tips:
Include the location name, address, hours, additional information, and CTA.
Include an image or map of the location.
Footer Banners
Utilizing the ‘Custom Image Block’ you can create footer banners within the app to promote your social accounts, add informational links or showcase your payment provider options! Add footer banners to your app's home screen, your product detail pages, or use the page builder feature to add these footer banners within all sections of your app!
Considerations
The free Figma template is available to all Tapcart Customers. Please reach out to us at [email protected] to get access!
More Questions
To learn more about Tapcart, visit Tapcart Academy to become a mobile app expert!
If you have additional questions, we’re happy to help! Please reach out to a Tapcart Team member through our LiveChat in your dashboard or you can email us at [email protected]!