Page Notes
- Upon selection of different sizes, featured product image is representative of user selection.
- Hovering over main image displays mouse indicator as zoom tool.
- Clicking once on the product, zooms in; product occupies full image space (overtakes thumbnails).
- Clicking and dragging moves product around.
- Clicking away from product image or “x” in upper right corner returns view to original state.
- Items appearing as modules may be inserted/removed throughout the site, template slots allotting.
- Templates discussed in this document are indicative of content displayed in prototype; Templates are intended to accommodate various pages of the same hierarchical validity.
- When reducing 4 up product views to 690px, 3 up product view is displayed; at 460px, 2 up product view is displayed.
- Page title and window title to be stored in CMS, per item.
- Save for Later adds product to My Saved Bouquets; prompts toolbar to appear if no products have yet been saved.
- Recipient Zip Code and Delivery Date are mandatory fields.
- Recipient Zip Code must be populated with 5 numeric characters (with interactions as noted above).
- Hovering over [x] Ratings displays ratings details.
- Ratings stars in green display average of all user ratings.
- Upon hovering over average star rating, stars appear in yellow.
- If a user is logged in, selecting desired number of stars rates the product.
- If the user is not logged in, hover over average star ratings causes stars to appear yellow, and displays a Login to Rate tool tip. Upon selecting stars when not logged in, Log In drop down module appears.
- Items appearing as modules may be inserted/removed throughout the site, template slots allotting.
- Templates discussed in this document are indicative of content displayed in prototype; Templates are intended to accommodate various pages of the same hierarchical validity.
- When reducing 4 up product views to 690px, 3 up product view is displayed; at 460px, 2 up product view is displayed.
- When reducing this view to 690px, selecting any portion of the rating (count or stars) prompts detail. Within this detail view, unselected star rating field appears above rating details with “Rate this Bouquet” copy. Login necessity behavior behaves identical to full screen view
Funtional Annotations
Global Rules
Tech Specs
Navigational Breadcrumbs
- Breadcrumb to display corresponds to area user selected, based on value stored in CMS.
- Breadcrumb label to be stored in CMS.
- Links will be generated by the back end based on content hierarchy and not user path.
- Uses the
.no-mobileto hide breadcrumbs on mobile - CSS is included in the core css and desktop css.
Various Images of Product thumbnails with Enlarged photo and increased zoom option:
- Product image defaults to top image in column of image display options.
- Product size defaults to Premium.
- Each product must have 3 images, one for each size, to be used on the product only picture (top thumb).
- Each product must have 3 thumbs, one for close up, one for environment, and one for product only.
- Product size images must be similar versions of the first/default product image.
- Size and Extras options may be turned off via the CMS, per product. All default to on.
- CSS is included in the core css and desktop css.
- Upon selection of different sizes, featured product image is representative of user selection.
- Hovering over main image displays mouse indicator as zoom tool.
- Clicking once on the product, zooms in; product occupies full image space (overtakes thumbnails).
- Clicking and dragging moves product around.
- Clicking away from product image or “x” in upper right corner returns view to original state.
- When reducing this view to 612px, thumb images and main image no longer appear, zoom and zoomed drag is no longer available. Instead a slider appears and images can be swiped through, or selected with touch navigation bullets.
CMS Rules
Functional Annotations
Tech Specs
Product Size Options:
-
-
-
- One, and only one size must be selected.
- When reducing this view to 960px, size radio buttons stack below product image.
Functional Annotations
Extra Add-On Options:
Extra Option One
Extra Option Two
e
Extra Option Thre
- User is able to add multiple product extras to their order.
- When reducing this view to 960px, extra add on options stack below size radio buttons.
Functional Annotations
Recipient Zip Code Input Text Box & Zip Code Helper Links:
Please write a zip code
- Zip code information is required.
- When reducing this view to 960px, Find Zip and Use Address Bokk links are layed out on the right side of the Recipient Zip code Input Text Box.
- Recipient zip code must be 5 numeric characters. Error state upon entry of malformed or unknown zip should follow convention from forms in Account section.
- Selecting Find Zip prompts external USPS zip finder window.
- Use Address Book prompts address book; prompts Log In module to drop down if not already logged in.
Functional Annotations
Tech Specs
Zip & Addres Modal Launcher link
Delivery Date calendar datepicker selector:
Please select a date
3
- Delivery Date must be selected via calendar tool (with interactions as noted above).
- When reducing this view to 960px, Delivery Date text entry field stacks below Recipient Zip Code.
Functional Annotations
Add to cart button
- If all necessary fields have been populated properly, Add to Cart adds item to cart.
- Selecting Add to Cart without populating zip and delivery date fields prompts Form validation labels.
Functional Annotations
Tabbed Navigation Sections
Featuring a wide, wondrous assortment of blooms in one bouquet, this colorful arrangement is always a favorite! Hydrangea, roses, lilies, alstromelia, gerberas, daisies - they're all here in stunning variety.
Vase
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.Lorem ipsum dolor sit amet, as consectetur adipisicing elit.
Standard -$72.95
Deluxe -$82.95
Premium -$92.95
- Tabulated product details may be turned on/off individually via the CMS per product.
- Abbreviated product description stored in CMS
- Style tags must be associated with product in the CMS.
- All modules falling below product details may be turned on/off via the CMS. Promotional modules may be substituted (see Global Annotations).
- All product detail copy and images must be entered via the CMS.
- Bouquet size images stored in CMS.
- User is able to toggle between available product detail content.
- Selecting a tag prompts pre-filtered subcategory landing page corresponding to selected tag. When user lands on the associated subcategory landing page then, by definition above, the other filters for style will be populated by the bouquets that are in the result set.
- A maximum of 5 tags may be assigned to any product.
- Tags appear max 5 across, one down.
- When reducing this view to 960px, 3 tags may be displayed across, with the remainder stacked accordingly.
- When reducing this view to 612px, 2 tags may be displayed across, with the remainder stacked accordingly.
CMS Rules
Functional Annotations
Tech Specs
Additional Content Box
Florist Tips
"The lily is my favorite flower not only for its striking visual appearance, but for its sweet fragance."
Jennifer Bingham,
Wicker Park Florists
Chicago, IL
- Florist tip module and contents may be modified via the CMS per product.
- Florist Tip image and copy is stored in CMS.
- When reducing this view to 960px, Florist tips stacks below the tabbed navigation section
- When there is no florist tips section, the tabbed section expands to fill the width of the layout.
CMS Rules
Functional Annotations
Additional Product Section with Description OnMouseOver Hovers
Product Section Title
Product Section Copy
Product One
Product One Description OnMouseOver Copy
Product Two
Product Two Description OnMouseOver Copy
Product Three
Product Three Description OnMouseOver Copy
Product Four
Product Four Description OnMouseOver Copy
Product Five
Product Five Description OnMouseOver Copy
- “Flowers in this bouquet” are stored in CMS.
- Hovering over individual Flowers in this Bouquet prompts abbreviated flower description.
- Flowers in This Bouquet center align.
- Flowers in This Bouquet module does not appear if less than three flowers appear in the select bouquet.
- When reducing this view to 960px, flowers in this bouquet section becomes an image slider with 3 flowers displayed (and swipe capability if there are more flowers).
- When reducing this view to 580px, flowers in this bouquet section becomes an image slider with 1 flower displayed (and swipe capability if there are more flowers).
CMS Rules
Functional Annotations
Tech specs
Similar Additional Product Section
This is part of the
"Similar Product Collection"
- Selecting individual product name or image in Collections promotional module prompts corresponding PDP.
- Selecting anywhere else in promotional Collections module prompts corresponding Collection’s landing page.
Functional Annotations
PDP Alert Modal
We're Sorry!
This product is currently not available in your recipient's area. These recommended bouquets might interest you.
view all mother's day bouquets
CMS Rules
- Recommended bouquets appearing in this modal may be controlled via CMS.
- Recommended occasion may be controlled via CMS.
Functional Annotations
- Selecting a promoted product will prompt the corresponding PDP page.
- Selecting View All [Occasion] Bouquets button prompts corresponding subcategory landing page.
Tech Specs
- Appears when a user has added a product to their cart that is not available in the indicated zip code and a date has been selected.
- 2 recommended products appear in mobile view, along with prompt to View All [x] Bouquets.