A user wants to modify their product card layout to overlay the price on top of the product image, extending the image upward to cover the current price area. They provided a photoshopped mockup showing the desired result.
Solution Provided:
Another user offered a code solution involving:
_product-card-gallery file in the code editorThe solution includes schema settings that allow toggling the overlay feature and controlling text placement through the theme customizer. The responder noted that settings for this customization are available in the media block configuration.
Status: A complete code solution has been provided, awaiting implementation and feedback from the original poster.
Hello 
Quick question, how do I change the left and right place card so it can look like the middle one (Photoshopped). I would like to extend the image so it’ll go over where the price is, and also bring the price higher so it’ll go on top of the image.
Thank you so much!! - Website: copezo . com
something like this?
fine the file in thecode editor _product-card-gallery
replace entire file with
{% assign show_overlay = block.settings.overlay_title_price %}
{% assign has_product = block.settings.product %}
{% capture children %}
{% if has_product %}
{% render 'product-card-badges', product: block.settings.product %}
{% if settings.quick_add or settings.mobile_quick_add %}
{% render 'quick-add', product: block.settings.product, section_id: section.id %}
{% endif %}
{% endif %}
{% endcapture %}
{% render 'card-gallery', children: children %}
{% if has_product %}
{% if show_overlay %}
### {{ block.settings.product.title }}
{% else %}
### {{ block.settings.product.title }}
{% endif %}
{% endif %}
{% schema %}
{
"name": "Product card image",
"tag": null,
"settings": [
{
"type": "checkbox",
"id": "overlay_title_price",
"label": "Overlay title and price on image",
"default": false
},
{
"type": "select",
"id": "overlay_position",
"label": "Overlay text position",
"options": [
{ "value": "top", "label": "Top" },
{ "value": "center", "label": "Center" },
{ "value": "bottom", "label": "Bottom" }
],
"default": "top",
"visible_if": "{{ block.settings.overlay_title_price }}"
},
{
"type": "product",
"id": "product",
"label": "Product"
},
{
"type": "select",
"id": "image_ratio",
"label": "Aspect ratio",
"options": [
{ "value": "adapt", "label": "Auto" },
{ "value": "portrait", "label": "Portrait" },
{ "value": "square", "label": "Square" },
{ "value": "landscape", "label": "Landscape" }
],
"default": "portrait",
"info": "Adjusts the image height ratio"
},
{
"type": "header",
"content": "Borders"
},
{
"type": "select",
"id": "border",
"label": "Style",
"options": [
{ "value": "none", "label": "None" },
{ "value": "solid", "label": "Solid" }
],
"default": "none"
},
{
"type": "range",
"id": "border_width",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Thickness",
"default": 1,
"visible_if": "{{ block.settings.border != 'none' }}"
},
{
"type": "range",
"id": "border_opacity",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Opacity",
"default": 100,
"visible_if": "{{ block.settings.border != 'none' }}"
},
{
"type": "range",
"id": "border_radius",
"label": "Corner radius",
"min": 0,
"max": 32,
"step": 1,
"unit": "px",
"default": 0
},
{
"type": "header",
"content": "Padding"
},
{
"type": "range",
"id": "padding-block-start",
"label": "Top",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "padding-block-end",
"label": "Bottom",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "padding-inline-start",
"label": "Left",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "padding-inline-end",
"label": "Right",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"default": 0
}
],
"presets": [
{
"name": "Product card media",
"category": "Product",
"settings": {
"product": "{{ closest.product }}"
}
}
]
}
{% endschema %}
there are settings for this in the media block