Solved

Put Quantity Selector And Add To Cart Button On Same Line In CRAFT Theme

sweetjay
Tourist
26 0 0

Hey, I would like to know how I can add the quantity selector button next to the add to cart button on my product pages! Below is an image of how it is currently setup on my site. (Using CRAFT Theme).

 

kk235325_0-1706658648733.png

 

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7992 1560 1583

This is an accepted solution.

Please add that code at very bottom of your buy-buttons liquid file and remove default quantity from your product page customize Screenshot 2024-01-31 at 11.28.45.png

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 24 (24)

Dan-From-Ryviu
Shopify Partner
7992 1560 1583

Hi @sweetjay 

Please go to Online store > Themes > Customize > Products > Default product, drag and drop Quantity selector above Buy buttons block, Save your template.

After that, please send me your product page URL so I can give you the code to move them on the same line.

Screenshot 2024-01-31 at 09.37.32.png

 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

sweetjay
Tourist
26 0 0

Hey, it is already done in the picture as well. It looks like it isn’t because I am using an app to get the swatch images & style buttons on the product page. In theme editor the Quantity Selector is above the buy buttons! Here is the page URL: https://sweethomestore.co/products/flame-aroma-diffuser 

Dan-From-Ryviu
Shopify Partner
7992 1560 1583

Please add this code to your theme.liquid file, under <head> in Online store > Themes > Edit code 

<style>
.product-form__buttons {
position: absolute;
top: 257px;
right: 0px;
width: calc(100% - 154px);
}
@media (max-width: 749px) {
.product-form__buttons {
top: 225px !Important;
width: 
}
}
</style>

 

 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

sweetjay
Tourist
26 0 0

Hey, it moved the Add To Cart button up instead of moving the quantity button down, is it possible to do it the other way, where the quantity button goes down next to the Add To Cart, I will include a screenshot of what happened on the site:

sweetjay_0-1706670544734.png

Desired end goal would look either one of these, the first priority being the quantity button NEXT to the add to cart button, but if that is not possible, on top of it is fine as well! Thank you in advance! Screen shots from the desired outcome: 

sweetjay_1-1706670668116.png

 

 



sweetjay_2-1706670688351.png

 



Dan-From-Ryviu
Shopify Partner
7992 1560 1583

Please update the code 

<style>
.product-form__quantity {
position: absolute;
top: 440px;
}
.product-form__buttons {
width: calc(100% - 154px);
float: right;
margin-top: 15px;
}
@media (max-width: 749px) {
.product-form__quantity  {
top: 407px !important;
}
}
</style>

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

sweetjay
Tourist
26 0 0

Hey, it works great on the page I sent you but it is in the wrong position on other product pages. Is it possible to get this setup on every product page? heres a few screenshots:

sweetjay_0-1706671345772.pngsweetjay_1-1706671363487.png

Here is a screenshot how it works on the page I linked (Perfect!) If there is a way to get this done on every page, that would be perfect! Thank you in advance! 

sweetjay_2-1706671419180.png

 

Dan-From-Ryviu
Shopify Partner
7992 1560 1583

I see, I guess it need to edit your theme file to move quantity next to ATC button to make it works well for all products

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

sweetjay
Tourist
26 0 0

Any idea as to how that is done? As coding is definitely not my strongsuit. Thank you in advance!

Dan-From-Ryviu
Shopify Partner
7992 1560 1583

Go to your Online store > Themes > Edit code > open main-product.liquid, move all code under {%- when 'quantity_selector' -%} into buy-buttons.liquid file, before </product-form>. 

After that, I will provide the code

 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

sweetjay
Tourist
26 0 0

Hey, just to make sure, you want me to move all of this, or just a part of it. This is everything under the said code line:

