Learn everything you need to know about adding, updating, and managing all content on your app, from text descriptions to audio, video, and more.
Editing the Main Navigation
Adding a New Screen
To add a new screen to your app’s main navigation, do the following:
- Click on the + button next to “Screens” at the top of your site navigation pane.
- Browse the list of categories and pick which screen you’d like to add to your app.
- Click on the screen you want to add.
After clicking the screen you want to add to your app’s main navigation, it will load and populate in the builder.
Renaming a Screen
- Click the screen’s name within the navigation list.
- Click the … menu icon in the top right corner.
- Click “Rename.”
- Type in the new name for this screen.
- Click “Save.”
The Shoutem App Builder will reload, and your screen will now appear with the new name you’ve given it.
Deleting a Screen
If there’s a screen you want to remove from the main navigation, follow these steps:
- Click on the screen’s name within the navigation list.
- Click the … menu icon in the top right corner.
- Confirm that you want to delete this main navigation screen by clicking the toggle.
- Click “Delete.”
You’ll receive a success notification once the screen has been deleted.
Revising Content within a Screen
Depending on the screen you’re working within, content types can vary widely. This can include titles, paragraph copy, profiles, author names, images, locations, URLs, social media links, and so much more.
Some screens even allow you to create categories for several pieces of content to live within.
The following instructions detail the basics of revising content within your main navigation screens, however, we encourage you to click through each screen in your app to confirm that you’ve revised all necessary content.
Renaming Preexisting Categories
If the screen you’re working within includes categories, you’ll notice a horizontal, tabbed bar like this:
Updating category names follows the same process of updating screen names:
- Click on the … menu icon directly to the left of the category’s current name.
- Click “Rename.”
- Type in the new name for this category.
- Click “Save.”
The Shoutem App Builder will reload, and your category will now appear with the new name you’ve given it.
Adding or Deleting a Category within a Screen
Adding and deleting categories within a screen is also very similar to adding or deleting screens to your main navigation.
To add a category:
- Click on the + in the horizontal category bar.
- Type in a name for your new category.
- Cick “Save.”
To delete a category:
- Click on the … menu icon directly to the left of the category’s current name.
- Click “Delete.”
Updating Preexisting Content
Screens are added to your main navigation with pre-populated content that shows you how to use each feature to its fullest extent. We recommend updating this preexisting content prior to publishing your app.
- In the navigation list, click on the screen you’d like to edit.
- Sort through the content that loads, including within categories. Look for pencil icons indicating the ability to update a particular section.
- Click the pencil icon for each section you’d like to update. Make changes to preexisting content as needed. This may include content titles, paragraph copy, author name, images, locations, URLs, social media links, and more.
- After making your changes, click “Save.”
Adding or Deleting Content
To add new content within a screen, do this:
- Click on an existing screen, e.g., “News.”
- Navigate to the category you’d like to add new content within.
- Click on the “Add Item” button on the top right.
- Fill in the content details for your new item.
- When content is filled out, click “Add.”
To delete content:
If there is any pre-existing or unnecessary content in your template that you’d like to remove, simply navigate to the content section and look for the trash can icon. Click on the trash can and confirm that you’d like to delete that item.
Previewing Content Changes
You can preview your app at any time by utilizing the built-in preview tool on the right side of the interface. Click the play button to see a live preview of your app with its current content and navigation.
Refreshing the Preview Tool:
You can refresh the preview tool as needed while building out your app to view and approve updates that you make while building. To do so, follow these steps:
- Pull down on the preview to refresh the app content.
- Within the preview, navigate to the screen and/or category that you’ve updated.
- View the newly added or updated content.
Restarting the Preview Tool for Major Changes:
To preview larger changes you’ve made, such as adding a new category, you should restart the preview tool. Here’s how:
- Click the power button to turn the preview off.
- Click the play icon to reload the preview.
Congratulations! You’ve successfully added and managed content using Shoutem Builder. In the next video, we’ll explore design and layout options to further customize your app. Stay tuned!
Building Out Your Shoutem App
This tutorial on adding and managing content using the Shoutem App Builder is just one in a larger series on Getting Started with Shoutem. Learn more about customizing your Shoutem app with the following in-depth tutorials from the series:
