User Story
As a buyer, I want to be proposed search results as I type my search query, so that I can more easily and quickly find what I am looking for.

UI

Figma

User story
As a merchant, I can choose to center align the content on my product cards, to achieve the look and feel I want.

Surfaces

• Collection Template
• Featured Collection Section
• Recommended Products

Iterate on the implementation of the collage section to lift the limit of 3 blocks max. The layout is flexible by design and should let merchants add any number of blocks (until the editor limit).

Currently, all separator lines have an opacity of 20%. They should be updated to 8% of the text colour to match the stroke lines used in the collage section and create a more subtle embellishment through the theme.

What's included:

• Footer, header, announcement bar
• Accordion on the product page
• Lines between pickup availability options, etc.

What this doesn't include:

• Form fields
• Product card borders
• Dropdown borders (i.e navigation, cart notification)
• Drawer borders (i.e navigation on mobile, pickup availability)

cc: @Guillaumegranger1

Unit pricing problems:

• Font size on customer order details page is inconsistent with the font size used for unit pricing throughout the rest of the theme. Screenshot

• Unit price disappears for sold out variants. Screen recording

Problem:
The loading of the product recommendations sections creates a layout shift,

Cumulative Layout Shift is 33% of the Core Web Vitals and affects search rankings. It's also planned to weigh 15% of the Lighthouse score in Lighthouse Version 8.

We should fix this instance.

https://screenshot.click/28-13-lcrnx-xi5mo.mp4

Ensure this doesn;t happen on any area with a product grid:

• Product Recommendations section
• Featured Collection section
• Collection template

Purpose

On the product page, we should only show the images in the gallery that correspond to the currently selected variant.

Approach

Since the way the variant image is currently being put to the forefront is by putting it to the front of the list of gallery images, adding a modifier class on it like --variant-image when it's one of the variant featured images and then using CSS like the following:

--variant-image {
  display:none;
}

--variant-image:first-child {
  display: block;
}

... might be a viable way to handle this such that it works without the need to add any JS logic.

Offer this as a setting: the setting would be what sets the class on the variant images. If it's disabled, the class just wouldn't be there and all the images would be visible.

Problem explained here: https://screenshot.click/21-05-e113w-2ictb.mp4

Let's support app blocks in more sections. This ticket will encompass adding support for app blocks to sections that meet the following requirements:

• The section doesn't require a design rework in order to be extended to support app blocks
• We foresee these sections being desired insertion points for apps.

Sections to tackle:

• Cart template - Subtotal section
• Blog Post template
• Password template - Newsletter section

Can't be done:

Announcement Bar

TL;DR - it's a static section and the app blocks rely on JSON templates to work. App blocks, therefore, can't be added in the announcement bar, header, or footer.

• P0:We will need to add the Subheading text setting - pre-populated with standard metafield "Product subtitle".

*FYI: Screenshot is outdated - name of standard metafield is Product subtitle and not Short Description.

Figma: https://www.figma.com/file/JcYdswrk2JhqBTGBVWPM7J/Dawn-2.0?node-id=6766%3A92017

Note: Post Unite, we'll tackle the Show Product Rating setting (this metafield is not ready yet)

User Story
As a merchant, I can display the product rating on my product pages through a theme-provided block that is powered by the standard metafield "Product Rating"

UI
In progress

Editor Settings
In progress

Final polish review

• Settings have been deblockified and should match what is done here for the blog template, and here for the blog posts section

Blog cards

• On desktop the current padding on the top and bottom is 4rem and left and right is 5rem. Can we change both to 3rem? Screenshot
• On mobile the padding is 2.5rem and 3rem. Can we all the padding around the card to 3rem?
• Remove 'read more' link from blog cards. The whole card is clickable. Screenshot
• Can we add a non-breaking space between the number of comments and the "comments" label?
• the blog post empty state is off: it should reflect the layout a bit more?screenshot

Blog section

