Skip to main content

Popup Themes Specs

Popup Themes Specs

JIRA:

Figma

Juwan Bepo last updated on October 30, 2019

alt_text

New themes in Popup

Summary:​

In this A/B test, we will introduce themes that users can get started with before further customizing their Popup. These themes will affect font families, font colors, and background images and background colors of Popups and can work together with template cards.

A/B:

  1. Themes should be displayed above templates in the Template tab
  2. Themes should be spread out across each template, in a slider view

Checklist:

  • Wix
  • Mobile
  • Popout
  • Signed in/signed out/admin users
  • Existing apps/new apps
  • Theme palette for group A
  • Themes&templates interaction for group A
  • Changing design with theme applied
  • Choosing another theme if we made changes to design

Scenario: Logged in users without a previous instance of Popup should enter the A/B

Given a logged in user has not created a previous instance of Popup,

When the user creates a new instance of Popup,

Then they should enter the A/B test

Scenario: Signed out users should enter the A/B

Given a user is signed out of POWr,

When the user creates a new instance of Popu p,

Then they should enter the A/B

Scenario: Updated Templates

Given a user creates a new Popup,

When the user loads the Popup editor,

Then the user should see 7 templates in the order

  1. Blank
  2. Email Capture
  3. Promotion
  4. Spin to Win
  5. Free Shipping
  6. On Click Popup
  7. Exit Intent (Pro)

Group A

Scenario: Themes should appear above templates for Group A

Given a user creates a new Popup,

And the user is in Group A,

When the user loads the Popup editor,

Then the user should see themes above templates in the Template tab

And the “Blank” theme should be selected by default

https://www.figma.com/file/I5JHgLVDTRGL1dDw2iIPXZ/Popup-Themes?node-id=73%3A53​

Scenario: Theme card design for Group A

Given that the Template tab is opened,

When theme cards are visible in Group A,

Then the background image associated with the theme should appear centered on the card

And the background images should have a maximum height of 75px and minimum width of 65px

https://www.figma.com/file/I5JHgLVDTRGL1dDw2iIPXZ/Popup-Themes?node-id=73%3A53​

Scenario: Selected theme should be reflected on all templates in Group A

Given a theme card is selected,

When a user changes the template for their Popup in Group A,

Then the theme should still be reflected in the newly selected template

Scenario: Each theme should be displayed in each Template’s content for Group B

Given a user in Group B creates a new Popup,

When the user opens the Template tab,

Then each of the 7 themes should be displayed under each Template

And the “Blank” theme should be selected by default.

https://www.figma.com/file/I5JHgLVDTRGL1dDw2iIPXZ/Popup-Themes?node-id=71%3A286​

Scenario: Selected theme in both groups should immediately appear in /standalone appView

Given the Template tab is opened,,

When a user selects a different theme,

Then the /standalone appView should immediately reflect the newly selected theme

Scenario: Users can change individual elements of a theme in the Design tab

Given a theme card is selected,

When a user makes a change to a property in the Layout tab and Design tab,

Then the change should be reflected in the appView immediately

And other components of the theme that have not been changed should remain the same

And the theme should remain selected after the design changes

Scenario: Selecting a different theme after making changes in the Layout tab and Design tab should reset the Popup

Given a user makes changes in the Layout and Design tabs,

When the user returns to the theme cards and selects a new theme,

Then the Popup should automatically reset to the theme’s default fonts, background images, and button colors and override the user’s previous changes in the Design tab.

Scenario: New Input Text color selector in the Design > Text ew Input Text color selector in the Design > Text drilldown

Given a user has an email input on their Popup

When the user changes the Input Text color in the Text drilldown

Then the text in the email input should reflect the Input Text color

https://www.figma.com/file/I5JHgLVDTRGL1dDw2iIPXZ/Popup-Themes?node-id=99%3A51​

Scenario: Track usage of each theme selected

ThemeBackgroundHeadlineTextButtonLinkLayout
1“Hanger”Slabo 32px,

##616161|Raleway 18px,

#000000 |Slabo,

#ffffff, 14px

Bgd: #880e4f |https://www.powr.io/plugins/popup/standalone?id=21789699&|Center | |2 |“Speaker” |PT Serif,

#00bcd4 |Francois One,

#FFFFFF |Francois One,

#FFFFFF,

Bgd: #00acc1 |https://www.powr.io/plugins/popup/standalone?id=21334063&|Fullscreen| |3 |“Leaves” |Montserrat,

#FFFFFF |Oswald,

#FFFFFF |Oswald,

#FFFFFF,

Bgd: #880e4f |https://www.powr.io/plugins/popup/standalone?id=21660907&|Center | |4 |“Canopy” |Oswald,

#ef6c00 |Lobster,

#FFFFFF |Oswald,

#FFFFFF,

Bgd: #006064 |https://www.powr.io/plugins/popup/standalone?id=21791165&|Center | |5 |“Mountain” |Oswald,

#FFFFFF |Oswald,

#FFFFFF |Open Sans,

#FFFFFF,

Bgd: #880e4f |https://www.powr.io/plugins/popup/standalone?id=21789317&|Center | |6 |“Books” |Sigmar One,

#e1bee7 |Archivo Narrow,

#FFFFFF|Archivo Narrow,

#FFFFFF,

Bgd: #8e24aa|https://www.powr.io/plugins/popup/standalone?id=21650835&|Fullscreen| |7 |“Fireworks”|Bangers,

#FFFFFF |Boogaloo,

#ffcc80 |Boogaloo,

#FFFFFF,

Bgd: #e57373 |https://www.powr.io/plugins/popup/standalone?id=20849869&|Center | |8 |[Blank] |Oswald, #424242 |Oswald,

#424242 |PT Sans Narrow,

#FFFFFF,

Bgd: #424242|https://www.powr.io/plugins/popup/standalone?id=21650660&|Center |

///

TemplateHeadlineTextButtonFeatures
Blank----
Email CaptureSign up for updatesBe the first to know about our special offers!
Promotion25% OffToday Only!SALE
Spin to WinTry your luck!Spin the wheel for a chance to win a discount!Wheel
Free ShippingFree ShippingOn orders above $50
On Click PopupGet 10% offwhen you sign up for our newsletterFixed Tab
Exit IntentBefore you go...Enjoy $15 off with the code GET15Exit Intent

Pro upgrade required|