Hiya
On my website the default currency sign is $. I needed to change this to £ sign. I have managed to do that by adding the code. However while doing this it has messed up my variants. Now customers cannot select the options, for example colour. Whichever colour they click, only the first option on the list is added to the cart.
If I remove the code for currency then variants start working fine.
I am certain its the last 3 lines of the code, that is causing the problem.
Can someone please help.
I also I wish to use the drop-down option rather than buttons as the variants. please could someone advise how to do this.
Thank you in advance
{% assign breadcrumb_class = 'single-breadcrumb' %}
{% include 'module-breadcrumb-single' %}
<div id="is-content" class="is-content is-product">
<div class="content-area">
<div class="single-product container" itemscope itemtype="http://schema.org/Product">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
<div class="row">
<div class="col-sm-5 single-image">
<div class="image">
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
<img class="product_featured_image" src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg" data-zoom-image="{{ featured_image | img_url: '1024x1024' }}" data-image-id="{{ featured_image.id }}">
</div>
<div class="thumbnails owl-container" id="single_product_thumbnails">
<ul data-dot="false" data-nav="true" data-owl="slide" data-item-slide="5" data-item-slide-mobile="3" class="owl-middle owl-carousel owl-theme">
{% for image in product.images %}
<li>
<a data-image-id="{{ image.id }}" data-image="{{ image.src | img_url: '1024x1024' }}" href="{{ image.src | img_url: '1024x1024' }}" data-zoom-image="{{ image.src | img_url: '1024x1024' }}" href="{{ image.src | img_url: '1024x1024' }}" class="product_thumbnail_image product-single__thumbnail">
<img src="{{ image.src | img_url: '300x300' }}" alt="{{ image.alt | escape }}">
</a>
</li>
{% endfor %}
</ul>
</div>
</div> <!-- End Product Image -->
<div class="col-sm-7 summary entry-summary">
<h1 itemprop="name" class="product_title entry-title">{{ product.title }}</h1>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<p class="price">
{% if product.compare_at_price > product.price %}
<del id="ComparePrice" class="product-single__sale-price">
<span class="amount">{{ product.compare_at_price_max | money }}</span>
</del>
{% endif %}
<ins id="ProductPrice" class="product-single__price">
<span class="amount" itemprop="price">{{ product.price | money }}</span>
</ins>
</p>
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
</div>
<div itemprop="description">
{{ product.description | strip_html | truncatewords: 60 }}
</div>
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
<select name="id" id="productSelect" class="product-single__variants hidden">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}">
{{ variant.title }} - {{ variant.price | money_with_currency }}
</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
{% if product.available and product.variants.size > 1 %}
{% for option in product.options %}
{% include 'module-swatches-template' with option %}
{% endfor %}
{% endif %}
<div class="quantity">
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector input-text qty text">
</div>
<button type="submit" name="add" id="AddToCart" class="button alt single_add_to_cart_button cart_add_to_cart_button">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% assign wishlist_type = "button" %}
{% include "module-wishlist-template" %}
</form>
{% include 'module-social-sharing' %}
</div> <!-- End Product summary -->
</div>
{% include 'product-detail-tabs' %}
{% if settings.product_related_enable %}
{% include 'product-detail-related-products' %}
{% endif %}
</div> <!-- End itemscope Product -->
</div>
</div>
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script type="text/javascript">
var zoomOptions = {
responsize: true,
gallery:'single_product_thumbnails',
galleryActiveClass: 'active',
containLensZoom: true,
zoomType: "{{ settings.module_zoom_type }}",
{% if settings.module_zoom_enable_scroll_zoom %}scrollZoom: true,{% endif %}
{% if settings.module_zoom_enable_tint and settings.module_zoom_type == "window" %}
tint: true,
tintColor: "{{ settings.module_zoom_tint_color }}",
tintOpacity: "{{ settings.module_zoom_tint_opacity }}",
{% endif %}
lensShape: "{{ settings.module_zoom_lens_shape }}",
lensColour: "{{ settings.module_zoom_lens_color }}",
lensOpacity: "{{ settings.module_zoom_lens_opacity }}",
lensBorder: "{{ settings.module_zoom_lens_border_width }}",
zoomWindowWidth: "{{ settings.module_zoom_window_width }}",
zoomWindowHeight: "{{ settings.module_zoom_window_height }}",
borderColour: "{{ settings.module_zoom_window_border_color }}"
};
var mobileZoomType = "{{ settings.module_zoom_type_mobile }}";
var defaultZoomType = "{{ settings.module_zoom_type }}";
var productJson = {{ product | json }}
var productAvailable = {{ product.available }};
// Add label if only one product option and it isn't 'Title'. Could be 'Size'.
var productOptionsSize = {{ product.options.size }};
var productOptionsTitle = "{{ product.options.first | escape }}";
// Hide selectors if we only have 1 variant and its title contains 'Default'.
var variantSize = {{ product.variants.size }};
var variantTitle = "{{ product.variants.first.title }}";
<script src="//foursixty.com/media/scripts/fs.embed.v2.js" data-feed-id="yourfoursixtyid" data-money-format="£<%= amount %>" data-product-images="false">
</script>