{%- when 'quantity_selector' -%}
<div
id="Quantity-Form-{{ section.id }}"
class="product-form__input product-form__quantity{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} product-form__quantity-top{% endif %}"
{{ block.shopify_attributes }}
>
{% comment %} TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter {% endcomment %}
{% # theme-check-disable %}
{%- assign cart_qty = cart | item_count_for_variant: product.selected_or_first_available_variant.id -%}
{% # theme-check-enable %}
<label class="quantity__label form__label" for="Quantity-{{ section.id }}">
{{ 'products.product.quantity.label' | t }}
<span class="quantity__rules-cart no-js-hidden{% if cart_qty == 0 %} hidden{% endif %}">
<span class="loading-overlay hidden">
<span class="loading-overlay__spinner">
<svg
aria-hidden="true"
focusable="false"
class="spinner"
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/svg"
>
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</span>
</span>
<span>({{- 'products.product.quantity.in_cart_html' | t: quantity: cart_qty -}})</span>
</span>
</label>
<quantity-input class="quantity">
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">
{{- 'products.product.quantity.decrease' | t: product: product.title | escape -}}
</span>
{% render 'icon-minus' %}
</button>
<input
class="quantity__input"
type="number"
name="quantity"
id="Quantity-{{ section.id }}"
data-cart-quantity="{{ cart_qty }}"
data-min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
{% if product.selected_or_first_available_variant.quantity_rule.max != null %}
data-max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
{% endif %}
step="{{ product.selected_or_first_available_variant.quantity_rule.increment }}"
value="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
form="{{ product_form_id }}"
/>
<button class="quantity__button no-js-hidden" name="plus" type="button">
<span class="visually-hidden">
{{- 'products.product.quantity.increase' | t: product: product.title | escape -}}
</span>
{% render 'icon-plus' %}
</button>
</quantity-input>
<div class="quantity__rules caption no-js-hidden">
{%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%}
<span class="divider">
{{-
'products.product.quantity.multiples_of'
| t: quantity: product.selected_or_first_available_variant.quantity_rule.increment
-}}
</span>
{%- endif -%}
{%- if product.selected_or_first_available_variant.quantity_rule.min > 1 -%}
<span class="divider">
{{-
'products.product.quantity.minimum_of'
| t: quantity: product.selected_or_first_available_variant.quantity_rule.min
-}}
</span>
{%- endif -%}
{%- if product.selected_or_first_available_variant.quantity_rule.max != null -%}
<span class="divider">
{{-
'products.product.quantity.maximum_of'
| t: quantity: product.selected_or_first_available_variant.quantity_rule.max
-}}
</span>
{%- endif -%}
</div>
</div>
{%- when 'popup' -%}
<modal-opener
class="product-popup-modal__opener no-js-hidden quick-add-hidden"
data-modal="#PopupModal-{{ block.id }}"
{{ block.shopify_attributes }}
>
<button
id="ProductPopup-{{ block.id }}"
class="product-popup-modal__button link"
type="button"
aria-haspopup="dialog"
>
{{ block.settings.text | default: block.settings.page.title }}
</button>
</modal-opener>
<a href="{{ block.settings.page.url }}" class="product-popup-modal__button link no-js">
{{- block.settings.text -}}
</a>
{%- when 'share' -%}
{% assign share_url = product.selected_variant.url | default: product.url | prepend: request.origin %}
{% render 'share-button',
block: block,
share_link: share_url
%}

{%- when 'variant_picker' -%}
{% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{%- when 'buy_buttons' -%}
{%- render 'buy-buttons', block: block, product: product, product_form_id: product_form_id, section_id: section.id, show_pickup_availability: true -%}
{%- when 'rating' -%}
{%- if product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = 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
%}
<div
class="rating"
role="img"
aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product.metafields.reviews.rating.value, rating_max: product.metafields.reviews.rating.value.scale_max }}"
>
<span
aria-hidden="true"
class="rating-star"
style="--rating: {{ product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"
></span>
</div>
<p class="rating-text caption">
<span aria-hidden="true">
{{- product.metafields.reviews.rating.value }} /
{{ product.metafields.reviews.rating.value.scale_max -}}
</span>
</p>
<p class="rating-count caption">
<span aria-hidden="true">({{ product.metafields.reviews.rating_count }})</span>
<span class="visually-hidden">
{{- product.metafields.reviews.rating_count }}
{{ 'accessibility.total_reviews' | t -}}
</span>
</p>
{%- endif -%}
{%- when 'complementary' -%}
<product-recommendations class="complementary-products quick-add-hidden no-js-hidden{% if block.settings.make_collapsible_row %} is-accordion{% endif %}{% if block.settings.enable_quick_add %} complementary-products-contains-quick-add{% endif %}" data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit={{ block.settings.product_list_limit }}&intent=complementary">
{%- if recommendations.performed and recommendations.products_count > 0 -%}
<aside aria-label="{{ 'accessibility.complementary_products' | t }}" {{ block.shopify_attributes }}{% if block.settings.make_collapsible_row %} class="product__accordion accordion"{% endif %}>
<div class="complementary-products__container">
{%- if block.settings.make_collapsible_row -%}
<details id="Details-{{ block.id }}-{{ section.id }}" open>
<summary>
{%- endif %}
<div class="summary__title">
{%- if block.settings.make_collapsible_row -%}
{% render 'icon-accordion', icon: block.settings.icon %}
<h2 class="h4 accordion__title">{{ block.settings.block_heading }}</h2>
{%- else -%}
<h2 class="h3 accordion__title">{{ block.settings.block_heading }}</h2>
{%- endif -%}
</div>
{%- if block.settings.make_collapsible_row -%}
{% render 'icon-caret' %}
</summary>
{%- endif -%}
<slideshow-component class="slider-mobile-gutter">
{%- assign number_of_slides = recommendations.products_count | plus: 0.0 | divided_by: block.settings.products_per_page | ceil -%}
<div id="Slider-{{ block.id }}" class="contains-card contains-card--product complementary-slider grid grid--1-col slider slider--everywhere" role="list"{% if number_of_slides > 1 %} aria-label="{{ 'general.slider.name' | t }}"{% endif %}>
{%- for i in (1..number_of_slides) -%}
<div id="Slide-{{ block.id }}-{{ forloop.index }}" class="complementary-slide complementary-slide--{{ settings.card_style }} grid__item slider__slide slideshow__slide" tabindex="-1" role="group"{% if number_of_slides > 1 %} aria-roledescription="{{ 'sections.slideshow.slide' | t }}" aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"{% endif %}>
<ul class="list-unstyled" role="list">
{%- for product in recommendations.products limit: block.settings.products_per_page offset: continue -%}
<li>
{% render 'card-product',
card_product: product,
media_aspect_ratio: block.settings.image_ratio,
show_secondary_image: false,
lazy_load: false,
show_quick_add: block.settings.enable_quick_add,
section_id: section.id,
horizontal_class: true,
horizontal_quick_add: true
%}
</li>
{%- endfor -%}
</ul>
</div>
{%- endfor -%}
</div>
{%- if number_of_slides > 1 -%}
<div class="slider-buttons no-js-hidden">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}">{% render 'icon-caret' %}</button>
<div class="slider-counter slider-counter--{{ block.settings.pagination_style }}{% if block.settings.pagination_style == 'counter' or block.settings.pagination_style == 'numbers' %} caption{% endif %}">
{%- if block.settings.pagination_style == 'counter' -%}
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ number_of_slides }}</span>
{%- else -%}
<div class="slideshow__control-wrapper">
{%- for i in (1..number_of_slides) -%}
<button class="slider-counter__link slider-counter__link--{{ block.settings.pagination_style }} link" aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}" aria-controls="Slider-{{ block.id }}">
{%- if block.settings.pagination_style == 'numbers' -%}{{ forloop.index }}{% else %}<span class="dot"></span>{%- endif -%}
</button>
{%- endfor -%}
</div>
{%- endif -%}
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}">{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slideshow-component>
{%- if block.settings.make_collapsible_row -%}
</details>
{%- endif -%}
</div>
</aside>
{%- endif -%}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-complementary-products.css' | asset_url | stylesheet_tag }}
{%- if block.settings.enable_quick_add -%}
{{ 'quick-add.css' | asset_url | stylesheet_tag }}
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
</product-recommendations>
{%- when 'icon-with-text' -%}
{% render 'icon-with-text',
block: block
%}
{%- endcase -%}
{%- endfor -%}
<a href="{{ product.url }}" class="link product__view-details animate-arrow">
{{ 'products.product.view_full_details' | t }}
{% render 'icon-arrow' %}
</a>
</product-info>
</div>
{%- if section.settings.media_position == 'right' -%}
{% comment %} Duplicate gallery to display after product content on tablet/desktop breakpoint {% endcomment %}
<div class="grid__item product__media-wrapper small-hide">
{% render 'product-media-gallery', variant_images: variant_images, is_duplicate: true %}
</div>
{%- endif -%}
</div>

