[Product Cards] Add image masks

[kjellr]

PR Summary:

Adds seven image masks to product cards (Arch, Blobs, Chevron Left, Chevron Right, Diamond Parallelogram, Diamond, Round).

Examples:

product-cards.mp4

Why are these changes introduced?

These shapes introduce more design possibilities to our merchants.

What approach did you take?

All of these are implemented using CSS clip-path(). The Arch style is created using an SVG mask, while the others are powered by simple polygon() and circle() CSS functions. Many shapes include simple, pure-css hover animations.

The most complicated of these implementations is the Blobs shape. There are six total blob shapes, and the PR uses nth-child() to approximate a random-ish pattern when they're arranged in a product grid. The blobs have been implemented using polygon() instead of using simpler SVG paths, because SVG paths cannot be animated natively with CSS. This approach works well — the main downfall is that polygon() supports points but not curves, and blobs are made of curves. To avoid the shapes looking pointy at large sizes, each blob has 120 points. This gets a little verbose. I've assigned each blob shape to a CSS variable to compensate and maintain code readability.

Other considerations

• I'd love another developer perspective on the blobs implementation. If we want them to animate (which I think is the most fun part, personally), this seemed like the leanest approach to me.
• As noted above, many of these shapes include some light hover effects. I did not include checkboxes to turn these off, but we can do that if folks feel strongly about it.
• The hover effects all respect the visitor's prefers-reduced-motion preferences.
• The border and shadow product card controls aren’t effective in these new shapes, because the existing implementations don’t work for clip-paths. We could build in alternatives, but that feels overcomplicated (and also not necessarily critical for a v1). For now, I’ve added a note next to the Style control that introduces this caveat. (FWIW, the border radius does partially function in some circumstances, and is kinda cool.).

Decision log

#	Decision	Alternatives	Rationale	Downsides
1	Implement product card shape settings on a section level.	Implement one global setting that turns the shapes on for all product cards on the store.	The shapes are relatively opinionated, so we expect merchants will want to use them sparingly rather than turn them on everywhere all at once.	If a merchant does want to use the shapes globally, they'll need to track down all instances of product cards and change the shapes for those individual Sections.

Visual impact on existing themes

These shapes are off by default, and are optional. I don't expect any issues using them on other Dawn-based themes.

Testing steps/scenarios

1. Visit the demo store.
2. Add a Featured Collection section.
3. In the Product Cards section of the settings panel, use the "Image Shape" dropdown to change the image shape.
4. Try all 7 of the supplied image shapes.
5. Change other Section settings, to ensure they don't interfere with the image shape.
6. Scale the viewport from desktop down to mobile, ensuring that the shapes behave as intended with no clipping.
7. Repeat steps 2-6 with the following additional sections: Product Grid, Search Results, and Related Products.
8. Visit Theme Settings, and adjust settings for the product cards (Style, Padding, Color Scheme, etc.) and ensure that the cards don't appear broken.

Checklist

• Added PR summary for release notes
• Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
• Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[stufreen]

Feature and approach look good to me! A few misc comments and questions.

[melissaperreault]

I hope we could bring this to these other sections next:

• Multicolumn
• Multirow
• Collapsible content
• Collection banner
• Collection list
• Blog posts
• Featured product

[kjellr]

We've had a number of followup discussions about this PR following the thread here. The primary sticking point now just seems to be the way that the shapes interact with existing global settings. I pushed a new approach to getting shadows working as expected, and here's an overview of the way the PR stands today:

• When the Card style is active, all section + global settings behave as usual. (🎉)
• When the Standard style is active:
  • All section settings behave as usual. (🎉)
  • The global "Color Scheme" setting changes the color behind transparent images. As such, changes to the color are visible when there's a transparent image, but invisible otherwise. This matches the default behavior. (Example)
  • By default, when the global "Padding" setting is active, but the background color shows up as a kind of stroke. This does not happen when image shapes are present, but the padding is still active. Because padding is still applied and has a visible effect, this seems like generally reasonable behavior to me. (Example)
  • The global "Border" settings have no effect when an image shape is active. We haven't found a great way to manage the border technically, and I think that's fine. The section-level controls now carry a warning about this limitation.
  • The global "Corner Radius" control does work, but its effect is only visible when the shape nears the edges of its container. (Example)
  • The global "Image Shadow" settings are applied to the shape as usual. They also apply to badges if they float outside the shape. (Example)

In general, I think this behavior is alright. The only setting that's thrown out entirely is the border, but we're adding a warning about that. Otherwise, things look pretty good in most reasonable use cases.

Please give this PR another test, and let me know if you agree (or if you don't!). I appreciate everyone sticking with this. 🙌

[kmeleta]

Sweet, glad we don't need to ignore as many global settings now. But I guess we reversed our decision to move the shape setting into the card settings? Otherwise gtg 👍

[kjellr]

But I guess we reversed our decision to move the shape setting into the card settings? Otherwise gtg

Yeah, the main benefit of making this global would've been to allow merchants to "clean up" the appearance if it looked broken. But with the last couple commits, I think it's less likely to look broken. 😄

[stufreen]

LGTM 🚀

I'm ok with the compromise with product card global settings if y'all are agreed on this approach. It feels right to me - as a merchant if I was setting an image shape I would not want a border or background if card style is standard.

[LucasLacerdaUX]

LGTM!

Below are the test scenarios I went through. Everything seems to be working as expected and the inclusion of the label to highlight that the border gets overridden by the Image Mask sounds clear enough to me.

• Mask types
  • Arch
  • Blob
  • Chevron left
  • Chevron right
  • Diamond
  • Parallelogram
  • Round
• Global Settings
  • Corner Radius
  • Border (Card or No Mask only)
  • Shadows
  • Card Type: Standard
  • Card Type: Card
• Sections
  • Featured Collection
  • Collection -> Product Grid
  • Search Results
  • Related Products

[kmeleta]

Still lgtm

[kmeleta]

Actually.. sorry @kjellr, one more thing 😬 Were section onboarding states discussed at all? Noticed that these don't receive any shapes currently. It's probably fine if you wanted to handle this in a fast follow PR, but I do think we should address it.

[LucasLacerdaUX]

☝️ This is also how any product card for products with no images looks like. I assumed it was intentional, as there is no image in these cards for a shape to be applied to.

We can revisit whether or not the onboarding states should include a demo image, but just like Image ratio setting the Image shape one shouldn't apply to this type of card.

[kjellr]

Thanks for the heads up! That's right, the lack of shape in text cards was intentional. The feature is framed as an "image mask", so if there's no image, no shape is applied.

It's a little unfortunate that the control won't have an effect when the start state for the section is applied — I can open a followup issue after merge to look at it.

[kmeleta]

It's definitely unfortunate if a theme using shapes intentionally as part of its art direction might not show the shapes in its initial state, butwould accurately portray other card styles. I know they're technically text cards in this state, but we certainly intend to inform how the cards will actually display with the onboarding states. I feel like (and hope) products without images are super rare irl.

I'm good to proceed for now 👍 but we'll probably want to circle back with Meli and get her thoughts on it if we're inclined to keep things this way.

[kjellr]

Yeah — even setting this specific issue aside, I feel like having an image preview in there by default would be a nicer experience. Most merchants have product images, so it'd feel more appropriate in general. We'll sort out something that works.

[kjellr]

I've opened #2466 for us to continue discussing the placeholder state, and we'll continue working through the other iterations of this feature in #2380. Thanks for sticking with this one through its lengthy review process! 🙌