• 'View all' should be aligned with the title of the section on mobile. Screenshot
• Remove slider when there is only one blog. Screenshot

Blog post page

• Can we remove the underline from the back to blog button and have the hover state move the arrow with the same animation used for collection cards? Screenshot of current design
• Remove Social sharing options from Theme settings and leverage the native web API on the Blog post template, just like on the product template.

Problem

Adding second Button Label to Image Banner and removing it can misaligned the Buttons

Steps
Add Image Banner section
Give a name to the 1st label
Start giving a name to the 2nd label
Delete 2nd label while leaving cursor in the tab
Adding a label realigns the buttons but its an odd experience during set up that could be polished if possible.

Problem
When tables are added to product descriptions, their content goes outside of the cell.

Screenshot

Here's what the text should be:

Title:
Double-check your email and password

Subtitle:
The information entered was incorrect. To login, re-enter your email and password.

Part 2

UI review findings (WIP)

Border on media

• All media need to have a border like on the product card, inside the product template and the modal. 🙏
• Remove background on all media except video

Settings

• Move up Enable sticky product information on large screens setting to let the media related settings together.

Modal layout

• We need to revert back the max-width change that we did. Seems like having the closing icon on the corner right over the media is not scalable for all media. It could overlay on top of important controls for buyers. Screenshot
  • Reference of the close position

Large breakpoint

• Media width

    max-width: 100%;
    padding: 2rem 10rem 0;

• Close button position

     top: 2.2rem;

Medium breakpoint (750px I believe)

• Media width

    max-width: 100%;
    padding: 2rem 11rem 0;

• Close button position

     top: 2.2rem;

Mobile

• Keep as is, but open minded if it requires some changes if I didn't see the full picture properly

No JS

• When I am tabbing, I can't get to the product images, just to the product information column. Wondering if this is expected? (Video recording)
• Dynamic checkout button is not showing when JS is disabled and the space is kept. The button Add to cart could be styled as the primary button in this case instead of the outline secondary button.
• Video media, could we display the video icon to announce the media type? (Video recording)
• To check if this is still happening, but it worked when I tested on the latest demo you shared with me. #179

A11y

• Dynamic checkout button focus style is not the same as the theme (Video recording)
• The page title (the browser tab title for the page; not the main content heading or h1) does not describes the topic or purpose of the page. but should be fixed by #87

General

Product modal

• Mobile/tablet: When I open the modal on mobile, if I play with the position of the image with my finger, and close the modal, opening another image opens the modal to the position I left the previous modal. I am wondering if we can align the media in the modal, top-center to have more success to be zoomed in a detail area of the image? I considered center-center, but would like to hear your thoughts.
• Media sizes inside the modal are won't always look great inside the modal, both on Mobile. MELI TO PROVIDE SIZING

Variant picker

• The button type doesn't display the sold out UI, example of a sold out combination.

🎩 My review tasks

Note for myself; Quick list of things I am looking to review:

• Rich media
• No JS
• Product modal with various ratio

Validate the sizing of each media type with designers.

• We need to create a Product with media that meets the following requirements:
  • Multiple aspect ratios (horizontal and vertical)
  • High and low resolution images
  • Transparent and non-transparent background
  • Matching and non-matching media posters
  • Very tall portrait images (Snowboard)

Suggestion from Ludo:

I wonder if maybe we could use a multiplier of the actual image width instead. The reason I say that is if I'm using a shitty image. That is going to make it very pixelated! So maybe if we grabbed the image.width | times: 2 it might be ok whatever the media you're using.

Interaction review

• Try the no-JS flow

A11Y review

