What's in it for you
Stick out and be creative with your Experiences. You can customize the Experience design with appropriate backgrounds, cover images, logos, and default folder icons that match your company branding and industry.
- With Showpad's Essential pricing plan and higher, you can create Classic Experiences.
- With Showpad Plus and Ultimate, you can design Advanced Experiences.
We built useful guidelines and Photoshop templates for both of them to help you create fabulous and visual appealing Experiences and Cover Images. You can download them at the bottom of this article.
Note: Cover images are currently visible in Showpad's Web app and the mobile Showpad iOS app.
See how it looks
Key features
- Stick out from the competition and present content in a visually appealing style
- Add a custom Cover Image for an Experience, to let users quickly find what they need
- Download our Photoshop PSD templates to get started
- Use these guidelines for creating remarkable Experiences in Showpad
You need this to succeed
- Showpad Essential and higher for Classic Experiences
- Showpad Plus and Ultimate can have Advanced Experience channels activated
- Design and Photoshop knowledge
The quick way to awesomeness
Classic Experience
- Setting a background
- Setting a logo
- Upload a Cover Image
- Setting a default folder icon
- Download classic Experience guidelines and PSD templates
Advanced Experience
- See the options in the Design tab
- Upload a Cover Image
- Download Advanced Experience channels PSD templates
Classic Experiences
Setting a background
An Experience background is like the wallpaper on your desktop. It gives your Experience a customized look & feel and complements the Experience's content. Keep in mind that the background is also displayed in the Channel Preview that users see on the Content screen.
- Click the Library tab. Choose a division, if relevant.
- Open the Channel Builder.
- Select the Experience you want to customize. You can find all size details in the Classic Experience guidelines at the bottom of this article.
- Click Design.
- Click Channel Background.
- Click the Select a File button to choose a background stored on your computer or drag and drop it into the Upload section. If you don’t want to upload your background, click one of the default backgrounds below the Upload section.
- Open the Anchor Position drop-down list and select the desired anchor position for your background.
- Click the Save button.
Setting a logo
An Experience logo is displayed on the Experience at the location of your choice.
Note: There is no exact limit for the size of your logo. However, we recommended a height of about 100px. Add transparent sides to your logo if you don't want it to appear too close near the Experience border. Animated PNGs are not supported in IE11, so by default, browsers without APNG support will display the first frame of the sequence.
- Click the Library tab. Select a divison, if relevant.
- In the Channel builder, select an Experience.
- Click Design.
- Click Add a Logo.
- Click the Browse button and select the logo you want to add. Choose where you want the logo to be displayed by selecting your Anchor position.
- Click the Save button.
Uploading a Cover Image
Cover images help you to create a highly immersive, branded, visually appealing home screen for your users. It makes it easier for them to see a preview of the Classic and the Advanced Experiences. Cover images help your sales reps to quickly navigate to the particular content they need.
- Open the Experience to add a Cover Image.
- Click Design.
- Select Cover Image.
- You will notice that by default, the Experience background is used as a Cover Image. You can preview how it looks like on a desktop or mobile device on the next screen.
- Upload your custom Cover Image by dragging and dropping the picture or by selecting it from your drive.
Note: We recommend a 2400 pixels wide JPG or PNG file for an excellent result. Animated PNGs are not supported in IE11, so by default, browsers without APNG support will display the first frame of the sequence.
- A focal point allows focussing on an important area of the Cover Image.
- Click Save and your Cover Image will now be visible on the home screen of the user. When opening the Experience, users will still see the background you created and uploaded before.
Setting a default folder icon
You can modify the default folder icon to ensure consistency in your Expereiences’ look & feel. Note that changing the default folder icon only affects the folders in the Experience you’re modifying. Also, it’s still possible to choose a custom folder icon when creating a new folder. You can find the size details in the Classic Experience Guidelines at the bottom of this article.
- Display the Experience you want to customize.
- Click Design.
- Click Default Folder Icon.
- Click the folder icon you want to use as the default icon.
- Click the Save button.
- You can also add your custom folder icons while creating a new folder, so you don't necessarily need to use the default ones.
Advanced Experiences
Clicking the Design tab in the Channel Builder opens a window where you can change the global design settings for the selected Experience. You will always see a live Preview at the right side of the screen. You can find the Photoshop design templates for every available Experience at the bottom of this article.
In General, the design of all the Showpad Experiences consists of Logos, Page Styles, Breadcrumbs, and Buttons.
- In the Logos section, you can upload a Header logo.
- Page Style. The color background stays the same no matter which node was visited. You can choose one or two colors to mix in the background. When mixing two colors, both colors are applied following a radiant. One color is used for the middle and the other is used for the surroundings.
There is also a principle of inheritance of the background. The background of a parent node is applied to all child nodes.
The maximum size allowed for the Background image is 3840x2160 pixels.
- The breadcrumbs are reminders of the sections and subsections the user is currently visiting. The user can navigate back to the current and previous sections by clicking or tapping a breadcrumb. Here you can change the background and font colors.
This is how your user will see it:
Download the guidelines and PSD templates
