Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I have wokiee theme and I want to add Unit pricing as it is available in my country but my theme don't have code can anybody help me to solve that here is my file code along with javascript
{%- assign image_max_width = item.image_max_width | append: 'x' -%}
{%- assign image_max_width_retina = item.image_max_width | times: 2 | append: 'x' -%}
{%- assign image_max_width_m = item.image_max_width_m | append: 'x' -%}
{%- assign image_max_width_retina_m = item.image_max_width_m | times: 2 | append: 'x' -%}
{%- capture badge_icons -%}
{%- if product_meta.icon_new != 'disable' and item.show_badge_new -%}{%- if date_difference < date_limit or product_meta.icon_new == 'always' -%}<div class="tt-label-new">{{ 'products.general.new' | t }}</div>{%- endif -%}{%- endif -%}
{%- unless product.available -%}<div class="tt-label-out-stock">{{ 'products.general.unavailable' | t }}</div>{%- endunless -%}
{%- if product_meta.featured != blank and item.show_badge_featured -%}<div class="tt-label tt-label-our-fatured">{{ product_meta.featured }}</div>{%- endif -%}
{%- endcapture -%}
{%- assign badge_icons = badge_icons | strip -%}
{%- assign pid = product.id | append:"" -%}
{%- assign wl = customer.metafields.wishlist -%}
{%- unless wl == blank -%}
{%- if wl[pid] == blank -%}
{%- assign wl_text = false -%}
{%- else -%}
{%- assign wl_text = true -%}
{%- endif -%}
{%- else -%}
{%- assign wl_text = false -%}
{%- endunless -%}
<div class="tt-product-single-info{% if item.stickygallery %} stickprcolheight-js{% endif %}">
{%- if badge_icons != '' -%}
<div class="tt-wrapper">
<div class="tt-label">
{{ badge_icons }}
</div>
</div>
{%- endif -%}
{%- if item.show_product_main_info -%}
<div class="tt-add-info">
<ul>
{%- if item.show_sku -%}
<li class="sku-js{% if product.selected_or_first_available_variant.sku == '' %} hide{% endif %}"><span>{{ 'products.product.sku' | t }}</span> <span>{{ product.selected_or_first_available_variant.sku }}</span></li>
{%- endif -%}
{%- if item.show_qiantity -%}
<li class="availability">
<span>{{ 'products.product.availability' | t }}</span>
{% if product.available %}
<span class="stock_quantity hide"></span> <span class="in_stock hide">{{ 'products.product.in_stock' | t }}</span> <span class="many_in_stock hide">{{ 'products.product.many_in_stock' | t }}</span> <span class="sold_out hide">{{ "products.product.sold_out" | t }}</span> <span class="continue_out hide">{{ "products.product.purchase_when_out_of_stock" | t }}</span>
{% else %}
<span class="sold_out">{{ "products.product.sold_out" | t }}</span>
{% endif %}
</li>
{%- endif -%}
</ul>
</div>
{%- endif -%}
<h1 class="tt-title">{{ product.title }}</h1>
{%- unless settings.catalogue_mode -%}
<div class="tt-price">
</div>
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
{%- if item.show_tax_text -%}
<div class="tt-product-policies" data-product-policies>
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}
{%- endif -%}
{%- if item.show_review -%}
<div class="tt-review">
<div class="rating" data-tooltip="{{ 'general.tooltip_texts.view_review' | t }}"{%- if settings.selectedreviewaapp == 'alireviewapp' -%} data-ali="shopify-ali-review-widget"{%- endif -%}>
{%- if settings.selectedreviewaapp == 'alireviewapp' -%}
<div product-id="{{ product.id }}" class="alr-display-review-badge"></div>
{%- else %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{%- endif -%}
</div>
</div>
{%- endif -%}
{%- endunless -%}
{%- unless product_meta.custom_html == blank -%}
<div class="tt-wrapper">
{{ product_meta.custom_html }}
</div>
{%- endunless -%}
{%- unless settings.catalogue_mode -%}
{%- unless product_meta.countdown == blank -%}
<div class="tt-wrapper">
<div class="tt-countdown_box_02 tt-type-02">
<div class="tt-countdown_inner">
<div class="tt-countdown" data-date="{{ product_meta.countdown }}">
</div>
</div>
</div>
</div>
{%- endunless -%}
{%- endunless -%}
<div class="tt-swatches-container tt-swatches-container-js"></div>
{%- assign m_sizechart = product_meta.sizechart -%}
{%- capture sizechart -%}{% if m_sizechart != blank %}{{ m_sizechart }}{% else %}{{ item.popupcontent }}{% endif %}{%- endcapture -%}
{%- assign m_shipping = product_meta.shipping -%}
{%- capture shipping -%}{% if m_shipping != blank %}{{ m_shipping }}{% else %}{{ item.popupcontentshipping }}{% endif %}{%- endcapture -%}
{%- if item.show_sizechart and sizechart != '' and sizechart != 'disable' -%}{% assign sch_a = true %}{%- else -%}{% assign sch_a = false %}{% endif -%}
{%- if item.show_shipping and shipping != '' and shipping != 'disable' -%}{% assign shch_a = true %}{%- else -%}{% assign shch_a = false %}{% endif -%}
{%- if item.show_message -%}{% assign schm_a = true %}{%- else -%}{% assign schm_a = false %}{% endif -%}
{% if sch_a or shch_a or schm_a %}
<div class="tt-wrapper product-information-buttons">
{%- if sch_a -%}
<a data-toggle="modal" data-target="#modalProductInfo" href="#">{{ item.btnname }}</a>
{%- endif -%}
{%- if shch_a -%}
<a data-toggle="modal" data-target="#modalProductInfo-02" href="#">{{ item.btnname2 }}</a>
{%- endif -%}
{%- if schm_a -%}
<a data-toggle="modal" data-target="#modalProductInfo-03" href="#" class="mespr">{{ item.btnname3 }}</a>
{%- endif -%}
</div>
{%- endif -%}
{%- unless settings.catalogue_mode -%}
{%- if product.available -%}
{%- capture product_select_options -%}{%- if product.selected_variant == blank and product.variants.size > 1 and item.use_select_button -%}true{%- else -%}false{%- endif -%}{%- endcapture -%}
<div class="tt-wrapper{% if product_select_options == 'true' %} select_options{% endif %}">
{%- form 'product', product -%}
<input type="hidden" class="input_variant" name="id" value="{{ product.selected_or_first_available_variant.id }}">
<div class="tt-row-custom-01">
<div class="col-item">
<div class="tt-input-counter style-01">
<span class="minus-btn"></span>
<input type="text" name="quantity" value="1" size="5">
<span class="plus-btn"></span>
</div>
</div>
<div class="col-item">
<button class="btn btn-lg btn-addtocart{% if settings.ajax_addtocart %} addtocart-js{% endif %}{% if product_select_options == 'false' and product.selected_variant.available == false %} disable{% endif %}"
{%- if settings.show_addtocart_popup_related -%}{%- unless product.metafields.description.related_collection == blank -%}data-relatedcollection="{{ product.metafields.description.related_collection }}"{%- endunless -%}{%- endif -%}
>
{% if product_select_options == 'true' %}{{ 'products.general.select_options_html' | t }}
{% else %}
{% if product.selected_variant.available == false %}{{ "products.general.unavailable_html" | t }}
{% else %}
{% if product.selected_or_first_available_variant.inventory_management == 'shopify' and product.selected_or_first_available_variant.inventory_policy == 'continue' and product.selected_or_first_available_variant.inventory_quantity <= 0 %}
{{ "products.general.preorder_html" | t }}
{% else %}
{{ "products.general.add_to_cart_html" | t }}
{% endif %}
{% endif %}{% endif %}
</button>
</div>
</div>
{%- if settings.buy_in_one_click -%}
{% if settings.terms_cond_checkbox_show %}
<div class="checkbox-group prpage-term-conditions-checkbox term-conditions-checkbox-js">
<input type="checkbox" id="prpage-cart-term-conditions-checkbox" value="1">
<label for="prpage-cart-term-conditions-checkbox">
<span class="check"></span>
<span class="box"></span>
{{ settings.terms_cond_checkbox_text }}
</label>
</div>
{% endif %}
<div class="buyinoneclick{% if product_select_options == 'true' %} hide{% endif %}"
data-buttonname="{{ 'products.general.buy_now_button' | t }}"
data-loading="{{ 'products.general.loading' | t }}">
{{ form | payment_button }}
</div>
{%- endif -%}
{%- endform -%}
{%- if item.product_item_show_wishlist and settings.show_wishlist or item.product_item_show_compare and settings.show_compare -%}
<div class="tt-wrapper">
<ul class="tt-list-btn">
{%- if item.product_item_show_wishlist and settings.show_wishlist -%}
<li><a href="{{ product.url | within: collection }}"
data-productid="{{ product.id }}"
data-producth="{{ product.handle }}"
data-add="{{ "wishlist.buttons_text.tooltip_add" | t }}"
data-remove="{{ "wishlist.buttons_text.tooltip_remove" | t }}"
data-tooltip="{% if customer.id == blank %}{{ "wishlist.buttons_text.tooltip_login" | t }}{% else %}{% if wl_text %}{{ "wishlist.buttons_text.tooltip_remove" | t }}{% else %}{{ "wishlist.buttons_text.tooltip_add" | t }}{% endif %}{% endif %}"
data-type="wishlist"
data-prpage-add="{{ "wishlist.buttons_text.page_text_add" | t }}"
data-prpage-rem="{{ "wishlist.buttons_text.page_text_remove" | t }}"
data-action="{% if wl_text %}wk-remove{% else %}wk-add{% endif %}"
class="inline-wk-link wlbutton-js prpagebtn-js">{% include "svg-heart" %}<span>{% if wl_text %}{{ "wishlist.buttons_text.page_text_remove" | t }}{% else %}{{ "wishlist.buttons_text.page_text_add" | t }}{% endif %}</span></a>
</li>
{%- endif -%}
{%- if item.product_item_show_compare and settings.show_compare -%}
<li><a href="{{ product.url | within: collection }}"
data-action="wk-add"
data-add="{{ "compare.buttons_text.tooltip_add" | t }}"
data-remove="{{ "compare.buttons_text.tooltip_remove" | t }}"
data-tooltip="{{ "compare.buttons_text.tooltip_add" | t }}"
data-compareid="{{ pr_variant.id }}"
data-prpage-add="{{ "compare.buttons_text.page_text_add" | t }}"
data-prpage-rem="{{ "compare.buttons_text.page_text_remove" | t }}"
class="inline-wk-link compare-js prpagebtn-js"
>{% include "svg-compare" %}<span>{{ "compare.buttons_text.page_text_add" | t }}</span></a>
</li>
{%- endif -%}
</ul>
</div>
{%- endif -%}
</div>
{%- endif -%}
{%- endunless -%}
{%- if item.show_trust_badge and item.page_design != "product_page_3_design" -%}{%- if item.image_l != blank -%}
<div class="tt-wrapper">
<div class="tt-promo-brand">
<img data-srcset="{{ item.image_l | img_url: image_max_width }} 1x, {{ item.image_l | img_url: image_max_width_retina }} 2x" alt="{{ item.image_l.alt }}" class="tt-hidden-mobile lazyload">
<img data-srcset="{{ item.image_lm | img_url: image_max_width_m }}" srcset="{{ item.image_lm | img_url: image_max_width_m }} 1x, {{ item.image_lm | img_url: image_max_width_retina_m }} 2x" alt="{{ item.image_lm.alt }}" class="tt-hidden-desctope lazyload">
</div>
</div>
{%- endif -%}{%- endif -%}
{%- if item.show_product_info -%}
<div class="tt-wrapper">
<div class="tt-add-info">
<ul>
{%- if item.show_product_vendor -%}<li><span>{{ "products.product.vendor" | t }}</span> <a href="/collections/{% if collection == blank %}all{% else %}{{ collection.handle }}{% endif %}?filter.p.vendor={{ product.vendor | downcase | excape | replace: ' ','+' }}">{{ product.vendor }}</a></li>{%- endif -%}
{%- if item.show_product_type and product.type != '' -%}<li><span>{{ "products.product.type" | t }}</span> <a href="/collections/{% if collection == blank %}all{% else %}{{ collection.handle }}{% endif %}?filter.p.product_type={{ product.type | downcase | excape | replace: ' ','+' }}">{{ product.type }}</a></li>{%- endif -%}
{%- if item.show_product_barcode -%}<li{% if product.selected_or_first_available_variant.barcode == '' or product.selected_or_first_available_variant.barcode == empty? %} class="hide"{% endif %}><span>{{ "products.product.barcode" | t }}</span> <span class="barcode">{{ product.selected_or_first_available_variant.barcode }}</span></li>{%- endif -%}
{%- if item.show_product_tags -%}
{%- assign collection = collections.all -%}
{%- assign custom_url = '/collections/all/' -%}
{%- capture ppt -%}{%- include 'product_page_tags' -%}{%- endcapture -%}{%- if ppt != '' and ppt != '!' -%}
<li><span>{{ "products.product.tags" | t }}</span> {{ ppt | replace: ', !' }}</li>
{%- endif -%}{%- endif -%}
</ul>
</div>
</div>
{%- endif -%}
{% if item.full_width_description == "default" %}{% include "product_page_tabs" %}{% endif %}
</div>
{%- if settings.first_variant_column_is_image -%}{%- capture piffc_src -%}{%- include 'get_product_images_from_first_column' -%}{%- endcapture -%}{%- endif -%}
<script>
function product_page_1_description_handler(){
changeBuyNowName();
elevateZoomWidget.init();
Shopify.getProduct('{{ product.handle }}', productPageJsonLoaded);
ttCollapseBlock($('.tt-collapse-block'));
}
function ttCollapseBlock($this){
if(!$this.length) return false;
$this.each( function () {
var obj = $(this),
objOpen = obj.find('.tt-item.active'),
objItemTitle = obj.find('.tt-item .tt-collapse-title');
Shopify.designMode ? objOpen.find('.tt-collapse-content').show(): objOpen.find('.tt-collapse-content').slideToggle(200);
objItemTitle.unbind().on('click', function () {
$(this).next().slideToggle(200).parent().toggleClass('active');
});
});
};
var firstload = true;
/* Swatches */
function productPageJsonLoaded(json_data) {
var str = '{{ piffc_src | replace: "'", "\\'" }}';
var sw_history = Boolean({{ item.history }});
var show_unavailable_options = $('.show_unavailable_variants').length > 0;
var cur_opt = str != '' ? JSON.parse(str) : '';
var full_opt = cur_opt != '' ? $.extend( texture_obj, cur_opt ) : texture_obj;
_selectedByDefault = {% if item.use_select_button %}!(location.search == ''){% else %}true{% endif %};
var group1 = new SwatchesConstructor(json_data, {firstavailablevariantid:'{{ product.selected_or_first_available_variant.id }}', contentParent: '.tt-swatches-container-js', enableHistoryState: sw_history, callback: productPageVariant, externalImagesObject: full_opt, externalColors: colors_value, colorWithBorder: color_with_border, productHandle:'{{ product.handle }}', designOption1:'{{ item.designoption1 }}', designOption2:'{{ item.designoption2 }}', designOption3:'{{ item.designoption3 }}', selectedByDefault: _selectedByDefault, show_unavailable_options: show_unavailable_options });
$('body').on('change', '.tt-fixed-product-wrapper select', function(e){
group1.initSwatches($(this).val());
sw_history && history.pushState(null, null, location.pathname+'?variant='+$(this).val());
$('[name="id"]').val($(this).val());
$('.tt-fixed-product-wrapper').find('.btn').replaceWith($('.btn-addtocart').first().clone().removeClass('btn-lg btn-addtocart addtocart-js'));
})
json_data = null;
};
function productPageVariant(variant, product){
var _parent = $('.tt-product-single-info');
var _swatch = _parent.find('.tt-swatches-container-js');
swatchVariantHandler(_parent, variant);
var sc = $('.tt-swatches-container');
if(firstload == true && location.search == '' && $('.select_options').length && !sc.find('.active').length && _swatch.children().length){
firstload = false;
return false;
}
if(_parent.find('.select_options').length){
_parent.find('.select_options').removeClass('select_options');
$(window).trigger('resize');
}
swatchVariantButtonHandler(_parent, variant);
var g = $('#smallGallery');
var filter = '.filter'+variant.options[0].split(' ').join('_');
if($('.four-images-js').length == 0 && $('.product-images-static').length == 0 && g.hasClass('withfiltres') && g.attr('data-cur') != filter){
g.attr('data-cur', filter);
g.slick('slickUnfilter').slick('slickFilter',filter);
}
var img_id = variant.featured_media ? variant.featured_media.id : 'none';
var target = img_id == 'none' ? $("[data-slick-index=0]").children() : $("[data-target="+img_id+"]");
var num = target.last().parent().attr('data-slick-index');
var $container = $("#smallGallery");
$('.four-images-js').length == 0 && $('.product-images-static').length == 0 && setDefaultSlider(variant, num, $container, target);
$container = $('.slider-scroll-product');
setScrollSlider(num, $container);
g = $('.tt-mobile-product-slider');
if(num && g.length && g.hasClass('slick-initialized')) {
var filter = '.filter'+variant.options[0].split(' ').join('_');
if(g.hasClass('withfiltres') && g.attr('data-cur') != filter){
g.attr('data-cur', filter);
g.slick('slickUnfilter').slick('slickFilter',filter);
g.find('li.slick-active').removeClass('slick-active');
g.find('li.slick-current').addClass('slick-active').find('a').addClass('zoomGalleryActive');
}
g.slick('slickGoTo', num, true);
}
addToCartHandler.initFormAddToCartButton(variant.id, _parent, _swatch);
$('.four-images-js').length && setFourSlider($('.four-images-js'), product, variant);
var buyinoneclick = _parent.find(".buyinoneclick");
buyinoneclick.length && buyinoneclick.removeClass("hide");
if(_parent.find('.compare-js').length){
_parent.find('.compare-js').attr('data-compareid', variant.id);
$(window).trigger( "compareevent" );
}
var tfpw = $('.tt-fixed-product-wrapper');
if(tfpw.length){
if(variant.featured_media){
tfpw.find('img').attr('src', Shopify.resizeImage(variant.featured_media.src, 'x80'));
}
var s = tfpw.find('select');
s.val(variant.id);
variant.available ? s.removeClass('disabled') : s.addClass('disabled');
var v = $('.tt-product-single-info').find('.tt-input-counter').first().clone();
tfpw.find('.tt-input-counter').replaceWith(v);
}
}
function setDefaultSlider(variant, num, $container, target){
$container.length && variant.featured_image && getMediaGalleryItem(target);
if(num && $container.length && target.attr('data-image')){
var it = target.attr('data-image').split('?').shift();
var it2 = $(".zoom-product").attr('src').split('?').shift();
if(it == it2){
$container.slick('slickGoTo', num, true);
$container.find('.zoomGalleryActive').removeClass('zoomGalleryActive');
target.addClass('zoomGalleryActive');
!elevateZoomWidget.checkNoZoom() && elevateZoomWidget.configureZoomImage();
return false;
}
}
else{
if(variant.featured_image){
var it = variant.featured_image.src.split('?').shift();
var it2 = $(".zoom-product").attr('src').split('?').shift();
if(it == it2) return false;
}
}
if(num && $container.length && target.attr('data-item-type')){
if(variant.featured_image){
$container.slick('slickGoTo', num, true);
$container.find('.zoomGalleryActive').removeClass('zoomGalleryActive');
target.addClass('zoomGalleryActive');
$(".zoom-product").attr('src', target.attr('data-image')).attr('data-zoom-image', target.attr('data-zoom-image'));
}
}
else{
//$('#smallGallery')
if(variant.featured_image){
$('.mediaimageholder').length && $('.mediaimageholder').show();
$('.mediaholder').length && $('.mediaholder').hide();
$(".zoom-product").attr('src', variant.featured_image.src).attr('data-zoom-image', variant.featured_image.src);
}
else{
if($('[featuredmedia]').length && $container.length == 0){
$('.mediaimageholder').length && $('.mediaimageholder').hide();
$('.mediaholder').length && $('.mediaholder').show();
$(".zoom-product").attr('src', '{{ 'dummy.png' | asset_url }}');
}
}
}
!elevateZoomWidget.checkNoZoom() && elevateZoomWidget.configureZoomImage();
}
function setFourSlider($container, product, variant){
if(product.images.length < 4 || variant.featured_image == null) return false;
var c_img = variant.featured_image.src.replace(/https:/g, '');
var img_a = String(c_img+product.images.join(',').split(c_img).pop()).split(',');
$container.find(".zoom-product").each(function(index){
var src=Shopify.resizeImage(img_a[index], '600x');
$(this).attr('src',src);
})
!elevateZoomWidget.checkNoZoom() && elevateZoomWidget.configureZoomImage();
}
function setScrollSlider(num, $container){
if(!(num && $container.length)) return false;
$container.slick('slickGoTo', num, true);
}
/* For buy now button */
function changeBuyNowName(){
var $buyinoneclick = $('.buyinoneclick');
var buttonname = $buyinoneclick.data("buttonname");
var loadname = $buyinoneclick.data("loading");
if($buyinoneclick.length == 0) return false;
$buyinoneclick.first().bind('DOMNodeInserted', function() {
$(this).unbind('DOMNodeInserted');
var $shopifypaymentbutton = $(this).find(".shopify-payment-button__button");
setTimeout(function(){
if($('.buyinoneclick').length){
$buyinoneclick.hide();
setTimeout(
function(){
if($(".shopify-payment-button__button").hasClass("shopify-payment-button__button--branded")){
$(".shopify-payment-button__button")
.on("click", function(){
$('.buyinoneclick').replaceWith('<p class="tt-loading-text">' + loadname + '</p>')
})
.find('span[aria-hidden=true]').first().text(buttonname+' ');
}
else{
$(".shopify-payment-button__button")
.on("click", function(){
$('.buyinoneclick').replaceWith('<p class="tt-loading-text">' + loadname + '</p>')
})
.text(buttonname);
}
$buyinoneclick.fadeIn()
}, 300);
}
}, 300);
});
}
if( '{{product.selected_or_first_available_variant}}' == ' {{product.selected_or_last_available_variant}} ' ){
$('.unit-price').html('{{ product.selected_or_first_available_variant }}');
$('.unit-price').html('Code');
}
</script>
In Canada, payment processors, like those that provide payment processing services t...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025