How can I display a video on the product page but an image elsewhere?

[swishlatvija]

Hello,

We would like to use a video (link) as the main product media, however, if we do then it messes up other places where this product is displayed, like in the image below. Could someone please tell us how we can use a video for the product page, and a specific image (link) for other places in Shopify such as featured collections, etc?

Product link: https://swish.eu/products/versaclimber-108-sm

Your assistance would be deeply appreciated and we would certainly “like” your posts and mark them as “solutions”. Thank you very much!

Kind Regards,

[Litos]

Hi @swishlatvija ,

Please send me the code of card-product.liquid file, I will check it.

[swishlatvija]

Hi @Litos

Thank you very much for your assistance. Below is our card-product.liquid. Please let us know.

{% comment %}
Renders a product card

Accepts:

• card_product: {Object} Product Liquid object (optional)
• media_aspect_ratio: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)
• show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
• show_vendor: {Boolean} Show the product vendor. Default: false
• show_rating: {Boolean} Show the product rating. Default: false
• extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
• lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
• show_quick_add: {Boolean} Show the quick add button.
• section_id: {String} The ID of the section that contains this card.
• horizontal_class: {Boolean} Add a card–horizontal class if set to true. Default: false

Usage:
{% render ‘card-product’, show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == ‘portrait’
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == ‘adapt’
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != nil and show_secondary_image -%}
<img
srcset="
{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
"
src=“{{ card_product.media[1] | image_url: width: 533 }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
alt=“”
class=“motion-reduce”
loading=“lazy”
width=“{{ card_product.media[1].width }}”
height=“{{ card_product.media[1].height }}”

{%- endif -%}

{%- endif -%}

{{ card_product.title | escape }}

{%- if card_product.available == false -%} {{- 'products.product.sold_out' | t -}} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{- 'products.product.on_sale' | t -}} {%- endif -%}

{{ card_product.title | escape }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}

{{ card_product.vendor }}

{%- endif -%}

{{ block.settings.description | escape }}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{- card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max -}}

({{ card_product.metafields.reviews.rating_count }}) {{- card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t -}}

{%- endif -%}

{%- if card_product.metafields.custom.description != blank -%}

{{ card_product.metafields.custom.description }}

{%- endif -%}

{%- if card_product.metafields.custom.bulletpoints != blank -%}

{{ card_product.metafields.custom.bulletpoints }}

{%- endif -%}

{% render ‘price’, product: card_product, price_class: ‘’ %}

{%- if card_product.metafields.custom.preorder != blank -%}

{{ card_product.metafields.custom.preorder }}

{%- endif -%}

{%- if show_quick_add -%}

{%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%} {%- if card_product.variants.size == 1 -%} {%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} {%- if card_product.selected_or_first_available_variant.available -%} {{ 'products.product.add_to_cart' | t }} {%- else -%} {{ 'products.product.sold_out' | t }} {%- endif -%} {{ 'products.product.sold_out' | t }}

{%- endform -%} {%- else -%} {{ 'products.product.choose_options' | t }}

{% render 'icon-close' %}

{%- endif -%}

{%- endif -%}

{%- if card_product.available == false -%} {{- 'products.product.sold_out' | t -}} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{- 'products.product.on_sale' | t -}} {%- endif -%}

{%- else -%}

{{ 'onboarding.product_title' | t }}

{{ 'onboarding.product_title' | t }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}

{{ 'products.product.vendor' | t }}

{%- endif -%} {% render 'price' %}

{%- endif -%}

[Litos]

Hi @swishlatvija ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.product-card-wrapper .ratio:before {
    padding-bottom: 100% !important;
}

Hope it helps!

[swishlatvija]

Thank you very much, @Litos !

Would perfectly, but it affects all pages. Is it possible to make this code work only for the links that include “collections/versaclimber”?

[Litos]

Hi @swishlatvija ,

Please change all code:

#shopify-section-template--17197701529864__832a529b-6225-411a-84cb-1bfdedbb2fd9 .product-card-wrapper .ratio:before {
    padding-bottom: 100% !important;
}

Hope it helps!