<form method="post" action="/cart/add" class="col-button"> <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> <input min="1" type="hidden" id="quantity" name="quantity" value="1"/> <input type="submit" value="Add to cart" class="btn add-to__cart" /> </form> .col-button .btn.add-to__cart { padding: 8px 10px; font-size: 14px; text-transform: capitalize; letter-spacing: 1px; margin-left:10px; /* margin-right:10px; */ /* margin-top: 15px; */ } [data-type_product_capitalize="true"] .grid-product__title { min-height:50px; } @media only screen and (max-width:480px){ [data-type_product_capitalize="true"] .grid-product__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } <form method="post" action="/cart/add" class="col-button"> <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> <input min="1" type="hidden" id="quantity" name="quantity" value="1"/> <input type="submit" value="{% if product.variants.first.available%}Add to cart{% else %}Sold Out{% endif%}" class="btn add-to__cart"" {% unless product.variants.first.available %}disabled{% endunless %} /> </form>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter