Hey,
so i have the problem that when i switch from the destop view to the mobile view on my product page, one picture is above the add to cart banner etc. and the second picture is at the bottom of the site. Does someone can help me please with like a html code or something?
Hi @cool_guy_42 ,
Thank you for reaching out to the Shopify Community!
Please share your store URL here and allow me to check it for you.
Thanks & Regards,
Ahsan ANC
Hey,
thx for the fast reply. U only gonna see it on the mobile version, if u click at one product.
You want to show both picture side by side at the top?
Yeah just like at the Destop version. Maybe like sliding from one picture to the other.
But it should just adapt to the mobile version, the destop version should stay like that.
Hi, @cool_guy_42
You can try this code
@media only screen and (max-width: 749px){
.product__photo.grid__item.medium-up--one-half,.product__photo.grid__item.small--hide.medium-up--one-half{
width: 50%;
}
.product__photo.grid__item.small--hide.medium-up--one-half {
display: block !important;
}
}
So,
u can see now the result, what i had in mind is that the change would be just on the mobile version and not on the desktop version too.
The boundless theme has very less options for product page customization.
please share “product-template.liquid” file code.
{% comment %}
Get first variant, or deep linked one
{% endcomment %}
{% assign current_variant = product.selected_or_first_available_variant %}
{% comment %}
Get first image
{% endcomment %}
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
{% assign first_image = featured_image %}
{% if product.images.size > 1 and section.settings.skip_first_product_image and first_image == product.featured_image %}
{% assign first_image = product.images[1] %}
{% endif %}
{% comment %}
Set variables for product image grid
{% endcomment %}
{% if section.settings.product_image_type == ‘portrait’ %}
{% if product.images.size == 1 %}
{% assign grid_item_width = ‘’ %}
{% elsif product.images.size == 2 and section.settings.skip_first_product_image %}
{% assign grid_item_width = ‘’ %}
{% else %}
{% assign grid_item_width = ‘medium-up–one-half’ %}
{% endif %}
{% assign is_portrait_image = true %}
{% else %}
{% assign grid_item_width = ‘’ %}
{% endif %}
{% if product.images.size > 0 %}
{% comment %}
Counting images shown on the page
{% endcomment %}
{% assign index = 1 %}
{% comment %}
If we have portrait images, we show two per row, so let’s get a second image.
That image will be moved down below the description on mobile, hence why we’ll use
small--hide. The image moved down is stored in the variable duplicate_image.
{% endcomment %}
{% if is_portrait_image %}
{% for image in product.images %}
{% unless image == first_image %}
{% unless section.settings.skip_first_product_image and image == product.featured_image %}
{% endif %}
{{ product.vendor }}
{% endif %}{% if section.settings.show_quantity_selector %}
{% assign price = current_variant.price | money_without_trailing_zeros %}
{% if product.compare_at_price_max > product.price %} {{ 'products.general.regular_price' | t }} {{ current_variant.compare_at_price | money_without_trailing_zeros }} {{ 'products.general.now_price_html' | t: price: price }} {% else %} {{ 'products.general.regular_price' | t }} {{ price }} {% endif %} {% include 'product-unit-price', variant: current_variant %}
{%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
{{ form | payment_terms }}
{% if product.available %}
{{ ‘products.product.add_to_cart’ | t }}
{% else %}
{{ ‘products.product.sold_out’ | t }}
{% endif %}
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
{% endform %}
{% comment %}
Show second product photo after description on mobile if
image setting style is ‘portrait’ and there is a duplicate_image to show
{% endcomment %}
{% if is_portrait_image and product.images.size > 1 and duplicate_image %}
{% comment %}
Show other product images below product info if there’s any left to show
{% endcomment %}
{% if index < product.images.size %}
{% for image in product.images offset:index_offset %}
{% unless image == first_image %}
{% unless section.settings.skip_first_product_image and image == product.featured_image %}
{% unless product == empty %}
{% endunless %}
{% 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”: “產品”
},
“settings”: [
{
“type”: “checkbox”,
“id”: “skip_first_product_image”,
“label”: {
“cs”: “Vynechat první obrázek produktu”,
“da”: “Spring over første produktbillede”,
“de”: “Das erste Produktbild überspringen”,
“en”: “Skip first product image”,
“es”: “Omitir la primera imagen del producto”,
“fi”: “Ohita ensimmäinen tuotekuva”,
“fr”: “Sauter la première image du produit”,
“it”: “Salta prima immagine prodotto”,
“ja”: “最初の商品画像をスキップする”,
“ko”: “첫 번째 제품 이미지 건너 뛰기”,
“nb”: “Hopp over første produktbilde”,
“nl”: “Sla de eerste productafbeelding over”,
“pl”: “Pomiń pierwszy obraz produktu”,
“pt-BR”: “Ignorar a primeira imagem do produto”,
“pt-PT”: “Ignorar a primeira imagem de produto”,
“sv”: “Hoppa över första produktbilden”,
“th”: “ข้ามรูปภาพสินค้าแรก”,
“tr”: “İlk ürün görselini atla”,
“vi”: “Bỏ qua hình ảnh sản phẩm đầu tiên”,
“zh-CN”: “跳过第一张产品图片”,
“zh-TW”: “略過第一張產品圖片”
},
“info”: {
“cs”: “První obrázek každého produktu můžete nastavit tak, aby se ve vašem obchodě zobrazoval jen na stránce s kolekcemi. Zjistěte více.”,
“da”: “Sørg for, at det første billede for hvert produkt kun vises på din butiks kollektionsside. Få mere at vide.”,
“de”: “Lass das erste Bild für jedes Produkt nur auf der Kategorieseite deines Shops anzeigen. Mehr Informationen.”,
“en”: “Make the first image for each product only appear on the collections page of your store. Learn more.”,
“es”: “Haz que la primera imagen de cada producto aparezca solo en la página de colecciones de tu tienda. Más información.”,
“fi”: “Määritä kunkin tuotteen ensimmäinen kuva näkymään vain kaupan kokoelmasivulla. Lue lisää.”,
“fr”: “Faites en sorte que la première image de chaque produit apparaisse uniquement à la page des collections de votre boutique. En savoir plus.”,
“it”: “Fai apparire la prima immagine di ogni prodotto solo sulla pagina delle collezioni del tuo negozio. Maggiori informazioni.”,
“ja”: “各商品の最初のイメージをストアのコレクションページにのみ表示するようにします。詳しくはこちら。](https://docs.shopify.com/manual/more/official-shopify-themes/boundless#skip-first-product-image-option)。)”,
“ko”: “각 제품의 첫 번째 이미지를 스토어의 컬렉션 페이지에만 표시하십시오. 자세히 알아보기”,
“nb”: “Gjør at det første bildet for hvert produkt kun vises på samlingssiden i butikken din. Finn ut mer.”,
“nl”: “Laat de eerste afbeelding voor elk product alleen op de pagina collecties van je winkel zien. Meer informatie.”,
“pl”: “Ustaw wyświetlanie pierwszego obrazu dla każdego produktu tyko na stronie kolekcji Twojego sklepu. Dowiedz się więcej.”,
“pt-BR”: “Faça com que a primeira imagem de cada produto apareça apenas na página de coleções de sua loja. Saiba mais.”,
“pt-PT”: “A primeira imagem de cada produto apenas irá aparecer na página de coleções da sua loja. Saiba mais.”,
“sv”: “Gör så att den första bilden för varje produkt endast visas på din butiks produktseriesidor. Läs mer.”,
“th”: “ทำให้รูปภาพแรกสำหรับสินค้าแต่ละรายการปรากฏเฉพาะในหน้าคอลเลกชันของร้านค้าของคุณ ดูข้อมูลเพิ่มเติม”,
“tr”: “Her ürünün ilk görselini, yalnızca mağazanızın koleksiyonlar sayfasında gösterin. Daha fazla bilgi edinin.”,
“vi”: “Chỉ tạo hình ảnh đầu tiên cho mỗi sản phẩm xuất hiện trên trang bộ sưu tập của cửa hàng. Tìm hiểu thêm.”,
“zh-CN”: “让每个产品的第一张图片仅在商店的产品系列页面上显示。了解详细信息。](https://docs.shopify.com/manual/more/official-shopify-themes/boundless#skip-first-product-image-option)。)”,
“zh-TW”: “讓每個產品的第一張圖片僅在您商店的商品系列頁面上顯示。深入瞭解。](https://docs.shopify.com/manual/more/official-shopify-themes/boundless#skip-first-product-image-option)。)”
}
},
{
“type”: “select”,
“id”: “product_image_type”,
“label”: {
“cs”: “Styl obrázku”,
“da”: “Billedstil”,
“de”: “Bildstil”,
“en”: “Image style”,
“es”: “Estilo de imagen”,
“fi”: “Kuvan tyyli”,
“fr”: “Style d’image”,
“it”: “Stile immagine”,
“ja”: “画像スタイル”,
“ko”: “이미지 스타일”,
“nb”: “Bildestil”,
“nl”: “Afbeeldingsstijl”,
“pl”: “Styl obrazu”,
“pt-BR”: “Estilo da imagem”,
“pt-PT”: “Estilo da imagem”,
“sv”: “Bildstil”,
“th”: “รูปแบบรูปภาพ”,
“tr”: “Görsel stili”,
“vi”: “Kiểu hình ảnh”,
“zh-CN”: “图片样式”,
“zh-TW”: “圖片樣式”
},
“options”: [
{
“value”: “portrait”,
“label”: {
“cs”: “Na výšku/čtverec”,
“da”: “Høj/firkantet”,
“de”: “Hoch/Quadrat”,
“en”: “Tall/square”,
“es”: “Alta/cuadrada”,
“fi”: “Korkea/neliö”,
“fr”: “Grand/carré”,
“it”: “Verticale/quadrata”,
“ja”: “縦長/正方形”,
“ko”: “높이/정사각형”,
“nb”: “Høyt/kvadratisk”,
“nl”: “Hoog/vierkant”,
“pl”: “Wysoki/kwadratowy”,
“pt-BR”: “Alto/quadrado”,
“pt-PT”: “Alto/quadrado”,
“sv”: “Hög/kvadratisk”,
“th”: “สูง/สี่เหลี่ยมจัตุรัส”,
“tr”: “Uzun/kare”,
“vi”: “Cao/vuông”,
“zh-CN”: “高/正方形”,
“zh-TW”: “高/正方形”
}
},
{
“value”: “landscape”,
“label”: {
“cs”: “Na šířku”,
“da”: “Bred”,
“de”: “Breit”,
“en”: “Wide”,
“es”: “Ancho”,
“fi”: “Leveä”,
“fr”: “Large”,
“it”: “Orizzontale”,
“ja”: “横長”,
“ko”: “넓이”,
“nb”: “Bred”,
“nl”: “Breed”,
“pl”: “Szeroki”,
“pt-BR”: “Grande”,
“pt-PT”: “Largo”,
“sv”: “Bred”,
“th”: “กว้าง”,
“tr”: “Geniş”,
“vi”: “Rộng”,
“zh-CN”: “宽”,
“zh-TW”: “寬”
}
}
]
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“label”: {
“cs”: “Zobrazit dodavatele”,
“da”: “Vis leverandør”,
“de”: “Lieferanten anzeigen”,
“en”: “Show vendor”,
“es”: “Mostrar proveedor”,
“fi”: “Näytä myyjä”,
“fr”: “Afficher le distributeur”,
“it”: “Mostra fornitore”,
“ja”: “販売元を表示する”,
“ko”: “공급업체 표시”,
“nb”: “Vis leverandør”,
“nl”: “Leverancier weergeven”,
“pl”: “Pokaż dostawcę”,
“pt-BR”: “Mostrar fabricante”,
“pt-PT”: “Mostrar fornecedor”,
“sv”: “Visa säljare”,
“th”: “แสดงผู้ขาย”,
“tr”: “Satıcıyı göster”,
“vi”: “Hiển thị nhà cung cấp”,
“zh-CN”: “显示厂商”,
“zh-TW”: “顯示廠商”
},
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_quantity_selector”,
“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”: “Mostre um 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”: “顯示數量選擇器”
},
“default”: false
},
{
“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”: “Permetti condivisione del prodotto”,
“ja”: “商品の共有を有効にする”,
“ko”: “제품 공유 활성화”,
“nb”: “Aktiver produktdeling”,
“nl”: “Schakel het delen van producten in”,
“pl”: “Włącz udostępnianie produktów”,
“pt-BR”: “Habilite 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”: “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”: “Mostrar 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üğmeleri 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”,
“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”,
“de”: “Jeder Kunde sieht seine bevorzugte Zahlungsmethode aus den in deinem Shop verfügbaren Zahlungsmethoden wie PayPal oder Apple Pay. Mehr Informationen”,
“en”: “Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. Learn more”,
“es”: “Cada cliente verá su forma de pago preferida entre las disponibles en tu tienda, como PayPal o Apple Pay. Más información”,
“fi”: “Kukin asiakas näkee ensisijaisen valintansa kauppasi tarjoamista maksutavoista, esim. PayPal tai Apple Pay. Lisätietoja”,
“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”,
“it”: “Ogni cliente vedrà il suo metodo di pagamento preferito tra quelli disponibili nel tuo negozio, come PayPal o Apple Pay. Maggiori informazioni”,
“ja”: “PayPalやApple Payなど、ストアで利用可能な希望の決済方法がお客様に表示されます。詳しくはこちら”,
“ko”: “각 고객은 PayPal 또는 Apple Pay와 같이 스토어에서 사용 가능한 지불 방법을 확인할 수 있습니다. 자세히 알아보기”,
“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”,
“nl”: “Elke klant ziet zijn of haar beschikbare voorkeursmethode om af te rekenen, zoals PayPal of Apple Pay. Meer informatie”,
“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”,
“pt-BR”: “Cada cliente verá a forma de pagamento preferencial dele dentre as disponíveis na loja, como PayPal ou Apple Pay. Saiba mais”,
“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”,
“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”,
“th”: “ลูกค้าแต่ละรายจะเห็นวิธีการชำระเงินที่ต้องการจากวิธีที่ใช้ได้ในร้านค้าของคุณ เช่น PayPal หรือ Apple Pay ดูข้อมูลเพิ่มเติม”,
“tr”: “Her müşteri, mağazanız sunulanlar arasından tercih ettikleri ödeme yöntemini görür (ör. PayPal veya Apple Pay). Daha fazla bilgi edinin”,
“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”,
“zh-CN”: “每位客户都可在您商店提供的付款方式中看到他们的首选付款方式，例如 PayPal 或 Apple Pay。了解详细信息”,
“zh-TW”: “每位顧客都可以在您商店內開放使用的付款方式中看見他們偏好使用的方式，如 PayPal、Apple Pay 等。深入瞭解”
},
“default”: true
},
{
“type”: “select”,
“id”: “product_form_width”,
“label”: {
“cs”: “Šířka produktového formuláře”,
“da”: “Bredde af produktformular”,
“de”: “Breite Produktformular”,
“en”: “Product form width”,
“es”: “Ancho del formulario del producto”,
“fi”: “Tuotelomakkeen leveys”,
“fr”: “Largeur du formulaire de produit”,
“it”: “Larghezza scheda prodotto”,
“ja”: “商品のフォームの幅”,
“ko”: “제품 양식 폭”,
“nb”: “Bredde på produktskjema”,
“nl”: “Breedte productformulier”,
“pl”: “Szerokość formularza produktu”,
“pt-BR”: “Largura do formulário do produto”,
“pt-PT”: “Largura do formulário do produto”,
“sv”: “Produktformsbredd”,
“th”: “ความกว้างของแบบฟอร์มสินค้า”,
“tr”: “Ürün form genişliği”,
“vi”: “Chiều rộng sản phẩm”,
“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”: “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 %}
gotta close the site cause we didn’t release yet our products,
Password for entering the site: shaubu