product_card_style = card now shows placeholder image

[lougoncharenko]

PR Summary:

The default feature collection will show placeholder images when product card style = card in the global theme settings.

Why are these changes introduced?

Fixes #2466 .

What approach did you take?

1. I removed the ratio from the card card--{{ settings.card_style }} card--media div and placed it in the card__inner div.
2. I added a div called media media--transparent that holds the placeholder_image to apply the same styling as the non-default product card gets.
3. Removed some unnecessary classes in the section that were throwing off the styling of the placeholder product collection

Other considerations

no other consideration at the moment

Visual impact on existing themes

Merchants will see an accurate representation of what their featured collection will look like when the default featured collection product_card_style is set to card

Testing steps/scenarios

• Test in mobile, tablet, and desktop

Product Card Theme Settings:

• Test both styles: standard and card
• Test the text alignment: left, center and right
• Apply the color scheme
• Test border styles: thickness, opacity and corner radius.
• Test Shadow: opacity, horizontal and vertical offset and blur

Demo links

• Editor

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

[kjellr]

Works well in my testing!

[ludoboludo]

I think it's looking good 👍 I didn't notice any issues.

Tested:

• standard style
• card style
• with and without borders
• with and without border radius
• mobile and desktop

[kmeleta]