Skip to content

Instantly share code, notes, and snippets.

@tjmaxwell
tjmaxwell / product.liquid
Created November 28, 2017 01:48
Select product variants by clicking their images
{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.size > 1 %}
<script>
var variantImages = {},
thumbnails,
variant,
variantImage,
optionValue,
@tjmaxwell
tjmaxwell / main-menu-simple.liquid
Created November 28, 2017 01:48
Account icon on mobile view
<a href="#" class="visible-ms visible-xs pull-right navbar-cart" id="wsnavtoggle"><div class="cart-icon"><i class="fa fa-bars"></i></div></a>
<!--Put this code between this icons -->
{% if shop.customer_accounts_enabled %}
<li class="dropdown-grid no-open-arrow visible-ms visible-xs account-icon-mobile">
<a data-toggle="dropdown" href="javascript:;" class="dropdown-toggle navbar-cart" aria-expanded="true"><span class="icons"><i class="fa fa-user"></i></span></a>
<div class="dropdown-grid-wrapper mobile-grid-wrapper">
<div class="dropdown-menu no-padding animated fadeInDown col-xs-12 col-sm-5" role="menu">
{% include 'menu-account' %}
</div>
</div>
@tjmaxwell
tjmaxwell / product-quick-view.liquid
Created November 28, 2017 01:48
Link product options (avoid showing unavailable combinations of options) in quick view
<!--Put this code in the bottom before close "<script>" tag-->
$(document).ready(function() {
Shopify.optionsMapQV[{{ qvp.id }}] = {};
{% if qvp.available and qvp.options.size > 1 %}
Shopify.linkOptionSelectorsQV("{{scope}}",{{ qvp | json }});
{% endif %}
var selector = jQuery('#{{scope}} .single-option-selector:eq(0)');
selector.trigger('change');
{% if qvp.options.size == 1 %}
@tjmaxwell
tjmaxwell / contact-page.liquid
Created November 28, 2017 01:48
For customers that request Captcha. Google ReCaptcha won't work in Shopify for many reason as it has to be server-side submitted and we don't have access to Shopify hosting. So a simple solution is to use a Simple Captcha like this;
<!-- add this right after the textarea html code and before the submit / clear button -->
<!-- Captcha Placement -->
<div class="captcha">
How much is: <input type="text" readonly="readonly" id="question"/>
Answer:* <input type="text" id="answer"/>
</div>
<!-- Captcha Placement -->