“E-Commerce UI Template for Xamarin.Forms” Documentation by “Ahmet Zeki Eymür” v1.0

“E-Commerce UI Template for Xamarin.Forms”

Created: 10/18/2021
By: Ahmet Zeki Eymür
Email: azeymur@gmail.com

Thank you for purchasing my item. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Table of Contents

Introduction - top

'E-Commerce UI Template for Xamarin.Forms' is a user interface (UI) template made using Xamarin.Forms. Xamarin.Forms is an open-source UI framework. It allows developers to create user interfaces in XAML with code-behind in C#. This product is provided to you in the form of a Visual Studio 2019 project. You can download Visual Studio 2019 from here https://visualstudio.microsoft.com. Community Edition is free and very easy to install. You can see how you can install Visual Studio with Xamarin from the video below.

After the installation is finished, extract the forbuyers.zip folder. Double-click on the Visual Studio solution file named 'EcommerceTemplate.sln' in the 'sources' folder. Wait for Visual Studio to open and fully load the solution. After the first loading, I recommend cleaning the solution and compiling it again. To do this, click 'Build -> Rebuild All' from the menu.

If IntelliSense gives unnecessary warnings, delete the 'obj' and 'bin' folders in the all project folders and try to compile again. If you haven't had a problem, you don't need to delete these folders.


There is a mock data source and service in the project. So you can run the application immediately to test without doing anything.

Customization - top

Tasks such as name and logo change that you need to do before publishing your applications are explained here. The processes required for both platforms are different.

Name and Version - top

For Android, double click to open the 'EcommerceTemplate.Android\Properties\AndroidManifest.xml' file in the Solution panel. You can change the Application Name, Package Name, Version Number and Version Name from here. Your package name must be the same as your package name in the Play Store. For more information about this file, you can refer to the following document:


For iOS, double click to open the EcommerceTemplate.iOS\Info.plist file int he Solution panel. Enter your Application Name in the 'Bundle Display Name' text box. Your Bundle Identifier and Version must be the same as your Bundle Identifier and Version in the App Store.


For Android, The app logo is also set in the AndroidManifest.xml file. You must have added the logo you want to use to the resources as a Drawable or mipmap. Then you can select your logo from the 'Application icon' drop-down list.

For iOS, double click to open the EcommerceTemplate.iOS\Assets.xcassets file in the Solution panel. Select the 'AppIcon' image set. Resize and assign the logo you want to use to the slots of the devices you want to support.


Splash Screen - top

For Android, double click to open the EcommerceTemplate.Android\Resources\drawable\splash_screen.xml file in the Solution panel. Assign the image you want to use to the 'android:src' attribute of the 'bitmap' tag.


To change background color, double click to open the EcommerceTemplate.Android\Resources\values\colors.xml file in the Solution panel. Assign the color you want to use in the background to the color called splash_background.


By default, the Splash Screen appears for 5000 milliseconds (5 seconds). You can change this time from the following line in the EcommerceTemplate.Android\SplashActivity.cs file:

await Task.Delay(5000);


For iOS, double-click the file below on a MacOS computer and it will open in XCode:
If the file does not open by itself, open it manually by clicking LaunchScreen.storyboard from Project Navigator. Open the Document Outline and Attributes Inspector panels if they are closed. To change the background color of the Splash Screen, select the View component in Document Outline and set the background value to the desired color from the Inspector. Inside the View component in the Document Outline you will see 2 UILabels for Brand and slogan and a UIImage for your logo. Edit them according to your needs using the Inspector.


Translation - top

The texts in the project are not hard coded. All strings are added as a resource in the following file: EcommerceTemplate\Resources\AppResources.resx
Changing the value of a text in this file will have an effect on the entire application. The file has a simple format:

<data name="Cancel">

<data name="EnterSearchTerm">
  <value>Enter search term</value>

<data name="Home">

You can translate the application to another language by changing the text between the <value> tags. You must not change the 'name' attributes of the <data> tag. It is also possible to support more than one language in your application. For this, refer to the following document: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/localization/text

Material Icons - top

Material design icons is the official icon set from Google. They can be browsed at https://fonts.google.com/icons. Material design icons have been added to the project as fonts for easier use.

