How to setup your own 'Home' page
What is the 'Home' page?
The 'Home' page is accessed via the bottom toolbar of your Oomph app. It is a highly customizable page that creators can use to tailor specific content for their users to see, e.g. a special promotion, an event, a competition, or even just as a regular homepage.
The term 'Home' is used very loosely here, as the name can be changed on a per-app basis. So if your app needs a page to display a catalog that is linked to your website, you can change the button to say 'Store' instead.
Note: By default, the button will be named 'Home'. If you wish to change the name, please contact your Account Manager for further instructions.
How do I use it?
There are two ways to use the 'Home' page: you can attached a single HTML file with all the content and inline CSS, or simply include a URL.
The URL method is the simpler of the two, and is great if you only wish to point the users to a specific webpage. e.g. your home page, or a promotional page.
The HTML method is more custom, and will require basic HTML/CSS knowledge if you wish to create your own. However, we do supply a free responsive 'featured issues' template, which you can customize to include issues of your app.
Note: Responsive templates change the way the content is displayed based on your device and orientation. This is perfect if your app is on both the iPad and iPhone.
Once you have your HTML file completed or a URL to point to, you are ready to upload it to your App by following these simple steps:
- Log into your account on Oomph Publish.
- On the side bar, locate and click on the Feature/Store button under 'OPTIONAL' section.
- If you wish to use a URL, simply paste your link in the 'URL' field.
- If you are using HTML, paste your code into the 'HTML Template' field.
- Click on the 'Update Feature / Store Page' button, and you're done!
Note: Remember to check the 'Home' page on your app to make sure everything is displaying properly!
How can I create my own custom page?
To create your own custom page, you must have a good understanding of HTML and CSS. Due to how highly-customizable the 'Home' page is, we can only supply you with the basic Oomph requirements in order to make the page display properly within the app.
- Your file should comply with the proper HTML structure, for more information, see this page.
- All CSS must be included in the same HTML block, whether they're inside a <style> block or as inline CSS.
- If you wish to reference issues within your app, you must include our 'data-oomph' attributes. There is a full list of supported attributes in the Oomph Attributes section.
Oomph uses the data-oomph attribute to specify which content to replace. You can use this attribute to replace items such as the magazines title, cover image and price.
Oomph <a href> links adopt the same format as used with Oomph URI schemes. The following links can be used from the Storefront;
1. To open the Downloads screen.
This will take the user to the Downloads screen.
2. To open the purchase details page of the latest issue:
Will take the user to the purchase screen of the latest issue available if they haven't already downloaded it.
3. To open the purchase details page of a particular issue. NOTE: You will need the product id of this issue in order to use this. See here for details about how to find the issues product ID.
<product id> Is the product ID of the issue that you wish to open. You can obtain in Publish. When clicked, if the app is installed, this will take the user to the purchase screen for the particular issue (if they haven't already downloaded it).
4. To open the purchase detail screen of the latest issue over the view that you are currently on;
5. To open the purchase detail screen of a particular issue over the view that you are currently on;
<product id> Is the product ID of the issue that you wish to open.
You can use this link in either a hotspot within a page, or via a link in an email.