Hello,
I want to add this effect:
I’m esplaining: When you hover over the photos, you can see the remaining and sold sizes.
I use dawn theme, my website is womber.fr and password is PROPAGANDAAA
Thanks,
Cordially
Topic summary
Main issue: Add a hover effect on collection/product cards to display sizes with in-stock vs sold-out status in the Shopify Dawn theme.
Proposed solution:
- Files to edit: theme.liquid and card-product.liquid (Dawn theme).
- theme.liquid: Paste additional code before (content not visible in the thread; likely CSS/JS for styling/hover behavior).
- card-product.liquid: Before , add a loop over card_product.variants that checks variant.inventory_quantity > 0 to differentiate availability and outputs each variant.title (size).
Result shown:
- A screenshot demonstrates an overlay listing sizes with visual distinction for availability when hovering over product images.
- Images are central to understanding the expected outcome.
Notes and gaps:
- The first code block content is missing in the post, so exact styling/hover logic isn’t fully specified.
- The provided Liquid snippet outputs the size name in both branches; visual differentiation likely relies on CSS classes not shown.
Status:
- A ready-to-implement approach was provided, but no confirmation from the requester yet. Resolution pending.
Unanswered points:
- Exact CSS/JS needed for hover and styling of sold-out sizes; whether this applies across all collection/landing pages.
1 Like
- Here is the solution for you @PAUL8
- Please follow these steps:
- Go to Online Store → Theme → Edit code.
- Open your theme.liquid file
- In theme.liquid, paste the below code before and press ‘Save’ to save it
1 Like
And find file card-product.liquid and add this code before tag “
”
1 Like
{% for variant in card_product.variants %}
{% if variant.inventory_quantity > 0 %}
{{ variant.title }}
{% else %}
{{ variant.title }}
{% endif %}
{% endfor %}
1 Like