You can use an icon in C# like:

You can use an icon in XAML by:

Color Themes - top

The project has 14 color themes created using the Material color palette. Each theme supports both light and dark mode. Color themes are in the 'Themes' folder. Which theme to use is specified in the followinf file: ECommerceTemplate\App.xaml You can use the color theme you want by changing the line below.

<ResourceDictionary Source="Themes/OrangeTheme.xaml">

For example, you can switch to the green color theme by changing this line as follows.

<ResourceDictionary Source="Themes/GreenTheme.xaml">

All color themes in the project are listed below:

Light Mode Dark Mode
RedTheme.xaml PinkTheme.xaml RedTheme.xaml PinkTheme.xaml
PurpleTheme.xaml DeepPurpleTheme.xaml PurpleTheme.xaml DeepPurpleTheme.xaml
IndigoTheme.xaml BlueTheme.xaml IndigoTheme.xaml BlueTheme.xaml
CyanTheme.xaml TealTheme.xaml CyanTheme.xaml TealTheme.xaml
GreenTheme.xaml LimeTheme.xaml GreenTheme.xaml LimeTheme.xaml
AmberTheme.xaml OrangeTheme.xaml AmberTheme.xaml OrangeTheme.xaml
DeepOrangeTheme.xaml LightGreenTheme.xaml DeepOrangeTheme.xaml LightGreenTheme.xaml

You can create new theme options yourself by copying and modifying these files. If you look inside the theme files, you will see that they are simple.

Color Key Description
PrimaryColorLight Primary color for light mode.
PrimaryColorDark Primary color for dark mode.
PrimaryLightColor One or two shades lighter of PrimaryColor. It is used in the background gradients of buttons and badges. It is only effective in light mode.
TextColorOnPrimaryLight Color of text above Primary Color for Light mode. Used on buttons with a background.
TextColorOnPrimaryDark Color of text above Primary Color for dark mode. Used on buttons with a background.

Only the colors in the material palette are used in the themes. Color codes have been added as a comment next to all of them. Normal tones are used for light mode, and brighter tones starting with 'A' are used for dark mode.

Control Templates - top

There are 3 control templates in the project:

Badge Chic Button Rating Stars

The Badge control template shows an icon in the middle of a framed circle with a gradient background. It is derived from ContentView. In addition to the properties of 'ContentView' it has a bindable property called BadgeIcon. This property is type of string. The material icon to be displayed in the badge is assigned to this feature.

You can use Badge Control Template in XAML by:

The ChicButton control template is a button with two icons. It is derived from ContentView. It has three bindable properties in addition to the properties of ContentView:

You can use Badge Control Template in XAML by:

The RatingStars control template indicates the level of rating out of five stars. It is derived from ContentView. It has two bindable properties in addition to the properties of ContentView:

You can use Rating Control Template in XAML by:

For more information about control templates, see the following document: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/control-template

Removing Mock Service - top

The project has a mock service and data source for testing. When you add your own service to the project, you will no longer need this mock service and data source.

You can remove the mock data source from your project by deleting the following folder:

To remove the fake service from your project, delete the following file:

Finally, you need to delete the following lines from the constructor of the App class:

DependencyService.RegisterSingleton(new BannerDataStore());
DependencyService.RegisterSingleton(new CategoryDataStore());
DependencyService.RegisterSingleton(new CustomerDataStore());
DependencyService.RegisterSingleton(new AddressDataStore());
DependencyService.RegisterSingleton(new RatingDataStore());
DependencyService.RegisterSingleton(new FavoriteDataStore());
DependencyService.RegisterSingleton(new CartItemDataStore());
DependencyService.RegisterSingleton(new ProductDataStore());
DependencyService.RegisterSingleton(new OrderItemDataStore());
DependencyService.RegisterSingleton(new OrderDataStore());
DependencyService.RegisterSingleton(new VariantDataStore());


Once again, thank you so much for purchasing this product. As I said at the beginning, I'd be glad to help you if you have any questions relating to this product. No guarantees, but I'll do my best to assist. If you have a more general question relating to the items on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Ahmet Zeki Eymür

Go To Table of Contents