• Test the keyboard navigation and the tab order
• The page title (the browser tab title for the page; not the main content heading or h1) describes the topic or purpose of the page.
• All text that looks and acts like a heading is marked as a heading.
• Heading levels are chosen to convey correct hierarchical order in content, not for visual styling.
• Decorative images are identified as not requiring alternative text.
• N/A - Forms control markup is written so it can be used with Autofill.
• Touch target size of main links and buttons are large enough and far enough apart from each other to activate easily with a finger.
• An alternative method to activate custom swipe actions or gestures is available (ex., zoom or pan a 3D model.)

Navigation and links

• Content reading and focus/tab order, as determined by the code order, is logical and intuitive (top-to-bottom, left-to-right.)
• Actionable elements have a clear, visible focus state for non-mouse users.
• Link text clearly describes the purpose or destination of the link. (Design annotation kit + PR, for generic links)
• N/A - Icon-only links have a text alternative. (Design annotation kit + PR)
• Links which open a new tab/window are accompanied by an aural and visual warning. (PR)

Magnification and Responsive Design

• Low vision users can magnify or zoom in on the content in the browser on any device, including desktop and mobile.
• The design is optimized for all zoom states, eliminating horizontal scrolling.
• The user can use the website in their preferred orientation (landscape/portrait.)

Dynamic Content

• Users are made aware of content that is dynamically inserted on a page. New content is positioned next in the DOM from the activator, in the logical reading order / tab order of the page.
• All keyboard-only and touch screen interactions follow expected patterns so users know how to interact with widgets on the page.
• When users activate scripted functionality (buttons, form submissions, etc.), they know whether the action was successful or not, through a success/error message. The feedback must be available to sighted users, screen reader users, low-vision users, and all other user groups.

User story
As a merchant, I can set a favicon in my theme settings, so that my online store be recognizable via browser tabs.

We can reference how we've handled favicon and it's settings from other themes, like Debut.

UI polish review:

• The text seems to be hardcoded instead of taking the theme instead of taking the Text colour. Screenshot
• The "copy code" text doesn't have the same text styling that other links have. It should have a 3px offset for the underline and the stroke should increase from 1px to 2px on hover. Video
• On desktop, the gift card image is a bit smaller than what it shown on figma. It should be 570px wild. Figma
• Add logo picker to gift card template settings.

We have two different text styles of the same size that can look inconsistent when used in different areas in the theme. It's important that in the second one we keep the text-transform: uppercase attached to the class, otherwise letter-spacing will feel a bit off:

1. Caption

letter-spacing: 0.7,
text-transform: none;

2. Caption with letter spacing

letter-spacing: 1.3
text-transform: uppercase;

@elyseviotto @KaichenWang @Guillaumegranger1

Problem
The overflow scroll bar in the country/ currency selector in the footer is quickly hidden on androids and isn't initially shown in iOS Chrome and Safari.

This makes it looks like I only offer 5 currencies even though I offer more. In the desktop view the overflow scroll bar is always shown.

Steps
Ensure Shopify Payments multi-currency support is setup and you are offering more than 6 currencies
on an iOS or Android device go to your dawn storefront
Scroll down to the footer
Click on the box to select a new country/ currency

Screen recordings
desktop - https://screenshot.click/19-35-c8h8t-jd061.jpg,
iOS - https://screenshot.click/19-31-rh5lo-e06q0.jpg,
android - https://screenshot.click/19-37-zajox-6muj1.mp4

Video

Problem
When making changes on the Product page to section settings, the element on the page reload (I presume via a Product AJAX API call), while doing so there are placeholder elements that show as grey boxes

Expected
Reloading the page should feel more "polished"

Chrome 91.0.4472.101

Problem
When adding a section that has link by default (image banner for example) without a url, we style like a disabled button. But the issue is that you can still click on it and it will refresh the page (editor or live theme).

Expected behaviour
Clicking on a disabled button should not refresh the page

Video explanation

Reason

When the search modal is opened, it animates (-1.5rem) before coming down. And at the same the input element inside of the modal is receiving focus (trapFocus). I think when it receives focus, it's "above" the header by 1.5rem and causes the page to scroll by that much.

