Story 1. Homepage Redesign

1

Given I visit the homepage on mobile
Then I should not see the SHOP/SELL sticky CTAs.

2

Given I am on the homepage on mobile or desktop
when I look at the header area
then the standard top yellow banner “Enjoy free express shipping worldwide” should no longer be visible
But keep function existing for future use (black friday f.e.)

(already existed)

If toggled “visible” in WP backend, display yellow top banner (function already existing) on desktop and mobile
AND
Move the banner OVER the Top menu on mobile and make it non-sticky when scrolling

2.1

Given admin toggles on the black Black Friday Banner

Then display bar on mobile and desktop

AND

Move the Black friday banner over the Top Menu on Mobile AND DESKTOP

3

Given I am on the homepage on desktop

when I view the Welcome Slider Image

then I see the redesigned version.
3.1. The Image is integrated into the Top Menu (function existing: allow admin to change mob+desk image in backend)

3.1.1 allow admin to differentiate between desktop and mobile image (function already existing)
3.2. Allow admin to adapt image, text and subtext in wp backend. (function existing)
3.2.1. allow admin from the WP backend to adapt desktop CTA text and their link. Allow admin to differentiate between desktop and mobile. (e.g. desktop “Discover Now” leads to https://saclab.com/black-designer-handbags/ , “Shop all Bags” leads to /bags) .

3.2.2 allow admin to only add 1 CTA

3.2.2 allow admin to swich between CTAs being displayed

• on the left side

• mid-centered

• on the right side

3.3 When the screen size differs from the Figma design reference, do not zoom into the image to fit – maintain the original aspect ratio as in the design (see screen recording).

4

Given I am on the homepage on mobile

when I see the Welcome Slider Image

then I see the redesigned version.
4.1 The Image is integrated into the Top Menu (function existing: allow admin to change mob+desk image in backend)

4.2 allow admin from the WP backend to adapt mobile CTAs text and their link.

4.3 allow admin to only add 1 CTA instead of 2 CTAs

4.4 allow admin to style the CTAs

4.4.1 their background color (and allow translucent background)

4.4.2 their font color

4.4.3 their border color

5

Given I am viewing the Info List on desktop or mobile

Then I see the redesigned version (without hover text)

When I want to change the text as an admin

Then allow change of text in the WP backend (function already existing)

6

Given I am viewing the Brand Block on mobile or desktop
Then I see the redesigned version

AND give admin the option to change the brand images

7

Given I am viewing the Sell your bag Block on mobile or desktop
Then I see the redesigned version

And allow admin to either display the text+cta on the left or right side of the page

And give admin the option to change the image and existing design adaptations in the WP backend (function already existing)

8

Given I am viewing the Gift card Block on mobile or desktop
Then I see the redesigned version

And allow admin to either display the text+cta on the left or right side of the page

And give admin the option to change the image and existing design adaptations in the WP backend (function already existing)

9

Given I am on desktop

When I hover over the top menu “Shop” or “Services”

Then I see the redesigned/resized menu popup

And the menu now expands to full screen

Visual Reference: https://www.figma.com/proto/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=9449-12113&m=dev&scaling=scale-down&content-scaling=fixed&page-id=7934%3A9569&starting-point-node-id=9449%3A12113&show-proto-sidebar=1

10

Scenario: Activation and behavior of the white header variant
Given I am logged in as an administrator
And I am on the “Header Settings” or similar in the WordPress backend
When I choose “Header Color” → “White” and save
Then on page load the front-end header renders in the white style. I can switch back to black if I want.

When the visitor scrolls down past the defined trigger point (e.g. 50px)
Then the header background smoothly fades from white into the standard black header within 0.3s
And the logo and menu links switch to their black-header variants

When the visitor scrolls back up above the trigger point
Then the header background smoothly fades back to white within 0.3s
And the logo and menu links switch back to their white-header variants

And on tablet and mobile with the white header active
Then the header displays the white variant
And the same scroll-triggered fade to black and back still applies