{% render 'product-media-modal' variant_images: variant_images %}

{% assign popups = section.blocks | where: 'type', 'popup' %}
{%- for block in popups -%}
<modal-dialog id="PopupModal-{{ block.id }}" class="product-popup-modal" {{ block.shopify_attributes }}>
<div
role="dialog"
aria-label="{{ block.settings.text }}"
aria-modal="true"
class="product-popup-modal__content"
tabindex="-1"
>
<button
id="ModalClose-{{ block.id }}"
type="button"
class="product-popup-modal__toggle"
aria-label="{{ 'accessibility.close' | t }}"
>
{% render 'icon-close' %}
</button>
<div class="product-popup-modal__content-info">
<h1 class="h2">{{ block.settings.page.title }}</h1>
{{ block.settings.page.content }}
</div>
</div>
</modal-dialog>
{%- endfor -%}

{%- if product.media.size > 0 -%}
<script src="{{ 'product-modal.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'media-gallery.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

{%- if first_3d_model -%}
<script type="application/json" id="ProductJSON-{{ product.id }}">
{{ product.media | where: 'media_type', 'model' | json }}
</script>
<script src="{{ 'product-model.js' | asset_url }}" defer></script>
{%- endif -%}

<script>
document.addEventListener('DOMContentLoaded', function () {
function isIE() {
const ua = window.navigator.userAgent;
const msie = ua.indexOf('MSIE ');
const trident = ua.indexOf('Trident/');

return msie > 0 || trident > 0;
}

if (!isIE()) return;
const hiddenInput = document.querySelector('#{{ product_form_id }} input[name="id"]');
const noScriptInputWrapper = document.createElement('div');
const variantSwitcher =
document.querySelector('variant-radios[data-section="{{ section.id }}"]') ||
document.querySelector('variant-selects[data-section="{{ section.id }}"]');
noScriptInputWrapper.innerHTML = document.querySelector(
'.product-form__noscript-wrapper-{{ section.id }}'
).textContent;
variantSwitcher.outerHTML = noScriptInputWrapper.outerHTML;

document.querySelector('#Variants-{{ section.id }}').addEventListener('change', function (event) {
hiddenInput.value = event.currentTarget.value;
});
});
</script>

{%- liquid
if product.selected_or_first_available_variant.featured_media
assign seo_media = product.selected_or_first_available_variant.featured_media
else
assign seo_media = product.featured_media
endif
-%}