We should be applying some sort of delay (200ms?) to take into consideration the animation for the search modal.

Replicate

Trigger the sticky header. Click on the search modal and then close. Repeat a few times. You will notice the page is scrolling by 1.5rem every time you open it.

Browsers: Chrome and Firefox.

Problem
Almost all general theme color settings are included in a style tag in the body of the document + are filtered in liquid. Because they are filtered, we need to ‘cleanup’ our live color setting update operations with a server rendered source of truth. Because they are rendered in a style tag in the body of the document, the only cleanup we have available to us is a full preview reload. This is quite slow.

• Problem 1: The richtext setting within collapsible tab does not get wrapped with a live text setting data attribute because it shares a wrapping container with the page setting. This means we need to re-render the section in order to update the preview.

• Problem 2: The collapsible tab block does not consume the editor javascript API. This is particularly noticeable in this block because the tab will close any time we re-render the section.

From Brian Lyn:
we provide a javascript API that themes can use to listen for section re-renders. The API tells the theme which blocks are selected, so the theme can make sure the blocks are in the right state (e.g. open) on section re-render.

See docs

Problem
Product titles don't show properly in the browser tabs, for product pages.

Expected
Product tiles should display as tab title, for product pages (like Debut)

Dawn:

Debut:

Problem
When a blog gets deleted, but was referenced in a section on the theme, the theme throws this error:
Dawn Liquid error: sections/feature-blog.liquid:17 : Comparison of Integer with String failed

Steps
Create a blog
In theme editor, add blogpost section and select newly created blog. save.
Go and delete that blog.
Back in the editor, observe section serving this error.

Is there a more graceful failure we could output?

• remove the space characters that are added to the sale badge (it increases the padding left and right). Screenshot
• reduce left right padding so that it’s slightly more subtle. padding: .6rem 1.3rem;

Final polish review:

• The image alignment settings should be removed from this section
• The spacing between elements is a bit tight. On desktop can we follow this
• The colour system dropdown should say "Background 1" instead of "Baseline"
• Remove "Secondary button style" checkbox

User Story

As a merchant, I can reference related products on my product page through the use of a theme-provided block that is powered by a product reference array standard metafield.

UI

Editor Settings

Figma

User Story
As a merchant, I can display the product rating on product cards via a theme setting that is powered by the standard metafield "Product Rating"

Touches the following surfaces:

• Collection Template
• Featured Collection Section
• Product Recommendations Section

UI
In progress

Editor Settings
In progress

Whenever we output a string in a theme, we should ensure to use the proper character.
I've noticed a few dumb quotes instead of apostrophes:

Empty state for collection list:

Collage:

Here's how to quickly type the right characters to instantly elevate the theme typesetting: link

Notice the difference on the first 2 cards? ;)

• reverse animation pattern on close icon in cart notification (should go from faded to 100% opacity)
• reverse animation pattern on close icon in pickup availability drawer (should go from faded to 100% opacity)

Screenshot

Problems

• There is a bit of position shift with the zoom animation on hover of images on product cards: video

• A slight blur also occurs when hovering off

Adding will-change: transform; to the image solves the shift

User story
As a buyer, I can choose to filter by price range using a slider range picker, to facilitate my experience.

UI
TBD

Reference: https://i.imgur.com/hSxpRxO.png

User Story

As a merchant, I can feature a specific product through a section on any template that supports sections, so to increase visibility /discoverability of a product on my online store.

UI

Figma

https://screenshot.click/21-06-6drut-imirz.mp4

Problems

• Problem 1: Making changes while the pop-up page modal is open re-renders the section but leaves the modal open. The preview can no longer be interacted with after this happens.

• Problem 2: The hidden link for the pop-up activator gets wrapped with a live text data attribute, but the visible text does not. Since a live text data attribute exists, the editor tries to live text update the field, but since the visible text doesn’t have the attribute, no visible change to the preview occurs. We always ‘cleanup’ live text settings on blur of the text input, so the merchant will still see the change eventually, but they shouldn’t have to blur for this to happen.

