# Overview β€” Screens, Database, Layout Settings, Use Cases ### Feature Template Overview The Store with Shopping Cart brings the full e-commerce experience to your app. Users can browse multiple categories of products, view details about those products, add them to a shopping cart, and purchase them with Stripe. This template is perfect for any goods you’re selling through your app, whether physical or digital. ### Screens Overview πŸ“š **Instructions Screen** Quickly get an overview of the template with quick tips, a help doc, and associated templates that may be of interest. *This screen may be deleted at anytime.* #### User Screens πŸͺ **All Products** View all products from every category πŸ”Ž **Category** Filter down your products to only those in a specific category πŸ‘š **Product Detail** Learn more about a product and add it to your cart πŸ›’ **Cart** View and remove the products in your cart or check out πŸ’³ **Checkout** Users can add their address for shipping, enter their CC number using Stripe, and complete their purchase πŸŽ‰ **Congrats** Success screen for when a purchase is completed πŸ‘€ **Sign in to Shop Modal** A modal reminding the user to sign in (the shopping cart requires that users be logged in) ### Database Overview The Store with Shopping Cart template comes with a database that contains sample data. Each Adalo database contains Collections and each collection comes with the associated Properties. Any necessary relationship between the collections is set up, as well. {% hint style="success" %} **Important Note About the Database:** If you **delete** a Collection or Property from the Feature Template, this could impact the functionality of your app. If you **add** a Collection or Property to your Feature Template, this will not impact the functionality of your app. {% endhint %} Below is an outline of the included Collections and their Properties. The Collection name is bolded and includes a description. The Properties include their name, property type (in brackets), and a description. #### Basic Collections & Properties: #### πŸ‘₯ **Users** The Users Collection automatically comes with every Adalo app. This collection will hold all the information related to anyone who uses the app. This information is initially collected from a user when they sign up to use your app. * Email \[Text] β€” the user’s email address. * Password \[Encrypted] β€” the user’s password to log into the app. This cannot be viewed by anyone, including the administrator. * Username \[Text] β€” the user’s username. * Full Name \[Text] β€” the user’s first and last name. * Profile Photo \[Image] β€” the user’s profile picture. * Orders \[One-to-Many Relationship with Orders] β€” all active and completed orders from each user. #### πŸ›’ Orders The Orders Collection shows both current and past orders. Current orders are shopping carts that have not been through checkout. Completed orders are those where the user has completed checkout and paid for their items. * Name \[Text] β€” this is automatically set to the user’s name and the date/time the order was created * User \[One-to-Many Relationship] β€” the user the order belongs to. * Complete \[True / False] β€” whether or not the order is completed. Set to false by default. * Order Items \[One-to-Many Relationship] β€” the products that are inside the order. * Shipping Address \[Location] β€” the location to ship the order. Note that location features are not available on all Adalo plans and you may need to upgrade to fully use this property. It also requires a Google Maps API key. * Secondary Address Info \[Text] β€” this is where the user enters things like apartment number, suite number, or any additional address information. #### πŸ›’ Order Items The Orders Items Collection shows both current and past orders. Current orders are shopping carts that have not been through checkout. Completed orders are those where the user has completed checkout and paid for their items. * Name \[Text] β€” this is automatically set to the product’s name as it is added * Price \[Number] β€” this is automatically set to the product’s price as it is added. It is used to sum the total value of the order in the cart. * Order \[One-to-Many Relationship]] β€” each order item is associated with one order * Product \[One-to-Many Relationship] β€” each order item is associated with the product the user was adding to the cart. #### πŸ“‹ Categories The Categories Collection is where you will create the different categories for your store. Each product you add can then be tied to a specific category. * Name \[Text] β€” this is your category name (example: Apparel) * Banner \[Image] β€” the image that sits at the top of each category screen * Products \[One-to-Many Relationship] β€” the products associated with that category #### πŸ“‹ Products The Products Collection is where you will add all the products that you’re selling. * Name \[Text] β€” the name of the product * Description \[Text] β€” a brief description of the product as well as any details potential buyers might want to know * Price \[Number] β€” the price of the product * Image \[Image] β€” an image of the product * Category \[One-to-Many Relationship] β€” Every product belongs to one category * Order Items \[One-to-Many Relationship] β€” the order items associated with this product. ## Layout Settings Each screen in the Social Media Feed Feature Template is created using responsive design. The screens will look good on any device or tablet. Most screens have been designed with Custom Layouts. If you add a new component to a screen, you might notice that the other screen sizes are impacted. ### Layout Overview To view or edit the layout for different screen sizes β€” click the Screen title to reveal the dropdown.
The default view for this template is Desktop. When you change the screen size for one screen in the Builder, it does not change the screen size of the rest of the screens on the canvas. #### Hidden Components
In each view, there may be components that do not appear on Desktop, but are visible on Mobile. These are grayed out in the lefthand panel & denoted with an icon. Another way to view which device components are visible on is the Layout Tab here:
#### Custom Layout
Some components come with custom layouts based on screen size. To view those settings, check the Layout Tab & scroll to the Custom Layout Settings. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.adalo.com/feature-templates/store-with-shopping-cart/overview-screens-database-layout-settings-use-cases.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.