Modifying the Store

In this lesson, you will learn how to adjust the UI for the Unity Web Store using Unity’s UI Toolkit. The Unity Web Store uses several key assets such as prefabs, UXML templates, and style sheets to build and style the store interface. This lesson will guide you through customizing these UI components to match your desired look and feel.

1. Understanding the Key UI Components

The Unity Web Store UI is built using various assets located in the Assets/HNGamers/UnityStore directory. These assets include prefabs, templates, styles, and settings that you can customize to adjust the UI.

Here are the key components you’ll be working with:

• UnityStore.prefab – This is the base prefab for the Unity Web Store, which contains the structure of the store UI.
  Assets/HNGamers/UnityStore/Prefabs/UnityStore.prefab

• StoreTemplate.uxml – This UXML file defines the layout of the store interface. You can modify the layout, elements, and structure here.
  Assets/HNGamers/UnityStore/Resources/StoreTemplate.uxml

• UnityDefaultRuntimeTheme.tss – This TSS file contains default runtime theme settings. Modify it to change default styles like colors and fonts.
  Assets/HNGamers/UnityStore/Resources/UnityDefaultRuntimeTheme.tss

• UnityStoreStyle.uss – The USS (Unity Style Sheets) file that controls the custom styles for the store. Modify it to change the appearance of the store’s UI elements.
  Assets/HNGamers/UnityStore/Resources/UnityStoreStyle.uss

• Store text settings.asset – This asset contains text settings such as font size, line spacing, and more. It controls how text appears in the store.
  Assets/HNGamers/UnityStore/Resources/Store text settings.asset

• StoreTemplate.asset – This asset stores specific template configurations for the store. It can be used for preset UI settings or layouts.
  Assets/HNGamers/UnityStore/Resources/StoreTemplate.asset


2. Modifying the UnityStore Prefab

The UnityStore.prefab is the main prefab that represents the store in your scene. This mainly references items for the store to load. We go over it’s usage in Setting up the Unity plugin. 

3. Customizing the Store Layout with StoreTemplate.uxml

The StoreTemplate.uxml file defines the layout and hierarchy of UI elements in the store. It uses UXML, Unity’s XML-based language for UI structure.

1. Open StoreTemplate.uxml:
   • Navigate to Assets/HNGamers/UnityStore/Resources/StoreTemplate.uxml.
   • Open the file in UI Builder or a text editor.
2. Modify Layout:
   • You can rearrange elements such as buttons, labels, and containers.
   • For example, if you want to move the cart button to the top-right corner, locate the button in the UXML file and adjust its position.
3. Preview Changes:
   • After making changes, open the Unity Store prefab in the scene and preview the UI changes in the Game view.

4. Adjusting Styles with UnityStoreStyle.uss

The UnityStoreStyle.uss file contains the style rules for the store, similar to how CSS works for web development. You can modify this file to change colors, fonts, margins, paddings, etc.

1. Open UnityStoreStyle.uss:
   • Navigate to Assets/HNGamers/UnityStore/Resources/UnityStoreStyle.uss.
   • Open the file in UI Builder or a text editor.
2. Modify Styles:
   • Adjust properties such as background-color, font-size, padding, and margin to fit your desired style.
   • Example: To change the store’s background color, locate the rule for the store container and modify the background-color property.
     .store-container {
background-color: #333;
color: white;
}

3. Save and Preview:
   • Save the changes and preview them in the Game view to see how the new styles apply to the store UI.

5. Working with UnityDefaultRuntimeTheme.tss

The UnityDefaultRuntimeTheme.tss file contains runtime theme settings. You can modify this file to customize the overall theme of the store.

1. Open UnityDefaultRuntimeTheme.tss:
   • Navigate to Assets/HNGamers/UnityStore/Resources/UnityDefaultRuntimeTheme.tss.
   • Open the file in UI Builder or a text editor.
2. Customize Theme Settings:
   • You can adjust properties like default fonts, colors, and other runtime theme settings.
   • For example, change the default font to a custom one:
     .unity-text-element {
font-family: "MyCustomFont";
}


6. Modifying Text Settings

The Store text settings.asset contains the text settings used in the store, such as font size, line spacing, and more.

1. Open the Asset:
   • Navigate to Assets/HNGamers/UnityStore/Resources/Store text settings.asset.
   • Open the asset in Unity’s Inspector.
2. Adjust Text Properties:
   • Change settings like font size, line spacing, or text alignment.
   • Example: If you want to increase the font size of the store’s titles, simply modify the font size property in this asset.
3. Save Changes:
   • After adjusting the settings, save the asset and preview the updated text in the store.

7. Customizing the StoreTemplate.asset

The StoreTemplate.asset is used for configuring template-specific UI settings. It contains predefined UI layouts and settings.

1. Open StoreTemplate.asset:
   • Navigate to Assets/HNGamers/UnityStore/Resources/StoreTemplate.asset.
   • Open it in the Unity Inspector.
2. Modify Template Configurations:
   • Adjust specific settings related to the store’s layout and behavior. This can include properties like the number of visible items per page or default button layouts.
3. Save Changes:
   • After modifying the template, save the changes and preview them in the Unity scene.

Summary

In this lesson, you learned how to adjust the Unity Web Store’s UI using several key assets like prefabs, UXML templates, and USS style sheets. You now have the tools to fully customize the look and feel of your store, ensuring that it matches the aesthetic of your game.

In the next lesson, we will cover advanced UI customization, including dynamic UI elements and integrating user interaction feedback.