The sticky header is not top notch on the product page, and cuts off the top part of the right column.

From @martinamarien:This is the behaviour I would expect with the sticky header. It comes in on top of the content on the page and shouldn't cause content to scroll below it. I think we should leave it as is.

From @Guillaumegranger1: Is this something we can test easily? I'd be curious to see how we feel when interacting with the proposed fix.

Problem
In Dawn the date on blog posts, date only shows the month and year, not the day.

Expected
Should also output the day.

This ticket proposes the addition of a custom liquid block to :

• 1. the main section of the product page.
• 2. featured product section

What this solves
Similarly to the Custom Liquid Section, this can let merchants (and theme specialists) make slightly more advanced theme customizations without going off the upgrade path.

From @andrewetchen

Add a Custom Liquid page block to main-product.liquid

Custom Liquid - Page Block

• Add the following: I added it before {%- when 'description' -%}

{%- when 'liquid' -%}
  {{ block.settings.custom_liquid }}

• Add the following schema block setting:

{
  "type":"liquid",
  "name":"Custom Liquid",
  "settings": [
    {
      "type": "liquid",
      "id": "custom_liquid",
      "label": "Custom Liquid"
    }
  ]
},

• Change the spinner icon from the "add to cart" CTA on the product page to the spinner used in cart.
• replace any instances of spinners that don't match the solid spinner from cart (including filtering flow)

Context

This is the results of the testing session. We (Sofia and Melissa) highlighted all the pain points the user encounter with some additional context.

• Fable NVDA users on PC, Chrome: Link to full session video
• Tested on the following version fo Dawn: v2.0.0-alpha.15

Key learnings

• Down arrow key is a more natural way to browse the page for NVDA users on PC
• Screen reader loads the HTML in a buffer, buffers the text of all the information, so when you browse this page. When the user was dealing with the text, for some reason it doesn’t buffer... We should look at document object model, it needs to be sorted.
• When a user doesn’t want the page to refresh when browsing the combo box (select component) form the collection template, user press alt + down arrow to expand it. It is a special key for the combo box to navigate without affecting a page load until pressing enter. It expands, allows users to navigate the list without the combo box to refresh the page all the time.

Biggest user frustrations

• Page not working as expected, a big issue
• Buttons not expanding
• The shop section when it expanded, didn’t load in the buffer, you couldn’t use the down key, you had to use the tab
• Those are the main pain points

General

• Do we have guidelines for merchant in how to write proper and accessible product names? cc. @svinkle (Link to product)
  • Name of product: “Brick” What does that mean?

Homepage

Searching a product

• User was able to find the search but took many refreshes to happen.
  • User using button collapse unsuccessfully
  • Tried a work around; Tried routing the mouse search
  • Navigating by button: was able to open the search bar
  • Space bar doesn't do anything when it should

Browsing the page

