Shopify themes, liquid, logos, and UX
Hi
I am having trouble getting media playing as the product image in the supply theme. According to this link... https://help.shopify.com/en/manual/products/product-media/add-media, I can modify my current theme (implying any theme) by following the instructions in this link... https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video#custom-styles-for-your-t...
I followed this to a tee. mp4 videos save into the listing and display on the webpage, but are extra large. When I get down to the Tip after step 9 I am directed to the following link to modify some of the earlier created snippet to match the existing style of my image container... https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video#custom-styles-for-your-t.... Within that link, it says to create an aspect ratio box and I'm directed to this link!... https://css-tricks.com/aspect-ratio-boxes/
So, for the part of the snippet below, I have tried various css in between div and class such as style="height: 0;" and usually nothing changes. There was something I tried which moved the oversized video down a fair bit on the webpage. I didn't try removing the class.
{% when 'video' %} <div class="product-single__media" data-media-id="{{ media.id }}"> {{ media | video_tag: controls: true }} </div>
The link prior to the aspect ratio box link says "Shopify-hosted videos are rendered in a HTML5 video player by default. The HTML5 player is responsive and doesn't require any specific customizations." and then it says that an aspect ratio box should be considered. I assume a shopify-hosted video means one uploaded to files through settings? Well, I uploaded a video but then couldn't load it into the product images. The instructions (I assume work for other themes) are to delete the product image then click on edit alt text. Supply theme only gets the edit alt text option when an image is there and you go to the image editor. I tried to upload the shopify-hosted file through "Add image from URL" but it says the mp4 is an unsupported file type. The other thing I have tried is uploaded animated gifs. The only gif that would upload and display is a gif that I found on a shopify web developers site. It must be the encoding or something that makes this particular animated gif work. Please help me to get videos or animated gifs working as the product image in supply theme.
Thanks
Nobody?
We are in the same boat as you. I think the instructions Shopify has written are not generic. They might work on some themes, but on Supply, definitely not. I have spent endless hours but still can't even get the featured image to appear.
What a badly written instruction page.
Ok, glad I'm not the only one that went batty on this!
At the end of my post I said "The only gif that would upload and display is a gif that I found on a shopify web developers site. It must be the encoding or something that makes this particular animated gif work. Please help me to get videos or animated gifs working as the product image in supply theme." I would love to know why this is only gif that would work, as I'm sure I tried encoding gifs and uploading them before I made this post. The developer didn't reply by the way.
I also tired and got an error message that videos are not supported in this theme (supply).
This was a crazy headache for me as well but after countless hours, I was been able to implement it on the Supply theme version 9.5.1. If you would still like help on it, come check out my fiverr page.
https://www.fiverr.com/vangy21/implement-product-media-for-supply-theme-in-shopify
Hi,
I have worked on it and make the solution and the video is playing now. First go to sections and in product-template.liquid, then replace the code with this:
<div id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-zoom-toggle="zoom-in" data-zoom-enabled="{{ section.settings.product_image_zoom_enable }}" data-related-enabled="{{ section.settings.product_related_enable }}" data-social-sharing="{{ section.settings.social_sharing }}" data-show-compare-at-price="{{ section.settings.product_show_compare_at_price }}" data-stock="{{ section.settings.product_quantity_message }}" data-incoming-transfer="{{ section.settings.product_incoming_message }}" data-ajax-cart-method="{{ settings.ajax_cart_method }}">
{% include 'breadcrumb' %}
{% case section.settings.add_to_cart_button_size %}
{% when 'small' %}
{% assign btn_class = 'btn' %}
{% when 'medium' %}
{% assign btn_class = 'btn btn--wide' %}
{% when 'large' %}
{% assign btn_class = 'btn btn--full btn--large' %}
{% endcase %}
{% if section.settings.add_to_cart_button_size == 'large' %}
<style>
.selector-wrapper select, .product-variants select {
max-width: 100%;
}
</style>
{% endif %}
{% if section.settings.product_quantity_enable == false %}
<style>
.selector-wrapper select, .product-variants select {
margin-bottom: 13px;
}
</style>
{% endif %}
<div class="grid" itemscope itemtype="http://schema.org/Product">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
<div class="grid-item large--two-fifths">
<div class="grid">
<div class="grid-item large--eleven-twelfths text-center">
<div class="product-photo-container" id="productPhotoContainer-{{ section.id }}">
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
<!-- media -->
{% for media in product.media %}
{%- capture img_wrapper_id -%}productPhotoWrapper-{{ section.id }}-{{ image.id }}{%- endcapture -%}
{%- assign max_width = 700 -%}
{%- assign max_height = 1024 -%}
{%- include 'image-logic' with width: max_width, height: max_height -%}
{% render 'media', media: media %}
{% endfor %}
<!-- end media -->
{% comment %}{% for image in product.images %}
{%- capture img_wrapper_id -%}productPhotoWrapper-{{ section.id }}-{{ image.id }}{%- endcapture -%}
{%- assign max_width = 700 -%}
{%- assign max_height = 1024 -%}
{%- include 'image-logic' with width: max_width, height: max_height -%}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div id="{{ img_wrapper_id }}" class="lazyload__image-wrapper{% unless image == featured_image %} hide{% endunless %}" data-image-id="{{ image.id }}" style="max-width: {{ max_width }}px">
<div class="no-js product__image-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
{% if forloop.first == true %}
src="{{ featured_image | img_url: '300x300' }}"
{% endif %}
class="lazyload no-js lazypreload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}"
{% if section.settings.product_image_zoom_enable %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}>
</div>
</div>
{% if forloop.first == true %}
<noscript>
<img src="{{ image | img_url: '580x' }}"
srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
alt="{{ image.alt }}" style="opacity:1;">
</noscript>
{% endif %}
{% endfor %}{% endcomment %}
</div>
{% if product.images.size > 1 %}
<ul class="product-photo-thumbs grid-uniform" id="productThumbs-{{ section.id }}">
{% for image in product.images %}
<li class="grid-item medium-down--one-quarter large--one-quarter">
<a href="{{ image.src | img_url: '1024x1024', scale: 2 }}" class="product-photo-thumb product-photo-thumb-{{ section.id }}" data-image-id="{{ image.id }}">
<img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
</div>
<div class="grid-item large--three-fifths">
<h1 class="h2" itemprop="name">{{ product.title }}</h1>
{% if section.settings.product_vendor_enable %}
<p class="product-meta" itemprop="brand">{{ product.vendor }}</p>
{% endif %}
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{% assign variant = product.selected_or_first_available_variant %}
<meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
<meta itemprop="price" content="{{ variant.price | divided_by: 100.00 }}">
<ul class="inline-list product-meta" data-price>
<li>
<span id="productPrice-{{ section.id }}" class="h1">
{% include 'price' with variant.price %}
</span>
{% include 'product-unit-price', variant: variant %}
</li>
{% if product.compare_at_price_max > product.price and section.settings.product_show_saved_amount %}
<li>
<span id="comparePrice-{{ section.id }}" class="sale-tag large">
{% assign compare_price = variant.compare_at_price %}
{% assign product_price = variant.price %}
{% include 'price-sale' %}
</span>
</li>
{% endif %}
{% if section.settings.product_reviews_enable %}
<li class="product-meta--review">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</li>
{% endif %}
</ul>
{%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte">
{%- if cart.taxes_included -%}
{{ 'products.general.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.general.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}
<hr id="variantBreak" class="hr--clear hr--small">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
{% capture "form_class" -%}
addToCartForm{% if section.settings.enable_payment_button %} addToCartForm--payment-button{% endif %}
{%- endcapture %}
{%- capture "form_id" -%}addToCartForm-{{ section.id }}{%- endcapture -%}
{% form 'product', product, class:form_class, id:form_id, data-product-form: '' %}
{{ form | payment_terms }}
<select name="id" id="productSelect-{{ section.id }}" class="product-variants product-variants-{{ section.id }}" {% if product.has_only_default_variant %} data-has-only-default-variant {% endif %}>
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
{% if section.settings.product_quantity_enable %}
<label for="quantity" class="quantity-selector quantity-selector-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="quantity" name="quantity" value="1" min="1" class="quantity-selector">
{% endif %}
{% if section.settings.product_quantity_message %}
<div id="variantQuantity-{{ section.id }}" class="variant-quantity {% if variant.inventory_management and variant.inventory_quantity < 10 and variant.inventory_quantity > 0 %} is-visible{% endif %}">
{% include 'svg-definitions' with 'stock-icon' %}
{% assign qty = variant.inventory_quantity %}
<span id="variantQuantity-{{ section.id }}__message">{{ 'products.product.only_left' | t: count: qty }}</span>
</div>
{% endif %}
{% if section.settings.product_incoming_message %}
<div id="variantIncoming-{{ section.id }}" class="variant-quantity {% if variant.inventory_management and variant.inventory_quantity <= 0 and variant.incoming %} is-visible{% endif %}">
{% if variant.inventory_management and variant.inventory_quantity == 0 or variant.inventory_quantity < 0 and current_variant.incoming %}
{% include 'svg-definitions' with 'stock-icon' %}
{% if variant.available %}
{% assign date = variant.next_incoming_date | date: format: 'date' %}
<span id="variantIncoming-{{ section.id }}__message">{{ 'products.product.will_not_ship_until' | t: date: date }}</span>
{% else %}
{% assign date = variant.next_incoming_date | date: format: 'date' %}
<span id="variantIncoming-{{ section.id }}__message">{{ 'products.product.will_be_in_stock_after' | t: date: date }}</span>
{% endif %}
{% endif %}
</div>
{% endif %}
<div class="payment-buttons payment-buttons--{{ section.settings.add_to_cart_button_size }}">
<button type="submit" name="add" id="addToCart-{{ section.id }}" class="{{ btn_class }} btn--add-to-cart{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}">
<span class="icon icon-cart"></span>
<span id="addToCartText-{{ section.id }}">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}
<hr class="{% if section.settings.enable_payment_button %}product-template-hr{% endif %}">
</div>
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
{% if section.settings.social_sharing_products %}
{% include 'social-sharing' %}
{% endif %}
</div>
</div>
{% if section.settings.related_products_enable %}
{% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
{% include 'related-products' %}
{% endif %}
{% if section.settings.product_reviews_enable %}
<hr>
<div id="shopify-product-reviews" data-id="{{ product.id }}">{{ product.metafields.spr.reviews }}</div>
{% endif %}
{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% if section.settings.product_quantity_message or section.settings.product_incoming_message %}
<script type="application/json" id="VariantJson-{{ section.id }}">
[
{% for variant in product.variants %}
{% capture variant_inventory %}
{%- if section.settings.product_incoming_message -%}
,
"incoming": {% if variant.incoming == 'null' or variant.next_incoming_date == null %}false{% else %}{{ variant.incoming | default: false | json }}{% endif %},
"inventory_policy": {{ variant.inventory_policy | json }},
"next_incoming_date": {{ variant.next_incoming_date | date: format: 'date' | json }}
{%- endif -%}
{%- if section.settings.product_quantity_message -%}
,
"inventory_quantity": {{ variant.inventory_quantity | json }}
{%- endif -%}
{% endcapture %}
{
{{ variant_inventory | remove_first: ',' | strip }}
}{% unless forloop.last %},{% endunless %}
{% endfor %}
]
</script>
{% endif %}
{% endunless %}
</div>
{% schema %}
{
"name": {
"cs": "Produkt",
"da": "Produkt",
"de": "Produkt",
"en": "Product",
"es": "Producto",
"fi": "Tuote",
"fr": "Produit",
"it": "Prodotto",
"ja": "商品",
"ko": "제품",
"nb": "Produkt",
"nl": "Product",
"pl": "Produkt",
"pt-BR": "Produto",
"pt-PT": "Produto",
"sv": "Produkt",
"th": "สินค้า",
"tr": "Ürün",
"vi": "Sản phẩm",
"zh-CN": "产品",
"zh-TW": "產品"
},
"class": "product-template-section",
"settings": [
{
"type": "checkbox",
"id": "product_image_zoom_enable",
"label": {
"cs": "Povolit zvětšení obrázku",
"da": "Aktivér billedzoom",
"de": "Aktivieren des Bildzooms",
"en": "Enable image zoom",
"es": "Habilitar zoom de imagen",
"fi": "Ota kuvan zoomaus käyttöön",
"fr": "Activer le zoom sur image",
"it": "Abilita lo zoom dell'immagine",
"ja": "画像ズームを有効にする",
"ko": "이미지 확대 사용",
"nb": "Aktiver bildezoom",
"nl": "Inzoomen op afbeelding inschakelen",
"pl": "Włącz powiększenie obrazu",
"pt-BR": "Habilitar o zoom da imagem",
"pt-PT": "Ative o zoom da imagem",
"sv": "Aktivera bildzoom",
"th": "เปิดใช้การซูมภาพ",
"tr": "Görsel yakınlaştırmayı etkinleştir",
"vi": "Bật thu phóng hình ảnh",
"zh-CN": "启用图片缩放",
"zh-TW": "啟用圖片縮放"
}
},
{
"type": "checkbox",
"id": "product_quantity_enable",
"label": {
"cs": "Zobrazit výběr množství",
"da": "Vis antalsvælger",
"de": "Mengenauswahl anzeigen",
"en": "Show quantity selector",
"es": "Mostrar selector de cantidad",
"fi": "Näytä määrän valitsin",
"fr": "Afficher le sélecteur de quantité",
"it": "Mostra selettore quantità",
"ja": "数量セレクターを表示する",
"ko": "수량 선택기 표시",
"nb": "Vis mengdevelger",
"nl": "Hoeveelheidskiezer weergeven",
"pl": "Pokaż selektor ilości",
"pt-BR": "Exibir seletor de quantidade",
"pt-PT": "Mostrar um seletor de quantidade",
"sv": "Visa kvantitetsväljare",
"th": "แสดงตัวเลือกจำนวน",
"tr": "Adet seçiciyi göster",
"vi": "Hiển thị hộp chọn số lượng",
"zh-CN": "显示数量选择器",
"zh-TW": "顯示數量選擇器"
}
},
{
"type": "checkbox",
"id": "product_quantity_message",
"label": {
"cs": "Zobrazit zprávu o zbývajícím množství",
"da": "Vis besked om tilbageværende antal",
"de": "Meldung zur verbleibenden Restmenge anzeigen",
"en": "Show remaining quantity message",
"es": "Mostrar mensaje de cantidad restante",
"fi": "Näytä jäljellä oleva määrä -viesti",
"fr": "Afficher le message de quantité restante",
"it": "Mostra messaggio con la quantità rimanente",
"ja": "残数のメッセージを表示する",
"ko": "남은 수량 메시지 표시",
"nb": "Vis melding om gjenværende antall",
"nl": "Laat resterende hoeveelheidbericht zien",
"pl": "Pokaż wiadomość o pozostałej ilości",
"pt-BR": "Exibir uma mensagem de quantidade restante",
"pt-PT": "Mostrar mensagem de quantidade restante",
"sv": "Visa meddelande om återstående kvantitet",
"th": "แสดงปริมาณข้อความที่เหลืออยู่",
"tr": "Kalan adet mesajını göster",
"vi": "Hiển thị thông báo số lượng còn lại",
"zh-CN": "显示剩余数量消息",
"zh-TW": "顯示剩餘數量的訊息"
}
},
{
"type": "checkbox",
"id": "product_incoming_message",
"label": {
"cs": "Zobrazit zprávu o doplnění skladových zásob při vyprodání",
"da": "Vis besked om indgående lageroverførsel, når varen er udsolgt",
"de": "Meldung zu eingehender Warenverschiebung bei Ausverkauf anzeigen",
"en": "Show incoming stock transfer message when sold out",
"es": "Mostrar mensaje de inventario entrante cuando se agote el producto",
"fi": "Näytä saapuva varasto -viesti kun tuote on loppuunmyyty",
"fr": "Afficher le message de transfert de stock entrant lorsqu'épuisé",
"it": "Mostra messaggio trasferimento stock in entrata quando esaurito",
"ja": "売り切れ時に入荷予定のメッセージを表示する",
"ko": "품절 시 재고 전송 메시지 표시",
"nb": "Vis melding for innkommende overføring av lagerbeholdning når et produkt er utsolgt",
"nl": "Laat binnenkort weer beschikbaar zien wanneer het uitverkocht is",
"pl": "Pokaż wiadomość o przychodzących transferach zapasów w przypadku wyprzedania",
"pt-BR": "Exibir uma mensagem de estoque quando um item estiver esgotado",
"pt-PT": "Mostrar mensagem de stock recebido quando esgotado",
"sv": "Visa inkommande aktieöverföringsmeddelande när det är utsålt",
"th": "แสดงข้อความระบุข้อมูลการเติมสต็อกสินค้าขาเข้าเมื่อของหมด",
"tr": "Ürün tükendiğinde gelecek stok aktarımı mesajını göster",
"vi": "Hiển thị thông báo chuyển hàng lưu kho sắp đến khi hết hàng",
"zh-CN": "售罄时显示传入的库存转移消息",
"zh-TW": "售完時顯示即將調貨的訊息"
}
},
{
"type": "checkbox",
"id": "product_vendor_enable",
"label": {
"cs": "Zobrazit dodavatele produktu",
"da": "Vis produktleverandør",
"de": "Produktanbieter anzeigen",
"en": "Show product vendor",
"es": "Mostrar proveedor del producto",
"fi": "Näytä tuotteen myyjä",
"fr": "Afficher le distributeur du produit",
"it": "Mostra fornitore prodotto",
"ja": "商品の販売元を表示する",
"ko": "제품 공급 업체 표시",
"nb": "Vis produktleverandør",
"nl": "Productleverancier weergeven",
"pl": "Pokaż dostawcę produktu",
"pt-BR": "Exibir fabricante do produto",
"pt-PT": "Mostrar o fornecedor do produto",
"sv": "Visa produktsäljare",
"th": "แสดงผู้ขายสินค้า",
"tr": "Ürün satıcısını göster",
"vi": "Hiển thị nhà cung cấp sản phẩm",
"zh-CN": "显示产品厂商",
"zh-TW": "顯示產品廠商"
}
},
{
"type": "checkbox",
"id": "product_show_saved_amount",
"label": {
"cs": "Zobrazit uloženou částku",
"da": "Vis besparelse",
"de": "Gesparten Betrag anzeigen",
"en": "Show saved amount",
"es": "Mostrar monto ahorrado",
"fi": "Näytä säästetty summa",
"fr": "Afficher le montant économisé",
"it": "Mostra importo risparmiato",
"ja": "保存された金額を表示",
"ko": "저장 금액 표시",
"nb": "Vis spart beløp",
"nl": "Bespaard bedrag weergeven",
"pl": "Pokaż zaoszczędzoną kwotę",
"pt-BR": "Exibir valor salvo",
"pt-PT": "Mostrar valor poupado",
"sv": "Visa sparade belopp",
"th": "แสดงจำนวนที่บันทึกไว้",
"tr": "Tasarruf edilen tutarı göster",
"vi": "Hiển thị số tiền đã lưu",
"zh-CN": "显示已保存的金额",
"zh-TW": "顯示省下金額"
},
"default": true
},
{
"type": "checkbox",
"id": "product_show_compare_at_price",
"label": {
"cs": "Zobrazit původní cenu",
"da": "Vis sammenligningspris",
"de": "Vergleichspreis anzeigen",
"en": "Show compare at price",
"es": "Mostrar precio de comparación",
"fi": "Näytä vertailuhinta",
"fr": "Afficher le prix avant réduction",
"it": "Mostra prezzo di confronto",
"ja": "割引前価格を表示する",
"ko": "비교가 표시",
"nb": "Vis prissammenligning",
"nl": "Vergelijkingsprijs weergeven",
"pl": "Pokaż cenę do porównania",
"pt-BR": "Exibir Comparação de preços",
"pt-PT": "Mostrar preço comparado",
"sv": "Visa ursprungspris",
"th": "แสดงราคาเปรียบเทียบ",
"tr": "Karşılaştırma fiyatını göster",
"vi": "Hiển thị giá gốc",
"zh-CN": "显示原价",
"zh-TW": "顯示售價"
},
"default": false
},
{
"type": "checkbox",
"id": "related_products_enable",
"label": {
"cs": "Zobrazit související produkty",
"da": "Vis relaterede produkter",
"de": "Ähnliche Produkte anzeigen",
"en": "Show related products",
"es": "Mostrar productos relacionados",
"fi": "Näytä vastaavat tuotteet",
"fr": "Afficher les produits associés",
"it": "Mostra prodotti correlati",
"ja": "関連商品を表示する",
"ko": "관련 제품 표시",
"nb": "Vis relaterte produkter",
"nl": "Toon verwante producten",
"pl": "Pokaż powiązane produkty",
"pt-BR": "Exibir produtos relacionados",
"pt-PT": "Mostrar produtos relacionados",
"sv": "Visa relaterade produkter",
"th": "แสดงสินค้าที่เกี่ยวข้อง",
"tr": "İlgili ürünleri göster",
"vi": "Hiển thị sản phẩm liên quan",
"zh-CN": "显示相关产品",
"zh-TW": "顯示相關產品"
}
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": {
"cs": "Zobrazit dynamické tlačítko pokladny",
"da": "Vis dynamisk betalingsknap",
"de": "Dynamischen Checkout-Button anzeigen",
"en": "Show dynamic checkout button",
"es": "Mostrar botón de pago dinámico",
"fi": "Näytä dynaaminen kassapainike",
"fr": "Afficher le bouton de paiement dynamique",
"it": "Mostra pulsante di check-out dinamico",
"ja": "動的チェックアウトボタンを表示する",
"ko": "동적 결제 버튼 표시",
"nb": "Vis dynamisk knapp for å gå til kassen",
"nl": "Dynamische checkoutknop weergeven",
"pl": "Pokaż dynamiczny przycisk realizacji zakupu",
"pt-BR": "Exibir botão de checkout dinâmico",
"pt-PT": "Mostrar o botão dinâmico de finalização da compra",
"sv": "Visa dynamiska utcheckningsknappar",
"th": "แสดงปุ่มชำระเงินแบบไดนามิก",
"tr": "Dinamik ödeme düğmesini göster",
"vi": "Hiển thị nút thanh toán nhanh",
"zh-CN": "显示动态结账按钮",
"zh-TW": "顯示動態結帳按鈕"
},
"info": {
"cs": "Každý zákazník uvidí platební metodu, kterou ze všech metod dostupných v obchodě (například PayPal nebo Apple Pay) nejvíce preferuje. [Další informace](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"da": "Den enkelte kunde vil se sin foretrukne betalingsmetode blandt dem, der er tilgængelige i din butik, f.eks. PayPal eller Apple Pay. [Få mere at vide](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"de": "Jeder Kunde sieht seine bevorzugte Zahlungsmethode aus den in deinem Shop verfügbaren Zahlungsmethoden wie PayPal oder Apple Pay. [Mehr Informationen](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"en": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"es": "Cada cliente verá su forma de pago preferida entre las disponibles en tu tienda, como PayPal o Apple Pay. [Más información](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"fi": "Kukin asiakas näkee ensisijaisen valintansa kauppasi tarjoamista maksutavoista, esim. PayPal tai Apple Pay. [Lisätietoja](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"fr": "Chaque client verra son moyen de paiement préféré parmi ceux qui sont proposés sur votre boutique, tels que PayPal ou Apple Pay. [En savoir plus](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"it": "Ogni cliente vedrà il suo metodo di pagamento preferito tra quelli disponibili nel tuo negozio, come PayPal o Apple Pay. [Maggiori informazioni](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"ja": "PayPalやApple Payなど、ストアで利用可能なお好みの決済方法がお客様に表示されます。[詳しくはこちら](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"ko": "각 고객은 PayPal 또는 Apple Pay와 같이 스토어에서 사용 가능한 기본 결제 방법을 확인할 수 있습니다. [자세히 알아보기](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"nb": "Hver enkelt kunde vil se sin foretrukne betalingsmåte blant de som er tilgjengelig i butikken din, som PayPal eller Apple Pay. [Finn ut mer](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"nl": "Elke klant ziet zijn of haar beschikbare voorkeursmethode om af te rekenen, zoals PayPal of Apple Pay. [Meer informatie](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"pl": "Każdy klient zobaczy swoją preferowaną metodę płatności wśród metod dostępnych w Twoim sklepie, np. PayPal lub Apple Pay. [Dowiedz się więcej ](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"pt-BR": "Cada cliente verá a forma de pagamento preferencial dentre as disponíveis na loja, como PayPal ou Apple Pay. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"pt-PT": "Cada cliente irá ver o seu método de pagamento preferido entre os disponíveis na loja, como o PayPal ou Apple Pay. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"sv": "Varje kund kommer att se den föredragna betalningsmetoden från de som finns tillgängliga i din butik, till exempel PayPal eller Apple Pay. [Läs mer](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"th": "ลูกค้าแต่ละรายจะเห็นวิธีการชำระเงินที่ต้องการจากวิธีที่ใช้ได้ในร้านค้าของคุณ เช่น PayPal หรือ Apple Pay [ดูข้อมูลเพิ่มเติม](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"tr": "Her müşteri, mağazanızda sunulanlar arasından tercih ettikleri ödeme yöntemini görür (ör. PayPal veya Apple Pay). [Daha fazla bilgi edinin](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"vi": "Mỗi khách hàng sẽ thấy phương thức thanh toán ưu tiên trong những phương thức thanh toán được hỗ trợ tại cửa hàng như PayPal hoặc Apple Pay. [Tìm hiểu thêm](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"zh-CN": "每位客户都可在您商店提供的付款方式中看到他们的首选付款方式,例如 PayPal 或 Apple Pay。[了解详细信息](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"zh-TW": "每位顧客都可以在您商店內開放使用的付款方式中看見他們偏好使用的方式,如 PayPal、Apple Pay 等。[深入瞭解](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
},
"default": true
},
{
"type": "checkbox",
"id": "social_sharing_products",
"label": {
"cs": "Povolit sdílení produktů",
"da": "Aktivér produktdeling",
"de": "Teilen von Produkten aktivieren",
"en": "Enable product sharing",
"es": "Habilitar compartir productos",
"fi": "Ota tuotejako käyttöön",
"fr": "Activer le partage de produits",
"it": "Abilita condivisione del prodotto",
"ja": "商品の共有を有効にする",
"ko": "제품 공유 활성화",
"nb": "Aktiver produktdeling",
"nl": "Schakel het delen van producten in",
"pl": "Włącz udostępnianie produktów",
"pt-BR": "Habilitar o compartilhamento de produtos",
"pt-PT": "Ativar a partilha de produtos",
"sv": "Aktivera produktdelning",
"th": "เปิดใช้การแชร์สินค้า",
"tr": "Ürün paylaşımını etkinleştir",
"vi": "Bật chia sẻ sản phẩm",
"zh-CN": "启用产品分享",
"zh-TW": "啟用產品分享"
},
"default": true
},
{
"type": "checkbox",
"id": "product_reviews_enable",
"label": {
"cs": "Povolit recenze produktů",
"da": "Aktivér produktanmeldelser",
"de": "Produktbewertungen aktivieren",
"en": "Enable product reviews",
"es": "Habilitar reseñas de productos",
"fi": "Ota tuotearvostelut käyttöön",
"fr": "Activer les avis sur les produits",
"it": "Abilita recensioni di prodotto",
"ja": "商品レビューを有効にする",
"ko": "제품 리뷰 사용",
"nb": "Aktiver produktanmeldelser",
"nl": "Productbeoordelingen inschakelen",
"pl": "Włącz recenzje produktów",
"pt-BR": "Habilitar as avaliações de produtos",
"pt-PT": "Ativar as análises de produtos",
"sv": "Aktivera produktrecensioner",
"th": "เปิดรีวิวสินค้า",
"tr": "Ürün değerlendirmelerini etkinleştir",
"vi": "Bật đánh giá sản phẩm",
"zh-CN": "启用产品评论",
"zh-TW": "啟用產品評論"
},
"info": {
"cs": "Nainstalujte si zdarma aplikaci Shopify [Product Reviews](https://apps.shopify.com/product-reviews), která umožňuje přidávání recenzí produktů.",
"da": "Installer den gratis Shopify-app [Product Reviews](https://apps.shopify.com/product-reviews) for at tilføje produktanmeldelser.",
"de": "Installiere die kostenlose Shopify-App [Product Reviews](https://apps.shopify.com/product-reviews), um Produktbewertungen hinzuzufügen.",
"en": "Install the free Shopify [Product Reviews](https://apps.shopify.com/product-reviews) app to add product reviews.",
"es": "Instala la aplicación gratis de Shopify [Product Reviews](https://apps.shopify.com/product-reviews) para agregar reseñas de productos.",
"fi": "Asenna ilmainen Shopify [tuotearvostelut](https://apps.shopify.com/product-reviews) ‑sovellus lisätäksesi tuotearvostelut.",
"fr": "Installez l'application Shopify gratuite [Avis produits](https://apps.shopify.com/product-reviews) pour ajouter des avis produits.",
"it": "Installa l'app gratuita di Shopify [Product Reviews](https://apps.shopify.com/product-reviews) per aggiungere recensioni ai prodotti.",
"ja": "Shopify [商品レビュー](https://apps.shopify.com/product-reviews) アプリを無料でイントールして、商品レビューを追加しましょう。",
"ko": "제품 리뷰를 추가하려면 무료 Shopify [제품 리뷰](https://apps.shopify.com/product-reviews) 앱을 설치하십시오.",
"nb": "Installer den gratis Shopify [Product Reviews](https://apps.shopify.com/product-reviews)-appen for å legge til produktomtaler.",
"nl": "Installeer de gratis Shopify [Productbeoordelingne](https://apps.shopify.com/product-reviews)-app om productbeoordelingen toe te voegen.",
"pl": "Zainstaluj darmową aplikację Shopify [Product Reviews](https://apps.shopify.com/product-reviews), aby dodawać recenzje produktów.",
"pt-BR": "Instale o app gratuito [Product Reviews](https://apps.shopify.com/product-reviews) da Shopify para adicionar avaliações aos produtos.",
"pt-PT": "Instale a aplicação gratuita da Shopify [Avaliações de produtos](https://apps.shopify.com/product-reviews) para adicionar avaliações de produtos.",
"sv": "Installera den kostnadsfria Shopify [Produktrecensioner](https://apps.shopify.com/product-reviews)-appen för att lägga till produktrecensioner.",
"th": "ติดตั้ง [แอปรีวิวสินค้า](https://apps.shopify.com/product-reviews) ของ Shopify ฟรีเพื่อเพิ่มรีวิวสินค้า",
"tr": "Ürün değerlendirmeleri eklemek için ücretsiz Shopify [Product Reviews](https://apps.shopify.com/product-reviews) uygulamasını yükleyin.",
"vi": "Cài đặt ứng dụng [Product Reviews](https://apps.shopify.com/product-reviews) miễn phí của Shopify để thêm đánh giá sản phẩm.",
"zh-CN": "安装免费 Shopify [产品评论](https://apps.shopify.com/product-reviews) 应用以添加产品评论。",
"zh-TW": "免費安裝 Shopify [產品評論](https://apps.shopify.com/product-reviews) 應用程式以新增產品評論。"
}
},
{
"type": "select",
"id": "add_to_cart_button_size",
"label": {
"cs": "Velikost selektoru variant a tlačítek",
"da": "Variantvælger og knapstørrelse",
"de": "Variantenauswahl und Schaltflächengröße",
"en": "Variant picker and button size",
"es": "Selector de variantes y tamaño del botón",
"fi": "Versionvalitsin ja painikkeen koko",
"fr": "Sélecteur de variante et taille du bouton",
"it": "Dimensione selettore variante e pulsante",
"ja": "バリエーションピッカーとボタンサイズ",
"ko": "이형 상품 선택기 및 버튼 사이즈",
"nb": "Variantvelger og knappestørrelse",
"nl": "Variantkiezer en knopgrootte",
"pl": "Rozmiar selektora wariantów i przycisku",
"pt-BR": "Tamanho do botão e do seletor de variante",
"pt-PT": "Tamanho dos botões e seletor de variante",
"sv": "Variantväljare och knappstorlek",
"th": "รายการเครื่องมือเลือกสินค้าและขนาดของปุ่ม",
"tr": "Varyasyon seçici ve düğme boyutu",
"vi": "Trình chọn mẫu mã và cỡ nút",
"zh-CN": "多属性选择器和按钮大小",
"zh-TW": "子類選擇器和按鈕尺寸"
},
"default": "small",
"options": [
{
"value": "small",
"label": {
"cs": "Malá",
"da": "Lille",
"de": "Klein",
"en": "Small",
"es": "Pequeño",
"fi": "Pieni",
"fr": "Petite",
"it": "Small",
"ja": "小",
"ko": "스몰",
"nb": "Liten",
"nl": "Klein",
"pl": "Mały",
"pt-BR": "Pequeno",
"pt-PT": "Pequeno",
"sv": "Liten",
"th": "เล็ก",
"tr": "Küçük",
"vi": "Nhỏ",
"zh-CN": "小",
"zh-TW": "小型"
}
},
{
"value": "medium",
"label": {
"cs": "Střední",
"da": "Medium",
"de": "Mitte",
"en": "Medium",
"es": "Mediano",
"fi": "Keskisuuri",
"fr": "Moyenne",
"it": "Medium",
"ja": "中",
"ko": "보통",
"nb": "Middels",
"nl": "Gemiddeld",
"pl": "Średnie",
"pt-BR": "Médio",
"pt-PT": "Intermédio",
"sv": "Medium",
"th": "ปานกลาง",
"tr": "Orta",
"vi": "Trung bình",
"zh-CN": "中等",
"zh-TW": "中等"
}
},
{
"value": "large",
"label": {
"cs": "Velká",
"da": "Stor",
"de": "Groß",
"en": "Large",
"es": "Grande",
"fi": "Suuri",
"fr": "Grande",
"it": "Large",
"ja": "大",
"ko": "라지",
"nb": "Stor",
"nl": "Groot",
"pl": "Duży",
"pt-BR": "Grande",
"pt-PT": "Grande",
"sv": "Stor",
"th": "ใหญ่",
"tr": "Büyük",
"vi": "Lớn",
"zh-CN": "大",
"zh-TW": "大型"
}
}
]
}
]
}
{% endschema %}
After that create a snippet media.liquid and insert this code
{% case media.media_type %}
{% when 'image' %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div id="{{ img_wrapper_id }}" class="lazyload__image-wrapper{% unless image == featured_image %} hide{% endunless %}" data-image-id="{{ image.id }}" style="max-width: {{ max_width }}px">
<div class="no-js product__image-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
{{ media | img_url: '2048x2048' | img_tag }}
</div>
</div>
{% when 'external_video' %}
<div id="{{ media_wrapper_id }}" class="lazyload__image-wrapper{% unless image == featured_image %} hide{% endunless %}" data-media-id="{{ media.id }}" style="max-width: {{ max_width }}px" >
{{ media | external_video_tag }}
</div>
{% when 'video' %}
<div id="{{ media_wrapper_id }}" class="lazyload__image-wrapper{% unless image == featured_image %} hide{% endunless %}" class="lazyload__image-wrapper{% unless image == featured_image %} hide{% endunless %}" data-media-id="{{ media.id }}" style="padding-top: 100%;" >
{{ media | video_tag: controls: true }}
</div>
{% when 'model' %}
<div id="{{ media_wrapper_id }}" class="lazyload__image-wrapper{% unless image == featured_image %} hide{% endunless %}" style="max-width: {{ max_width }}px" data-media-id="{{ media.id }}">
{{ media | model_viewer_tag }}
</div>
{% else %}
<div id="{{ media_wrapper_id }}" class="lazyload__image-wrapper{% unless image == featured_image %} hide{% endunless %}" style="max-width: {{ max_width }}px" data-media-id="{{ media.id }}">
{{ media | media_tag }}
</div>
{% endcase %}
after that In the assets open the theme.scss file and add a little code at the end of the file
video {width: 100%;}
That's it. Now see your product page.
User | RANK |
---|---|
182 | |
155 | |
72 | |
35 | |
34 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023