<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ request.origin | append: product.url | json }},
{% if seo_media -%}
"image": [
{{ seo_media | image_url: width: 1920 | prepend: "https:" | json }}
],
{%- endif %}
"description": {{ product.description | strip_html | json }},
{% if product.selected_or_first_available_variant.sku != blank -%}
"sku": {{ product.selected_or_first_available_variant.sku | json }},
{%- endif %}
"brand": {
"@type": "Brand",
"name": {{ product.vendor | json }}
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
{%- if variant.barcode.size == 12 -%}
"gtin12": {{ variant.barcode }},
{%- endif -%}
{%- if variant.barcode.size == 13 -%}
"gtin13": {{ variant.barcode }},
{%- endif -%}
{%- if variant.barcode.size == 14 -%}
"gtin14": {{ variant.barcode }},
{%- endif -%}
"availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : {{ variant.price | divided_by: 100.00 | json }},
"priceCurrency" : {{ cart.currency.iso_code | json }},
"url" : {{ request.origin | append: variant.url | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
}
</script>
</section>

{% schema %}
{
"name": "t:sections.main-product.name",
"tag": "section",
"class": "section",
"blocks": [
{
"type": "@app"
},
{
"type": "text",
"name": "t:sections.main-product.blocks.text.name",
"settings": [
{
"type": "inline_richtext",
"id": "text",
"default": "Text block",
"label": "t:sections.main-product.blocks.text.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "t:sections.main-product.blocks.text.settings.text_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.main-product.blocks.text.settings.text_style.options__2.label"
},
{
"value": "uppercase",
"label": "t:sections.main-product.blocks.text.settings.text_style.options__3.label"
}
],
"default": "body",
"label": "t:sections.main-product.blocks.text.settings.text_style.label"
}
]
},
{
"type": "title",
"name": "t:sections.main-product.blocks.title.name",
"limit": 1
},
{
"type": "price",
"name": "t:sections.main-product.blocks.price.name",
"limit": 1
},
{
"type": "sku",
"name": "t:sections.main-product.blocks.sku.name",
"limit": 1,
"settings": [
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "t:sections.main-product.blocks.sku.settings.text_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.main-product.blocks.sku.settings.text_style.options__2.label"
},
{
"value": "uppercase",
"label": "t:sections.main-product.blocks.sku.settings.text_style.options__3.label"
}
],
"default": "body",
"label": "t:sections.main-product.blocks.sku.settings.text_style.label"
}
]
},
{
"type": "inventory",
"name": "t:sections.main-product.blocks.inventory.name",
"limit": 1,
"settings": [
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "t:sections.main-product.blocks.inventory.settings.text_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.main-product.blocks.inventory.settings.text_style.options__2.label"
},
{
"value": "uppercase",
"label": "t:sections.main-product.blocks.inventory.settings.text_style.options__3.label"
}
],
"default": "body",
"label": "t:sections.main-product.blocks.inventory.settings.text_style.label"
},
{
"type": "range",
"id": "inventory_threshold",
"label": "t:sections.main-product.blocks.inventory.settings.inventory_threshold.label",
"min": 0,
"max": 100,
"step": 1,
"info": "t:sections.main-product.blocks.inventory.settings.inventory_threshold.info",
"default": 10
},
{
"type": "checkbox",
"id": "show_inventory_quantity",
"label": "t:sections.main-product.blocks.inventory.settings.show_inventory_quantity.label",
"default": true
}
]
},
{
"type": "quantity_selector",
"name": "t:sections.main-product.blocks.quantity_selector.name",
"limit": 1
},
{
"type": "variant_picker",
"name": "t:sections.main-product.blocks.variant_picker.name",
"limit": 1,
"settings": [
{
"type": "select",
"id": "picker_type",
"options": [
{
"value": "dropdown",
"label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__1.label"
},
{
"value": "button",
"label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__2.label"
}
],
"default": "button",
"label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.label"
}
]
},
{
"type": "buy_buttons",
"name": "t:sections.main-product.blocks.buy_buttons.name",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_dynamic_checkout",
"default": true,
"label": "t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.label",
"info": "t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.info"
},
{
"type": "checkbox",
"id": "show_gift_card_recipient",
"default": false,
"label": "t:sections.main-product.blocks.buy_buttons.settings.show_gift_card_recipient.label",
"info": "t:sections.main-product.blocks.buy_buttons.settings.show_gift_card_recipient.info"
}
]
},
{
"type": "description",
"name": "t:sections.main-product.blocks.description.name",
"limit": 1
},
{
"type": "share",
"name": "t:sections.main-product.blocks.share.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "share_label",
"label": "t:sections.main-product.blocks.share.settings.text.label",
"default": "Share"
},
{
"type": "paragraph",
"content": "t:sections.main-product.blocks.share.settings.featured_image_info.content"
},
{
"type": "paragraph",
"content": "t:sections.main-product.blocks.share.settings.title_info.content"
}
]
},
{
"type": "custom_liquid",
"name": "t:sections.main-product.blocks.custom_liquid.name",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.label",
"info": "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.info"
}
]
},
{
"type": "collapsible_tab",
"name": "t:sections.main-product.blocks.collapsible_tab.name",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Collapsible row",
"info": "t:sections.main-product.blocks.collapsible_tab.settings.heading.info",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.heading.label"
},
{
"type": "select",
"id": "icon",
"options": [
{
"value": "none",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
},
{
"value": "apple",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
},
{
"value": "banana",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label"
},
{
"value": "bottle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__4.label"
},
{
"value": "box",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label"
},
{
"value": "carrot",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__6.label"
},
{
"value": "chat_bubble",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label"
},
{
"value": "check_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label"
},
{
"value": "clipboard",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__9.label"
},
{
"value": "dairy",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__10.label"
},
{
"value": "dairy_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__11.label"
},
{
"value": "dryer",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__12.label"
},
{
"value": "eye",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label"
},
{
"value": "fire",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__14.label"
},
{
"value": "gluten_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__15.label"
},
{
"value": "heart",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label"
},
{
"value": "iron",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__17.label"
},
{
"value": "leaf",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__18.label"
},
{
"value": "leather",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__19.label"
},
{
"value": "lightning_bolt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__20.label"
},
{
"value": "lipstick",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__21.label"
},
{
"value": "lock",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__22.label"
},
{
"value": "map_pin",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__23.label"
},
{
"value": "nut_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__24.label"
},
{
"value": "pants",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__25.label"
},
{
"value": "paw_print",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__26.label"
},
{
"value": "pepper",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__27.label"
},
{
"value": "perfume",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__28.label"
},
{
"value": "plane",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__29.label"
},
{
"value": "plant",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__30.label"
},
{
"value": "price_tag",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__31.label"
},
{
"value": "question_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__32.label"
},
{
"value": "recycle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__33.label"
},
{
"value": "return",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__34.label"
},
{
"value": "ruler",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__35.label"
},
{
"value": "serving_dish",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__36.label"
},
{
"value": "shirt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__37.label"
},
{
"value": "shoe",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__38.label"
},
{
"value": "silhouette",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__39.label"
},
{
"value": "snowflake",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__40.label"
},
{
"value": "star",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__41.label"
},
{
"value": "stopwatch",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__42.label"
},
{
"value": "truck",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__43.label"
},
{
"value": "washing",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__44.label"
}
],
"default": "check_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.label"
},
{
"type": "richtext",
"id": "content",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.content.label"
},
{
"type": "page",
"id": "page",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.page.label"
}
]
},
{
"type": "popup",
"name": "t:sections.main-product.blocks.popup.name",
"settings": [
{
"type": "text",
"id": "text",
"default": "Pop-up link text",
"label": "t:sections.main-product.blocks.popup.settings.link_label.label"
},
{
"id": "page",
"type": "page",
"label": "t:sections.main-product.blocks.popup.settings.page.label"
}
]
},
{
"type": "rating",
"name": "t:sections.main-product.blocks.rating.name",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "t:sections.main-product.blocks.rating.settings.paragraph.content"
}
]
},
{
"type": "complementary",
"name": "t:sections.main-product.blocks.complementary_products.name",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "t:sections.main-product.blocks.complementary_products.settings.paragraph.content"
},
{
"type": "text",
"id": "block_heading",
"default": "Pairs well with",
"label": "t:sections.main-product.blocks.complementary_products.settings.heading.label"
},
{
"type": "checkbox",
"id": "make_collapsible_row",
"default": false,
"label": "t:sections.main-product.blocks.complementary_products.settings.make_collapsible_row.label"
},
{
"type": "select",
"id": "icon",
"options": [
{
"value": "none",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
},
{
"value": "apple",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
},
{
"value": "banana",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label"
},
{
"value": "bottle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__4.label"
},
{
"value": "box",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label"
},
{
"value": "carrot",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__6.label"
},
{
"value": "chat_bubble",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label"
},
{
"value": "check_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label"
},
{
"value": "clipboard",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__9.label"
},
{
"value": "dairy",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__10.label"
},
{
"value": "dairy_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__11.label"
},
{
"value": "dryer",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__12.label"
},
{
"value": "eye",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label"
},
{
"value": "fire",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__14.label"
},
{
"value": "gluten_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__15.label"
},
{
"value": "heart",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label"
},
{
"value": "iron",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__17.label"
},
{
"value": "leaf",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__18.label"
},
{
"value": "leather",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__19.label"
},
{
"value": "lightning_bolt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__20.label"
},
{
"value": "lipstick",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__21.label"
},
{
"value": "lock",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__22.label"
},
{
"value": "map_pin",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__23.label"
},
{
"value": "nut_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__24.label"
},
{
"value": "pants",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__25.label"
},
{
"value": "paw_print",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__26.label"
},
{
"value": "pepper",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__27.label"
},
{
"value": "perfume",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__28.label"
},
{
"value": "plane",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__29.label"
},
{
"value": "plant",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__30.label"
},
{
"value": "price_tag",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__31.label"
},
{
"value": "question_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__32.label"
},
{
"value": "recycle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__33.label"
},
{
"value": "return",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__34.label"
},
{
"value": "ruler",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__35.label"
},
{
"value": "serving_dish",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__36.label"
},
{
"value": "shirt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__37.label"
},
{
"value": "shoe",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__38.label"
},
{
"value": "silhouette",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__39.label"
},
{
"value": "snowflake",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__40.label"
},
{
"value": "star",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__41.label"
},
{
"value": "stopwatch",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__42.label"
},
{
"value": "truck",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__43.label"
},
{
"value": "washing",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__44.label"
}
],
"default": "price_tag",
"info": "t:sections.main-product.blocks.complementary_products.settings.icon.info",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.label"
},
{
"type": "range",
"id": "product_list_limit",
"min": 1,
"max": 10,
"step": 1,
"default": 10,
"label": "t:sections.main-product.blocks.complementary_products.settings.product_list_limit.label"
},
{
"type": "range",
"id": "products_per_page",
"min": 1,
"max": 4,
"step": 1,
"default": 3,
"label": "t:sections.main-product.blocks.complementary_products.settings.products_per_page.label"
},
{
"type": "select",
"id": "pagination_style",
"options": [
{
"value": "dots",
"label": "t:sections.main-product.blocks.complementary_products.settings.pagination_style.options.option_1"
},
{
"value": "counter",
"label": "t:sections.main-product.blocks.complementary_products.settings.pagination_style.options.option_2"
},
{
"value": "numbers",
"label": "t:sections.main-product.blocks.complementary_products.settings.pagination_style.options.option_3"
}
],
"label": "t:sections.main-product.blocks.complementary_products.settings.pagination_style.label",
"default": "counter"
},
{
"type": "header",
"content": "t:sections.main-product.blocks.complementary_products.settings.product_card.heading"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "portrait",
"label": "t:sections.main-product.blocks.complementary_products.settings.image_ratio.options.option_1"
},
{
"value": "square",
"label": "t:sections.main-product.blocks.complementary_products.settings.image_ratio.options.option_2"
}
],
"label": "t:sections.main-product.blocks.complementary_products.settings.image_ratio.label",
"default": "square"
},
{
"type": "checkbox",
"id": "enable_quick_add",
"label": "t:sections.main-product.blocks.complementary_products.settings.enable_quick_add.label",
"default": false
}
]
},
{
"type": "icon-with-text",
"name": "t:sections.main-product.blocks.icon_with_text.name",
"settings": [
{
"type": "select",
"id": "layout",
"options": [
{
"value": "horizontal",
"label": "t:sections.main-product.blocks.icon_with_text.settings.layout.options__1.label"
},
{
"value": "vertical",
"label": "t:sections.main-product.blocks.icon_with_text.settings.layout.options__2.label"
}
],
"default": "horizontal",
"label": "t:sections.main-product.blocks.icon_with_text.settings.layout.label"
},
{
"type": "header",
"content": "t:sections.main-product.blocks.icon_with_text.settings.content.label",
"info": "t:sections.main-product.blocks.icon_with_text.settings.content.info"
},
{
"type": "select",
"id": "icon_1",
"options": [
{
"value": "none",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
},
{
"value": "apple",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
},
{
"value": "banana",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label"
},
{
"value": "bottle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__4.label"
},
{
"value": "box",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label"
},
{
"value": "carrot",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__6.label"
},
{
"value": "chat_bubble",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label"
},
{
"value": "check_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label"
},
{
"value": "clipboard",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__9.label"
},
{
"value": "dairy",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__10.label"
},
{
"value": "dairy_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__11.label"
},
{
"value": "dryer",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__12.label"
},
{
"value": "eye",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label"
},
{
"value": "fire",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__14.label"
},
{
"value": "gluten_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__15.label"
},
{
"value": "heart",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label"
},
{
"value": "iron",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__17.label"
},
{
"value": "leaf",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__18.label"
},
{
"value": "leather",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__19.label"
},
{
"value": "lightning_bolt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__20.label"
},
{
"value": "lipstick",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__21.label"
},
{
"value": "lock",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__22.label"
},
{
"value": "map_pin",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__23.label"
},
{
"value": "nut_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__24.label"
},
{
"value": "pants",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__25.label"
},
{
"value": "paw_print",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__26.label"
},
{
"value": "pepper",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__27.label"
},
{
"value": "perfume",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__28.label"
},
{
"value": "plane",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__29.label"
},
{
"value": "plant",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__30.label"
},
{
"value": "price_tag",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__31.label"
},
{
"value": "question_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__32.label"
},
{
"value": "recycle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__33.label"
},
{
"value": "return",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__34.label"
},
{
"value": "ruler",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__35.label"
},
{
"value": "serving_dish",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__36.label"
},
{
"value": "shirt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__37.label"
},
{
"value": "shoe",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__38.label"
},
{
"value": "silhouette",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__39.label"
},
{
"value": "snowflake",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__40.label"
},
{
"value": "star",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__41.label"
},
{
"value": "stopwatch",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__42.label"
},
{
"value": "truck",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__43.label"
},
{
"value": "washing",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__44.label"
}
],
"default": "heart",
"label": "t:sections.main-product.blocks.icon_with_text.settings.icon_1.label"
},
{
"type": "image_picker",
"id": "image_1",
"label": "t:sections.main-product.blocks.icon_with_text.settings.image_1.label"
},
{
"type": "inline_richtext",
"id": "heading_1",
"default": "Heading",
"label": "t:sections.main-product.blocks.icon_with_text.settings.heading_1.label",
"info": "t:sections.main-product.blocks.icon_with_text.settings.heading.info"
},
{
"type": "select",
"id": "icon_2",
"options": [
{
"value": "none",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
},
{
"value": "apple",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
},
{
"value": "banana",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label"
},
{
"value": "bottle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__4.label"
},
{
"value": "box",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label"
},
{
"value": "carrot",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__6.label"
},
{
"value": "chat_bubble",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label"
},
{
"value": "check_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label"
},
{
"value": "clipboard",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__9.label"
},
{
"value": "dairy",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__10.label"
},
{
"value": "dairy_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__11.label"
},
{
"value": "dryer",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__12.label"
},
{
"value": "eye",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label"
},
{
"value": "fire",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__14.label"
},
{
"value": "gluten_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__15.label"
},
{
"value": "heart",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label"
},
{
"value": "iron",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__17.label"
},
{
"value": "leaf",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__18.label"
},
{
"value": "leather",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__19.label"
},
{
"value": "lightning_bolt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__20.label"
},
{
"value": "lipstick",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__21.label"
},
{
"value": "lock",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__22.label"
},
{
"value": "map_pin",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__23.label"
},
{
"value": "nut_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__24.label"
},
{
"value": "pants",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__25.label"
},
{
"value": "paw_print",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__26.label"
},
{
"value": "pepper",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__27.label"
},
{
"value": "perfume",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__28.label"
},
{
"value": "plane",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__29.label"
},
{
"value": "plant",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__30.label"
},
{
"value": "price_tag",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__31.label"
},
{
"value": "question_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__32.label"
},
{
"value": "recycle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__33.label"
},
{
"value": "return",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__34.label"
},
{
"value": "ruler",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__35.label"
},
{
"value": "serving_dish",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__36.label"
},
{
"value": "shirt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__37.label"
},
{
"value": "shoe",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__38.label"
},
{
"value": "silhouette",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__39.label"
},
{
"value": "snowflake",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__40.label"
},
{
"value": "star",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__41.label"
},
{
"value": "stopwatch",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__42.label"
},
{
"value": "truck",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__43.label"
},
{
"value": "washing",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__44.label"
}
],
"default": "return",
"label": "t:sections.main-product.blocks.icon_with_text.settings.icon_2.label"
},
{
"type": "image_picker",
"id": "image_2",
"label": "t:sections.main-product.blocks.icon_with_text.settings.image_2.label"
},
{
"type": "inline_richtext",
"id": "heading_2",
"default": "Heading",
"label": "t:sections.main-product.blocks.icon_with_text.settings.heading_2.label",
"info": "t:sections.main-product.blocks.icon_with_text.settings.heading.info"
},
{
"type": "select",
"id": "icon_3",
"options": [
{
"value": "none",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
},
{
"value": "apple",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
},
{
"value": "banana",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label"
},
{
"value": "bottle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__4.label"
},
{
"value": "box",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label"
},
{
"value": "carrot",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__6.label"
},
{
"value": "chat_bubble",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label"
},
{
"value": "check_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label"
},
{
"value": "clipboard",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__9.label"
},
{
"value": "dairy",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__10.label"
},
{
"value": "dairy_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__11.label"
},
{
"value": "dryer",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__12.label"
},
{
"value": "eye",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label"
},
{
"value": "fire",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__14.label"
},
{
"value": "gluten_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__15.label"
},
{
"value": "heart",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label"
},
{
"value": "iron",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__17.label"
},
{
"value": "leaf",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__18.label"
},
{
"value": "leather",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__19.label"
},
{
"value": "lightning_bolt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__20.label"
},
{
"value": "lipstick",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__21.label"
},
{
"value": "lock",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__22.label"
},
{
"value": "map_pin",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__23.label"
},
{
"value": "nut_free",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__24.label"
},
{
"value": "pants",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__25.label"
},
{
"value": "paw_print",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__26.label"
},
{
"value": "pepper",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__27.label"
},
{
"value": "perfume",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__28.label"
},
{
"value": "plane",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__29.label"
},
{
"value": "plant",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__30.label"
},
{
"value": "price_tag",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__31.label"
},
{
"value": "question_mark",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__32.label"
},
{
"value": "recycle",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__33.label"
},
{
"value": "return",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__34.label"
},
{
"value": "ruler",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__35.label"
},
{
"value": "serving_dish",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__36.label"
},
{
"value": "shirt",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__37.label"
},
{
"value": "shoe",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__38.label"
},
{
"value": "silhouette",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__39.label"
},
{
"value": "snowflake",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__40.label"
},
{
"value": "star",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__41.label"
},
{
"value": "stopwatch",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__42.label"
},
{
"value": "truck",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__43.label"
},
{
"value": "washing",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__44.label"
}
],
"default": "truck",
"label": "t:sections.main-product.blocks.icon_with_text.settings.icon_3.label"
},
{
"type": "image_picker",
"id": "image_3",
"label": "t:sections.main-product.blocks.icon_with_text.settings.image_3.label"
},
{
"type": "inline_richtext",
"id": "heading_3",
"default": "Heading",
"label": "t:sections.main-product.blocks.icon_with_text.settings.heading_3.label",
"info": "t:sections.main-product.blocks.icon_with_text.settings.heading.info"
}
]
}
],
"settings": [
{
"type": "checkbox",
"id": "enable_sticky_info",
"default": true,
"label": "t:sections.main-product.settings.enable_sticky_info.label"
},
{
"type": "header",
"content": "t:sections.main-product.settings.header.content",
"info": "t:sections.main-product.settings.header.info"
},
{
"type": "select",
"id": "media_size",
"options": [
{
"value": "small",
"label": "t:sections.main-product.settings.media_size.options__1.label"
},
{
"value": "medium",
"label": "t:sections.main-product.settings.media_size.options__2.label"
},
{
"value": "large",
"label": "t:sections.main-product.settings.media_size.options__3.label"
}
],
"default": "large",
"label": "t:sections.main-product.settings.media_size.label",
"info": "t:sections.main-product.settings.media_size.info"
},
{
"type": "checkbox",
"id": "constrain_to_viewport",
"default": true,
"label": "t:sections.main-product.settings.constrain_to_viewport.label"
},
{
"type": "select",
"id": "media_fit",
"options": [
{
"value": "contain",
"label": "t:sections.main-product.settings.media_fit.options__1.label"
},
{
"value": "cover",
"label": "t:sections.main-product.settings.media_fit.options__2.label"
}
],
"default": "contain",
"label": "t:sections.main-product.settings.media_fit.label"
},
{
"type": "select",
"id": "gallery_layout",
"options": [
{
"value": "stacked",
"label": "t:sections.main-product.settings.gallery_layout.options__1.label"
},
{
"value": "columns",
"label": "t:sections.main-product.settings.gallery_layout.options__2.label"
},
{
"value": "thumbnail",
"label": "t:sections.main-product.settings.gallery_layout.options__3.label"
},
{
"value": "thumbnail_slider",
"label": "t:sections.main-product.settings.gallery_layout.options__4.label"
}
],
"default": "stacked",
"label": "t:sections.main-product.settings.gallery_layout.label"
},
{
"type": "select",
"id": "media_position",
"options": [
{
"value": "left",
"label": "t:sections.main-product.settings.media_position.options__1.label"
},
{
"value": "right",
"label": "t:sections.main-product.settings.media_position.options__2.label"
}
],
"default": "left",
"label": "t:sections.main-product.settings.media_position.label",
"info": "t:sections.main-product.settings.media_position.info"
},
{
"type": "select",
"id": "image_zoom",
"options": [
{
"value": "lightbox",
"label": "t:sections.main-product.settings.image_zoom.options__1.label"
},
{
"value": "hover",
"label": "t:sections.main-product.settings.image_zoom.options__2.label"
},
{
"value": "none",
"label": "t:sections.main-product.settings.image_zoom.options__3.label"
}
],
"default": "lightbox",
"label": "t:sections.main-product.settings.image_zoom.label",
"info": "t:sections.main-product.settings.image_zoom.info"
},
{
"type": "select",
"id": "mobile_thumbnails",
"options": [
{
"value": "columns",
"label": "t:sections.main-product.settings.mobile_thumbnails.options__1.label"
},
{
"value": "show",
"label": "t:sections.main-product.settings.mobile_thumbnails.options__2.label"
},
{
"value": "hide",
"label": "t:sections.main-product.settings.mobile_thumbnails.options__3.label"
}
],
"default": "hide",
"label": "t:sections.main-product.settings.mobile_thumbnails.label"
},
{
"type": "checkbox",
"id": "hide_variants",
"default": false,
"label": "t:sections.main-product.settings.hide_variants.label"
},
{
"type": "checkbox",
"id": "enable_video_looping",
"default": false,
"label": "t:sections.main-product.settings.enable_video_looping.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
]
}
{% endschema %}