• Got stuck in some section browsing with arrow down (Got stuck in the accessories section (Image banner). Refreshing seemed to have fixed it (shouldn’t have to do that)

Search template

• Typed “white sandals size 38” and no results came and wasn’t able to access that. Looking for the search, pressed H = no headings either.
  • With the current layout the order was not relevant to his needs, the header must have been below the search input, this is a better practice.
    • The new layout should solve this but we should look into ensuring that we communicate the results successfully.

Header menu links

• Was able to expand it. The moment you move, it collapses. Can't use arrow down keys. Clicked on a menu item (“shoes”) and nothing happened.
  • User expects to use up and down arrow keys at this point, this was unusual (The user would try other ways but he's an experienced user)
• Wasn't able to click on any links (Even on non-expandable links)

Product page

Variant radio component

• When you selected a variant (size 38), moved away and then back even though it was checked it said it was unchecked.
• Also it should tell you on the radio button itself an item is sold out in that variant
  • Didn’t announce it was - no way to know for the user
  • The radio button: It should announce at the size 38 sold out, the button should be unavailable to check, but be focusable
• Wasn’t able to click on “add to cart”, it didn’t work

Tab content

• Accordion not expanding with the arrow keys. Not telling you it expanded, while he was able to expand with a work around, no feedback. (Enter key doesn’t expand or space key)
• Can't access the content inside either
  • Content not available with arrow keys, they got to the next heading

Cart notification

• User add an item to the cart
  • Does nothing, no information it was added to the cart
  • Focus on the add to cart, pressing not working

Collection template

• Gets stuck after the landmark
• Can’t see them doing a quick browse down the page, refresh was fixing things though.
• Couldn’t find the filter and sort. Found it after on refresh. To investigate if this happens on low connection?

Info about the Fable tester set up:
Windows: Version 20H2 (OS Build 19042.985)
Nvda: Version 2020.4
Chrome: Version 90.0.4430.212 (Official Build) (64-bit)
Regarding chrome, Chrome is updated regularly so I'm nnot sure what it could have been last week

There should be 3px offset on underline links to match other link styles in the theme.

• Instalment "Learn more"
• Dynamich checkout "More payment options"

@Guillaumegranger1

Problem
When I added content from a custom page to a Collapsible Tab block it rendered on top of the rest of the page.

Expected
It should create space to render the tab contents when opening the tab, like it does with other content types.

Steps to replicate
To replicate, make a custom page with an image right-aligned. Then link the contents of that page to the Collapsible Tab block in Dawn's product pages. Move the tab above the product description. Open and close the tab.

Video: https://screenshot.click/2021-06-1642-39_vendk-t7tfo_667_16r.mp4

You can see the problem this test store, by opening and closing the second tab on the page: https://macaroni-loaf.myshopify.com/products/lego-mac-and-cheese-not-vegan

User story
As a buyer, I can filter down my list of search results using facet filtering, so that I can find what I am looking for.
As a merchant, I can choose to enable filtering on my search results template, same way I can on my collection template.

Considerations/Open UX Questions

• When applying filters that are all specific to products (price, variant options, availability, etc) do we surface other types of search results (pages, blog posts) ?

Ensure the proper theme settings - styles have been implemented:

(Figma Link)

• Accent badge color scheme includes Background 2, Accent 1 and Accent 2
• Sold out badge color scheme includes Background 1, Inverse
• 🆕 Accent icons setting includes options: text, outline button, Accent 1 and Accent 2

Accent icons include: Collapsible tab icons, Checkmark icon in cart notification, Discount icon

Video

Problem
Product card provides no feedback below 990px window width

Expected
I think hover effect should apply on smaller screens too, at least on non touch screens.

Thoughts from Johan:
Add text link feedback at minimum

User Story
As a merchant, I can add an image file to my footer, so I can display badges (like FDA approved, Certified organic, etc)

UI

Editor Settings

Figma

Purpose

We are using the form attribute on <input> elements in a few spots to facilitate sections everywhere - the cart and the product page so far, and I'm sure its use will be broadened over time as we continue to discover new use cases with Sections Everywhere.

The issue is that it is not supported on IE11, which still needs basic functionality like adding to cart and checkout. caniuse gives the rundown.

I don't think this should stop us from using it, but it might mean we need a polyfill which we had, in principle, decided were evil and not to be used.

Problem
the blog posts on a blog post section can overlap as the page gets thinner and thicker

Steps
Add a blog post section with 3 blog posts
Make browser window narrow and observe weird overlap
https://files.slack.com/files-pri/T017D49VC3F-F02319C3998/download/screen_recording_2021-05-25_at_3.25.34_pm.mov

https://screenshot.click/21-06-cm2sm-li704.png

Problem
Blocks are missing in the email sign up section that is installed by default on Password template.

Expected
All the blocks should display by default.