1

I created product cards to display on a collection page in shopify where variants are displayed as different poducts. Everything is working well ( its displayed the correct price of each variant / name and everything ) but the variant image that I have to provide through background-image shows the default product image not the variant image. I tried to place the background-image assignement to inline style and than it worked. The problem is that I cannot assign the background image for the :before pseudo class through inline.

<div class="custom-card-product-folder">
    <div class="custom-card-product-folder-2"></div>
    <a href="{{ card_variant.url }}" class="custom-card-product-product-image" style="background-image: url({{ card_variant.featured_media.preview_image.src | product_img_url: '700x'}})"></a>
    <h6 class="custom-card-product-product-title" >{{ card_variant.title | escape }}</h6>
    <div class="custom-card-product-product-price {% unless card_variant.compare_at_price == blank %}red{% else %}black{% endunless %}"><span class="grey line-through {% unless card_variant.compare_at_price == blank %}margin-right-ten{% endunless %}">{{ card_variant.compare_at_price | money}}</span> {{ card_variant.price | money}}</div>
    <div class="custom-card-product-toggle-wrapper">
    {% for option in card_product.options_with_values %}
    {% if option.name == "Anzahl" %}
    {% for value in option.values %}
      <div class="custom-card-product-toggle-value {{ value }}" {% for variant in card_product.variants %}{% if variant.title contains value %}variant-title="{{ variant.title }}" variant-price="{{ variant.price | money }}" variant-image="{{ variant.image | img_url }}"{% break %}{% endif %}{% endfor %}>{{ value | escape }}</div>
    {% endfor %}
      <div class="custom-card-product-toggle-active-value-overlay"></div>
    {% endif %}
    {% endfor %}
    </div>
</div>
<script>console.log({{ card_variant | json }});</script>
<style>
.custom-card-product-folder-2:before {
 background-image: url({{ card_variant.featured_image.src | product_img_url: '700x'}}) !important;
}
.custom-card-product-product-image {
 background-image: url({{ card_variant.featured_media.preview_image.src | product_img_url: '700x'}}); 
}
</style>
Maxswift
  • 73
  • 11

1 Answers1

0

I don't fully understand the problem of your code. But regarding assigning a before without using inline style, you can do something like this.

...
<div id="variant-card-{{variant.id}}"
...

<style>
{% for variant in card_product.variants %}
#variant-card-{{variant.id}}:before {
 background-image: url('{{ variant.featured_image.src | product_img_url: '700x'}}') !important;
}

{% endfor %}

</style>
Fabio Filippi
  • 1,732
  • 25
  • 40