sweetjay
Tourist
26 0 0

Hey, for some reason I cannot paste the code in here, but just to make sure you want me to copy EVERYTHING the very long list of code under quantity_selector line into buy-buttons.liquid file? Also do I remove the code from main-product.liquid as well or do I keep the code in both files? Thank you in advance!

Dan-From-Ryviu
Shopify Partner
7992 1560 1583

Copy code after {%- when 'quantity_selector' -%} to before {%- when 'popup' -%}, do not paste {%- when 'quantity_selector' -%} into buy-buttons. 

You can remove code in main-product or remove quantity section in product page customize 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

sweetjay
Tourist
26 0 0

Okay, that is done now!

Dan-From-Ryviu
Shopify Partner
7992 1560 1583

Did you save your file? 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

sweetjay
Tourist
26 0 0

Saved it now

sweetjay
Tourist
26 0 0

I added this to buy-buttons.liquid, did I also need to remove this from main-product.liquid when i move it to buy-buttons.liquid?

 

<div
id="Quantity-Form-{{ section.id }}"
class="product-form__input product-form__quantity{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} product-form__quantity-top{% endif %}"
{{ block.shopify_attributes }}
>
{% comment %} TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter {% endcomment %}
{% # theme-check-disable %}
{%- assign cart_qty = cart | item_count_for_variant: product.selected_or_first_available_variant.id -%}
{% # theme-check-enable %}
<label class="quantity__label form__label" for="Quantity-{{ section.id }}">
{{ 'products.product.quantity.label' | t }}
<span class="quantity__rules-cart no-js-hidden{% if cart_qty == 0 %} hidden{% endif %}">
<span class="loading-overlay hidden">
<span class="loading-overlay__spinner">
<svg
aria-hidden="true"
focusable="false"
class="spinner"
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/svg"
>
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</span>
</span>
<span>({{- 'products.product.quantity.in_cart_html' | t: quantity: cart_qty -}})</span>
</span>
</label>
<quantity-input class="quantity">
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">
{{- 'products.product.quantity.decrease' | t: product: product.title | escape -}}
</span>
{% render 'icon-minus' %}
</button>
<input
class="quantity__input"
type="number"
name="quantity"
id="Quantity-{{ section.id }}"
data-cart-quantity="{{ cart_qty }}"
data-min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
{% if product.selected_or_first_available_variant.quantity_rule.max != null %}
data-max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
{% endif %}
step="{{ product.selected_or_first_available_variant.quantity_rule.increment }}"
value="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
form="{{ product_form_id }}"
/>
<button class="quantity__button no-js-hidden" name="plus" type="button">
<span class="visually-hidden">
{{- 'products.product.quantity.increase' | t: product: product.title | escape -}}
</span>
{% render 'icon-plus' %}
</button>
</quantity-input>
<div class="quantity__rules caption no-js-hidden">
{%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%}
<span class="divider">
{{-
'products.product.quantity.multiples_of'
| t: quantity: product.selected_or_first_available_variant.quantity_rule.increment
-}}
</span>
{%- endif -%}
{%- if product.selected_or_first_available_variant.quantity_rule.min > 1 -%}
<span class="divider">
{{-
'products.product.quantity.minimum_of'
| t: quantity: product.selected_or_first_available_variant.quantity_rule.min
-}}
</span>
{%- endif -%}
{%- if product.selected_or_first_available_variant.quantity_rule.max != null -%}
<span class="divider">
{{-
'products.product.quantity.maximum_of'
| t: quantity: product.selected_or_first_available_variant.quantity_rule.max
-}}
</span>
{%- endif -%}
</div>
</div>

Dan-From-Ryviu
Shopify Partner
7992 1560 1583

Please usee this code

<style>
.product-form {
position: relative;
}
.product-form__quantity {
position: absolute;
bottom: 70px;
}
.product-form__buttons {
width: calc(100% - 154px);
float: right;
margin-top: 20px;
}
@media (max-width: 749px) {
.product-form__quantity  {
bottom: 100px !important;
}
}
</style>

 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

sweetjay
Tourist
26 0 0

Where do you want me to add it? Also did i need to remove that code i copied into buy-buttons from main-product. Thank you so much!

Dan-From-Ryviu
Shopify Partner
7992 1560 1583

This is an accepted solution.

Please add that code at very bottom of your buy-buttons liquid file and remove default quantity from your product page customize Screenshot 2024-01-31 at 11.28.45.png

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

sweetjay
Tourist
26 0 0

You are AN ABSOLUTE LIFE SAVER!! Thank you so so much! I appreciate this more than you could know! Thank you once again!

Dan-From-Ryviu
Shopify Partner
7992 1560 1583
Very welcome

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

sweetjay
Tourist
26 0 0

Hey Dan, one more question. I ran into a problem with this. Everything works perfectly on the PC and on certain phones for example Iphone 15 pro the add to cart button and the quantity selector are perfectly placed, but on certain phones the add to cart button changes position and it is very off. I will add a screenshot about the issue, This is how the page looks on an Iphone XS for example: 

sweetjay_2-1707020540704.jpeg

 

This is how it looks on Iphone 15 Pro:

sweetjay_1-1707020362769.jpeg

Is there a way to get the buttons to align on ALL mobile devices as well? As it is working perfectly on every other device, thank you in advance once again!

 

 

sweetjay
Tourist
26 0 0

 

 

 

sweetjay
Tourist
26 0 0

Also on some phones this happens: 

sweetjay_0-1707033077945.png