2022 Q2: Self-service banners and announcements management at PETRONAS Shop

• 1. Summary
• 2. Details
  • 2.1 General
  • 2.2 Banners
    • Banner listing
    • Filter & Search
    • Action
  • 2.3 Announcement
• 3. Release plan

---

1. Summary

https://setelnow.atlassian.net/wiki/spaces/DOC/pages/632490436/eCommerce merchants now can manage their website banners and announcements instantly, conveniently by themselves from Dashboard under Online store > Contents section.

Dashboard > Online store > Contents

There are 4 sub-sections under Contents which are:-

1. General

2. Banners

3. Announcement

2. Details

The screens depicted below are not final and is expected to change.

2.1 General

Merchants can view and edit Online store/ website general information. All items and changes made here will be reflected on Online Store.

Field	Configurable	Rules
Title	Yes	Max 70 characters
Description	Yes	Max 320 characters
SSO	No	Will reflect on the website setup on backend
Site language	No	Will reflect on the website setup on backend
Custom domain	No	Will reflect on the website setup on backend
Logo default	Yes	JPG, PNG or SVG up to 2MB Minimum height: 40px
Logo light	Yes	JPG, PNG or SVG up to 2MB Recommended size: 512x512px
Favicon	Yes	JPG, PNG, SVG or ICO up to 2MB Recommended size: 512x512px

Full prototype: https://www.figma.com/proto/4LynQQJZiKhQunW4SB6hvE/Content-Management-Application-(Commerce)?node-id=6%3A18273&scaling=min-zoom&page-id=4%3A246

2.2 Banners

Merchants can create/ upload, configure, and delete banners on Online store > homepage in Dashboard.

Banner listing

Showing list of all banners on Online store. Default order by created date & time, with Active & Scheduled banner status will always be listed on top.

	Column	Rules	Notes
1	Thumbnail	Preview of saved banner
2	Title	Banner title
3	Landing page URL	URL formating**: External URL - will redirect & using a new tab https://www.petronasmerchandise.com/login Relative URL - will redirect within the same tab /login	*Optional field **for better UX, using Relative URL is preferable
4	Status	Status of banner : Active Inactive Scheduled at the Start date & time, status will change to Active at the End date & time, status will change to Inactive	Active & Scheduled banner status will always be listed on top.
5	Start & end date	at the Start date & time, status will change to Active at the End date & time, status will change to Inactive	Only need to input specific time and date if status: Schedule is selected
6	Desktop view	JPG, PNG up to 1MB Size: 1440x568px	Image uploaded here will be displayed on desktop
7	Mobile view	JPG, PNG up to 1MB Size: 1440x568px	Image uploaded here will be displayed on mobile

Filter & Search

Banners can be filtered by:

	Options	Rules
1	Status	Filter by status of banner : Active Inactive Scheduled
2	Date	Filter by banner scheduled date (start date)
3	Search	Search element: banner Title Partial match for search result

Action

	Actions	Rules
1	Create banner	Create and save the changes to upload banner in banner listing
2	Reorder banner priority	Clicking on Re-order allows users to reorder the priority of banners. Rearrange the banner row: Click and drag the banner listing according to priority *applicable for Active & Scheduled banner status only
3	Edit banner	Click on the banner listing row to go to Edit Banner page Clicking on the three dots (kebab menu)
4	Delete banner	Clicking on the three dots (kebab menu)

Full prototype: https://www.figma.com/proto/4LynQQJZiKhQunW4SB6hvE/Content-Management-Application-(Commerce)?node-id=10%3A65647&scaling=min-zoom&page-id=7%3A33489

2.3 Announcement

Merchant can configure a line of message to be displayed on Online store site by creating new, edit and delete Announcement.

	Field	Rules	Notes
1	Notification message	maximum character count 160*	*On mobile view to be kept at maximum 3 lines for best visual
2	Status	Can be: Active Inactive	*only one active announcement at a time. Active annpouncement will be listed at top on dashboard> announcement listing Inactive = no announcement banner.
3	Landing page URL	URL formating**: External URL - will redirect & using a new tab https://www.petronasmerchandise.com/login Relative URL - will redirect within the same tab /login	*Optional field **for better UX, using Relative URL is preferable
4	Page to show	Show only on Homepage

Full prototype: https://www.figma.com/proto/4LynQQJZiKhQunW4SB6hvE/Content-Management-Application-(Commerce)?node-id=8%3A33913&scaling=min-zoom&page-id=7%3A33490

3. Release plan

This feature is released in sprint 1.96.0

1. General

2. Banners

3. Announcement