Shopify themes, liquid, logos, and UX
Hi,
I am trying to create a quick order form that will be visible on the customer account page for specific wholesale customers. These are my issues:
1. The Quantity selector does not work, the add to cart button always adds just one of each product. 😞
2. The ATC opens the cart page on click instead of the pop out cart that is default for this store.
Any advise?
Thanks!
Elin
{% if customer.metafields.custom.vat_number %}
<div class="page-width">
<form action="/cart/add" method="post">
{% assign collection_handle = 'ws' %}
{% assign collection = collections[collection_handle] %}
{% assign customer = customer %}
<table cellspacing="0" cellpadding="0" border="1">
<tbody>
{% for product in collection.products %}
<tr>
<td colspan="6">
<a href="{{ product.url }}" title="View {{ product.title | escape }} Page">
{{ product.title }}
</a>
</td>
</tr>
<tr id="cart-headlines">
<td class="cart-thumb"> </td>
<td class="cart-variant">Variant Title</td>
<td class="cart-unitprice">RRP</td>
<td class="cart-calculated">Net Price</td>
<td class="cart-quantity">Quantity</td>
<td class="cart-add-to-cart"> </td>
</tr>
{% for variant in product.variants %}
<tr>
<td>
<a href="{{ product.url }}" title="View Page">
<img src="{{ variant.featured_image | product_img_url: 'thumb' }}" alt="{{ product.title | escape }}" />
</a>
</td>
<td>
{{ variant.title }}
</td>
<td>
{{ variant.price | money }}
</td>
<td>
{% assign wsdcv = customer.metafields.custom.wsdcv %}
{% if wsdcv %}
{{ variant.price | divided_by: wsdcv | money }}
{% else %}
N/A
{% endif %}
</td>
<td>
<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_{{ variant.id }}"
id="Quantity-{{ section.id }}-{{ variant.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>
</td>
<td>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}" />
<input type="hidden" name="quantity" value="{{ product.selected_or_first_available_variant.quantity_rule.min }}" />
<button type="submit" class="btn">Add to Cart</button>
</form>
</td>
</tr>
{% endfor %}
{% endfor %}
</tbody>
</table>
<input type="hidden" name="quantity" value="{{ product.selected_or_first_available_variant.quantity_rule.min }}" />
</form>
</div>
{% endif %}
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025