Hi everyone!
Theme: Debut
Question: I would like to align the quantity selector next to the add-to-cart button. I would also like to edit the design of the variant selector (see the before/after image). I have already done some customisation, but it doesn’t turn out right.
Example: this store has the look I am trying to achieve for some reference: https://inhhair.com/collections/best-selling/products/hi-im-lola
My product-template.liquid code and theme.scss.liquid code is commented below.
My product-template.liquid:
{% case section.settings.media_size %}
{% when ‘small’ %}
{%- assign product_media_width = ‘medium-up–one-third’ -%}
{%- assign product_description_width = ‘medium-up–two-thirds’ -%}
{%- assign height = 345 -%}
{% when ‘medium’ %}
{%- assign product_media_width = ‘medium-up–one-half’ -%}
{%- assign product_description_width = ‘medium-up–one-half’ -%}
{%- assign height = 530 -%}
{% when ‘large’ %}
{%- assign product_media_width = ‘medium-up–two-thirds’ -%}
{%- assign product_description_width = ‘medium-up–one-third’ -%}
{%- assign height = 720 -%}
{% when ‘full’ %}
{%- assign product_media_width = ‘’ -%}
{%- assign product_description_width = ‘’ -%}
{%- assign height = 1090 -%}
{%- assign enable_image_zoom = false -%}
{% endcase %}
{%- for media in product.media -%}
{% include ‘media’, media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
{%- endfor -%}
{% assign first_3d_model = product.media | where: “media_type”, “model” | first %}
{%- if first_3d_model -%}
<button
aria-label=“{{ ‘products.product.view_in_space_label’ | t }}”
class=“product-single__view-in-space”
data-shopify-xr
data-shopify-model3d-id=“{{ first_3d_model.id }}”
data-shopify-title=“{{ product.title | escape }}”
data-shopify-xr-hidden
{% include ‘icon-3d-badge-full-color’ %}{{ ‘products.product.view_in_space’ | t }}
{%- endif -%}
{% if product.media.size > 1 %}
{% if product.media.size > 4 %}
{%- assign enable_thumbnail_slides = true -%}
{% endif %}
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
{% capture “form_classes” -%}
product-form product-form-{{ section.id }}
{%- unless section.settings.show_variant_labels %} product-form–hide-variant-labels {% endunless %}
{%- if section.settings.enable_payment_button and product.has_only_default_variant %} product-form–payment-button-no-variants {%- endif -%}
{%- if current_variant.available == false %} product-form–variant-sold-out {%- endif -%}
{%- endcapture %}
{% form ‘product’, product, class:form_classes, novalidate: ‘novalidate’, data-product-form: ‘’ %}
{% unless product.has_only_default_variant %}
{% if section.settings.show_quantity_selector %}
{%- comment -%}
Live region for announcing updated price and availability to screen readers
{%- endcomment -%}
{%- comment -%}
Live region for announcing that the product form has been submitted and the
product is in the process being added to the cart
{%- endcomment -%}
{{ 'products.product.loader_label' | t }}
{% if section.settings.show_share_buttons %}
{% include ‘social-sharing’, share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
{% endif %}
{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render ‘judgeme_widgets’, widget_type: ‘judgeme_review_widget’, concierge_install: true, product: product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}
{% unless product == empty %}
{% endunless %}
{% schema %}
{
“name”: {
“da”: “Produktsider”,
“de”: “Produktseiten”,
“en”: “Product pages”,
“es”: “Páginas de productos”,
“fi”: “Tuotesivut”,
“fr”: “Pages de produits”,
“hi”: “उत्पाद पेज”,
“it”: “Pagine di prodotto”,
“ja”: “商品ページ”,
“ko”: “제품 페이지”,
“nb”: “Produktsider”,
“nl”: “Productpagina’s”,
“pt-BR”: “Páginas de produtos”,
“pt-PT”: “Páginas de produtos”,
“sv”: “Produktsidor”,
“th”: “หน้าสินค้า”,
“zh-CN”: “产品页面”,
“zh-TW”: “產品頁面”
},
“settings”: [
{
“type”: “checkbox”,
“id”: “show_quantity_selector”,
“label”: {
“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é”,
“hi”: “मात्रा चयनकर्ता दिखाएं”,
“it”: “Mostra selettore quantità”,
“ja”: “数量セレクターを表示する”,
“ko”: “수량 선택기 표시”,
“nb”: “Vis mengdevelger”,
“nl”: “Hoeveelheidskiezer weergeven”,
“pt-BR”: “Exibir seletor de quantidade”,
“pt-PT”: “Mostrar um seletor de quantidade”,
“sv”: “Visa kvantitetsväljare”,
“th”: “แสดงตัวเลือกจำนวน”,
“zh-CN”: “显示数量选择器”,
“zh-TW”: “顯示數量選擇器”
},
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_variant_labels”,
“label”: {
“da”: “Vis variantlabels”,
“de”: “Varianten-Etiketten anzeigen”,
“en”: “Show variant labels”,
“es”: “Mostrar etiquetas de variantes”,
“fi”: “Näytä vaihtoehtoiset tarrat”,
“fr”: “Afficher le nom des variantes”,
“hi”: “वेरिएंट लेबल दिखाएं”,
“it”: “Mostra etichette varianti”,
“ja”: “バリエーションのラベルを表示する”,
“ko”: “이형 상품 레이블 표시”,
“nb”: “Vis variantetiketter”,
“nl”: “Variantlabels weergeven”,
“pt-BR”: “Exibir etiquetas de variantes”,
“pt-PT”: “Mostrar etiquetas de variantes”,
“sv”: “Visa variantetiketter”,
“th”: “แสดงป้ายกำกับตัวเลือกสินค้า”,
“zh-CN”: “显示多属性标签”,
“zh-TW”: “顯示子類選項標籤”
},
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“label”: {
“da”: “Vis leverandør”,
“de”: “Lieferanten anzeigen”,
“en”: “Show vendor”,
“es”: “Mostrar proveedor”,
“fi”: “Näytä myyjä”,
“fr”: “Afficher les vendeurs”,
“hi”: “विक्रेता दिखाएं”,
“it”: “Mostra fornitore”,
“ja”: “販売元を表示する”,
“ko”: “공급업체 표시”,
“nb”: “Vis leverandør”,
“nl”: “Leverancier weergeven”,
“pt-BR”: “Exibir fornecedor”,
“pt-PT”: “Mostrar fornecedor”,
“sv”: “Visa säljare”,
“th”: “แสดงผู้ขาย”,
“zh-CN”: “显示厂商”,
“zh-TW”: “顯示廠商”
},
“default”: false
},
{
“type”: “checkbox”,
“id”: “enable_payment_button”,
“label”: {
“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”,
“hi”: “डायनेमिक चेकआउट बटन दिखाएं”,
“it”: “Mostra pulsante di check-out dinamico”,
“ja”: “動的チェックアウトボタンを表示する”,
“ko”: “동적 결제 버튼 표시”,
“nb”: “Vis dynamisk knapp for å gå til kassen”,
“nl”: “Dynamische betaalknop weergeven”,
“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”: “แสดงปุ่มชำระเงินแบบไดนามิก”,
“zh-CN”: “显示动态结账按钮”,
“zh-TW”: “顯示動態結帳按鈕”
},
“info”: {
“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”,
“hi”: “प्रत्येक ग्राहक आपके स्टोर पर उपलब्ध अपनी पसंदीदा भुगतान की विधि देखेंगे जैसे PayPal या Apple Pay. अधिक जानें”,
“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”,
“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 ดูข้อมูลเพิ่มเติม”,
“zh-CN”: “每位客户都可在您商店提供的付款方式中看到他们的首选付款方式，例如 PayPal 或 Apple Pay。了解详细信息”,
“zh-TW”: “每位顧客都可以在您商店內開放使用的付款方式中看見他們偏好使用的方式，如 PayPal、Apple Pay 等。深入瞭解”
},
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_share_buttons”,
“label”: {
“da”: “Vis knapper til deling på sociale medier”,
“de”: “Buttons für Social Media anzeigen”,
“en”: “Show social sharing buttons”,
“es”: “Mostrar botones para compartir en redes sociales”,
“fi”: “Näytä sosiaalisen median jakamispainikkeet”,
“fr”: “Affichez les boutons de partage sur les médias sociaux”,
“hi”: “सोशल शेयरिंग बटन दिखाएं”,
“it”: “Mostra i pulsanti per la condivisione sui social”,
“ja”: “ソーシャルメディアでの共有ボタンを表示する”,
“ko”: “소셜 공유 버튼 표시”,
“nb”: “Vis knapper for deling på sosiale medier”,
“nl”: “Knoppen voor sociaal delen weergeven”,
“pt-BR”: “Exibir botões de compartilhamento em redes sociais”,
“pt-PT”: “Mostrar botões de partilha nas redes sociais”,
“sv”: “Visa knappar för delning i sociala medier”,
“th”: “แสดงปุ่มสำหรับแชร์ลงโซเชียล”,
“zh-CN”: “显示社交分享按钮”,
“zh-TW”: “顯示社群分享按鈕”
},
“default”: true
},
{
“type”: “header”,
“content”: {
“da”: “Medie”,
“de”: “Medien”,
“en”: “Media”,
“es”: “Elementos multimedia”,
“fi”: “Media”,
“fr”: “Support multimédia”,
“hi”: “मीडिया”,
“it”: “Media”,
“ja”: “メディア”,
“ko”: “미디어”,
“nb”: “Medier”,
“nl”: “Media”,
“pt-BR”: “Mídia”,
“pt-PT”: “Multimédia”,
“sv”: “Media”,
“th”: “สื่อ”,
“zh-CN”: “媒体”,
“zh-TW”: “媒體”
},
“info”: {
“da”: “Få mere at vide om media types”,
“de”: "Mehr Informationen über Medientypen ",
“en”: “Learn more about media types”,
“es”: “Más información sobre tipos de archivos multimedia”,
“fi”: “Lue lisää mediatyypeistä”,
“fr”: “En savoir plus sur les types de supports multimédia”,
“hi”: “मीडिया प्रकार के बारे में और जानें”,
“it”: “Scopri di più sulle tipologie di file multimediali”,
“ja”: “メディアのタイプ について詳しくはこちら”,
“ko”: “미디어 유형에](https://help.shopify.com/manual/products/product-media)에) 대해 자세히 알아보기”,
“nb”: “Lær mer om medietyper”,
“nl”: “Meer informatie over mediatypen”,
“pt-BR”: “Saiba mais sobre tipos de mídia”,
“pt-PT”: “Saiba mais sobre media types”,
“sv”: “Läs mer om mediatyper”,
“th”: “ดูข้อมูลเพิ่มเติมเกี่ยวกับ ประเภทของสื่อ”,
“zh-CN”: “详细了解媒体类型”,
“zh-TW”: “深入瞭解 媒體類型”
}
},
{
“type”: “select”,
“id”: “media_size”,
“label”: {
“da”: “Størrelse”,
“de”: “Größe”,
“en”: “Size”,
“es”: “Tamaño”,
“fi”: “Koko”,
“fr”: “Taille”,
“hi”: “आकार”,
“it”: “Dimensione”,
“ja”: “サイズ”,
“ko”: “사이즈”,
“nb”: “Størrelse”,
“nl”: “Grootte”,
“pt-BR”: “Tamanho”,
“pt-PT”: “Tamanho”,
“sv”: “Storlek”,
“th”: “ขนาด”,
“zh-CN”: “大小”,
“zh-TW”: “尺寸”
},
“options”: [
{
“value”: “small”,
“label”: {
“da”: “Lille”,
“de”: “Klein”,
“en”: “Small”,
“es”: “Pequeño”,
“fi”: “Pieni”,
“fr”: “Petit”,
“hi”: “छोटा”,
“it”: “Piccolo”,
“ja”: “スモール”,
“ko”: “스몰”,
“nb”: “Liten”,
“nl”: “Klein”,
“pt-BR”: “Pequeno”,
“pt-PT”: “Pequeno”,
“sv”: “Liten”,
“th”: “เล็ก”,
“zh-CN”: “小”,
“zh-TW”: “小型”
}
},
{
“value”: “medium”,
“label”: {
“da”: “Medium”,
“de”: “Mittel”,
“en”: “Medium”,
“es”: “Mediano”,
“fi”: “Keskisuuri”,
“fr”: “Moyenne”,
“hi”: “मध्यम”,
“it”: “Medio”,
“ja”: “中”,
“ko”: “보통”,
“nb”: “Middels”,
“nl”: “Gemiddeld”,
“pt-BR”: “Médio”,
“pt-PT”: “Médio”,
“sv”: “Medium”,
“th”: “ปานกลาง”,
“zh-CN”: “中等”,
“zh-TW”: “中等”
}
},
{
“value”: “large”,
“label”: {
“da”: “Stor”,
“de”: “Groß”,
“en”: “Large”,
“es”: “Grande”,
“fi”: “Suuri”,
“fr”: “Grande”,
“hi”: “बड़ा”,
“it”: “Grande”,
“ja”: “大”,
“ko”: “라지”,
“nb”: “Stor”,
“nl”: “Groot”,
“pt-BR”: “Grande”,
“pt-PT”: “Grande”,
“sv”: “Stor”,
“th”: “ใหญ่”,
“zh-CN”: “大”,
“zh-TW”: “大型”
}
},
{
“value”: “full”,
“label”: {
“da”: “Fuld bredde”,
“de”: “Volle Breite”,
“en”: “Full-width”,
“es”: “Ancho completo”,
“fi”: “Täysi leveys”,
“fr”: “Pleine largeur”,
“hi”: “पूर्ण चौड़ाई”,
“it”: “Intera larghezza”,
“ja”: “全幅”,
“ko”: “전체 폭”,
“nb”: “Full bredde”,
“nl”: “Volledige breedte”,
“pt-BR”: “Largura completa”,
“pt-PT”: “Largura completa”,
“sv”: “Full bredd”,
“th”: “เต็มความกว้าง”,
“zh-CN”: “全宽”,
“zh-TW”: “完整寬度”
}
}
],
“default”: “medium”
},
{
“type”: “checkbox”,
“id”: “enable_image_zoom”,
“label”: {
“da”: “Aktivér billedzoom”,
“de”: “Foto-Zoom zulassen”,
“en”: “Enable image zoom”,
“es”: “Habilitar zoom de imagen”,
“fi”: “Ota kuvan zoomaus käyttöön”,
“fr”: “Activer le zoom d’image”,
“hi”: “इमेज ज़ूम सक्षम करें”,
“it”: “Abilita lo zoom dell’immagine”,
“ja”: “画像ズームを有効にする”,
“ko”: “이미지 확대 사용”,
“nb”: “Aktiver bildezoom”,
“nl”: “Inzoomen op afbeelding inschakelen”,
“pt-BR”: “Habilitar o zoom da imagem”,
“pt-PT”: “Ativar o zoom da imagem”,
“sv”: “Aktivera bildzoom”,
“th”: “เปิดใช้การซูมภาพ”,
“zh-CN”: “启用图片缩放”,
“zh-TW”: “啟用圖片縮放”
},
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_video_looping”,
“label”: {
“da”: “Aktivér looping af videoer”,
“de”: “Videschleife aktivieren”,
“en”: “Enable video looping”,
“es”: “Habilitar la reproducción de video en bucle”,
“fi”: “Ota käyttöön videosilmukka”,
“fr”: “Activer le bouclage de la vidéo”,
“hi”: “वीडियो लूपिंग सक्षम करें”,
“it”: “Abilita la riproduzione in loop dei video”,
“ja”: “ビデオのループを有効にする”,
“ko”: “동영상 루프”,
“nb”: “Aktiver løkkeavspilling av video”,
“nl”: “Video-looping inschakelen”,
“pt-BR”: “Habilitar loop de vídeo”,
“pt-PT”: “Ativar ciclo de vídeo”,
“sv”: “Aktivera video-loopning”,
“th”: “เปิดใช้งานการวนซ้ำวิดีโอ”,
“zh-CN”: “启用视频循环”,
“zh-TW”: “啟用影片循環功能”
},
“default”: false
}
]
}
{% endschema %}
My theme.scss.liquid code:
/* Add to Cart button and Quantity selector */
.qtydiv label{
display: block;
margin-bottom: 12px;
letter-spacing: 2.8px;
color: #747a7b;
}
.qtydiv .btnqty{
display: inline-block;
cursor: pointer;
user-select: none;
font-size: 25px;
padding: 5px;
line-height: 5px;
}
.qtydiv .btnqty.qtyminus{
margin-right: 8px;
}
.qtydiv .btnqty.qtyplus{
margin-left: 8px;
}
.qtydiv .quantity-input{
border: none;
border: none;
padding: 8px;
text-align: center;
width: 50px;
outline: none;
display: inline-block;
}
.qtydiv {display: inline-block;
padding-right: 15px;
padding-top: 10px;
}
