Am building for the first my time online store and saw the below guide on how to add swatches to a product item, my theme is Atlantic (Pixel), the theme used in the guide is Standard (also by Pixel), so the programming text was a little different, seemed though to have managed to add the swatches and when the inventory is 0, the swatches appears with an X. The problem is though, is that now when you view a product - while the swatches show, the "add to cart" button and quantity option are now missing, Also if you click onto a swatch - it stays always showing the first one's availability - for example in the boatneck - foggy grey - has no s/m size in stock, but storm blue ,I have a lot of stock, but this still shows as no s/m. Think the swatches are not moving correctly
Below is the site with the step by step process I thought I had followed.
http://docs.shopify.com/manual/configuration/store-customization/add-color-swatches-to-your-products
my site is oliviagrahamcashmere.com
If you know what to do, please get in contact with me on oliviagrahamcashmere@hotmail.com
Below is the text to my product page:
<section class="content content-area">
<div class="mobile-product-title">
<p class="brand">{{ product.vendor }}</p>
<p class="title">{{ product.title }}</p>
{% if product.compare_at_price_min > product.price_min %}
<p class="price sale"><span class="original">{{ product.compare_at_price_min | money }}</span> {{ product.price_min | money }}</p>
{% else %}
<p class="price">{{ product.price_min | money }}</p>
{% endif %}
<div class="share-buttons">
<div class="share-wrap twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-text="{{ shop.name }} | {{ product.title }}:" data-via="{{ settings.twitter-username }}">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div><div class="share-wrap google">
<div class="g-plusone" data-size="medium" data-annotation="none"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div><div class="share-wrap pinterest">
<a href="//pinterest.com/pin/create/button/?url={{ shop.url }}{{ product.url }}&media={{ product.featured_image | product_img_url: 'original' }}&description={{ product.title | escape }}" data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
</div><div class="share-wrap facebook">
<div class="fb-like" data-href="{{ shop.url }}{{ product.url }}" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"></div>
</div>
</div>
</div>
<section id="product-area" class="clearfix">
<div class="showcase {% if product.images.size == 1 %}wide{% endif %}">
<div class="container">
<div class="wrap">
<img src="{{ product.featured_image | product_img_url: 'original' }}">
{% if settings.product-image-borders %}<span class="overlay"></span>{% endif %}
</div>
</div>
{% if settings.display-fullsize-product-viewer %}
<div class="notes">
<a href="#" class="toggle-fullview"><span class="icon">l</span>View fullsize image</a>
</div>
{% endif %}
{% if settings.display-product-email-link %}
<div class="notes">
<a href="mailto:{{ shop.email }}?Subject={{ product.title | escape }}" class="email-us"><span class="icon">j</span>Email us about this product</a>
</div>
{% endif %}
{% if settings.enable-fitting-guide %}
<div class="notes">
<a href="/pages/{{ settings.fitting-guide-link }}" class="fitting-guide"><span class="icon">{{ settings.fitting-guide-icon }}</span>{{ settings.fitting-guide-label }}</a>
</div>
{% endif %}
</div>
{% if product.images.size > 1 %}
<div class="pager">
<div class="inner">
{% for image in product.images %}
<div class="wrap thumb {% include 'for-looper' %} {% if forloop.first %}active{% endif %}">
<img src="{{ image.src | product_img_url: 'small' }}" data-high-res-url="{{ image.src | product_img_url: 'original' }}">
<span class="overlay"></span>
</div>
{% endfor %}
</div>
</div>
{% endif %}
<div class="details {% if product.images.size > 1 %}border{% endif %} {% if product.variants.size == 1 and settings.display-product-quantity-option == false %}no-options{% endif %}">
<div class="module header">
<p class="brand">{{ product.vendor }}</p>
<p class="title">{{ product.title }}</p>
{% if product.compare_at_price_min > product.price_min %}
<p class="price sale"><span class="original">{{ product.compare_at_price_min | money }}</span> {{ product.price_min | money }}</p>
{% else %}
<p class="price">{{ product.price_min | money }}</p>
{% endif %}
</div>
<div class="module share-buttons">
<div class="share-wrap twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-text="{{ shop.name }} | {{ product.title }}:" data-via="{{ settings.twitter-username }}">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div><div class="share-wrap google">
<div class="g-plusone" data-size="medium" data-annotation="none"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div><div class="share-wrap pinterest">
<a href="//pinterest.com/pin/create/button/?url={{ shop.url }}{{ product.url }}&media={{ product.featured_image | product_img_url: 'original' }}&description={{ product.title | escape }}" data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
</div><div class="share-wrap facebook">
<div class="fb-like" data-href="{{ shop.url }}{{ product.url }}" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"></div>
</div>
</div>
<div class="module options {% unless product.available %}unavailable{% endunless %}">
<div id="swatches">{% include 'swatches' %}</div>
{% if product.available %} <!-- If the product is available then... -->
<form action="/cart/add" method="post">
{% if product.variants.size > 1 %} <!-- Create a variants dropdown IF the product has more than one variant -->
<select name="id" id="product-select" class="product-select">
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
<script>
$(function(){
new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallbackQuickShop });
{% if product.available %}
{% assign found_one_in_stock = false %}
{% for variant in product.variants %}
{% if variant.available and found_one_in_stock == false %}
{% assign found_one_in_stock = true %}
{% for option in product.options %}
$('#product-select-option-' + {{ forloop.index0 }}).val({{ variant.options[forloop.index0] | json }}).trigger('change');
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}
});
</script>
{% else %} <!-- If the product only has one variant, create a hidden input with the variant id. NOTE: Necessary for "add to cart" to work -->
{% for variant in product.variants %}
<input type="hidden" name="id" class="product-select" value="{{ variant.id }}" data-variant-title="{{ variant.title }}" />
{% endfor %}
{% endif %}
{% if settings.display-product-quantity-option %}
<div class="selector-wrapper quantity">
<label>Quantity</label>
<input type="text" class="product-quantity field" name="quantity" value="1">
</div>
{% else %}
<input type="hidden" name="quantity" value="1">
{% endif %}
<div class="selector-wrapper submit-wrapper">
{% if product.options.size > 1 %}<label></label>{% endif %}<input type="submit" class="action-button submit" value="Add to cart">
</div>
</form>
{% else %}
<span class="action-button unavailable disabled">Sold out</span>
{% endif %}
</div>
{% if product.description.size > 0 %}
<div class="module description">
<div class="rte">{{ product.description }}</div>
</div>
{% endif %}
</div>
</section>
{% if settings.display-related-products %}
{% assign number_of_related_products_to_show = 4 %}
{% assign image_size = 'medium' %}
{% assign heading = settings.related-products-title %}
{% capture number_of_related_products_to_fetch %}{{ number_of_related_products_to_show | plus: 1 }}{% endcapture %}
{% if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %}
{% assign found_a_collection = false %}
{% for c in product.collections %}
{% if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' %}
{% assign found_a_collection = true %}
{% assign collection = c %}
{% endif %}
{% endfor %}
{% endif %}
{% if collection.products.size > 1 %}
<section class="related-products">
<h1 class="section-title section-border">{{ heading }}</h1>
<ul class="product-list">
{% assign current_product_found = false %}
{% for prod in collection.products limit: number_of_related_products_to_fetch %}{% if prod.title == product.title %}{% assign current_product_found = true %}{% else %}{% unless current_product_found == false and forloop.last %}{% include 'product-item' %}{% endunless %}{% endif %}{% endfor %}
</ul>
</section>
{% endif %}
{% endif %}
</section>
{% if settings.display-fullsize-product-viewer %}
<section class="fullscreen-product-viewer">
<div class="modal">
<div class="modal-wrap">
<span class="close">v</span>
<div class="showcase {% if product.images.size == 1 %}wide{% endif %}">
<div class="container">
<div class="wrap">
<img src="{{ product.featured_image | product_img_url: 'original' }}">
<span class="overlay"></span>
</div>
</div>
</div>
{% if product.images.size > 1 %}
<div class="pager antiscroll-wrap">
<div class="antiscroll-inner">
{% for image in product.images %}
<div class="wrap thumb {% include 'for-looper' %} {% if forloop.first %}active{% endif %}">
<img src="{{ image.src | product_img_url: 'small' }}" data-high-res-url="{{ image.src | product_img_url: 'original' }}">
<span class="overlay"></span>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
</section>
{% endif %}