(Old Designer) Adding One Time Products to your Site : Support

This article only applies to the old designer. Not sure which designer you have? Check here.

This article contains information on how to manually install a one-time shop into your theme in the event that your theme does not support one-time shops by default.

In order to install a one-time shop you will need to add/modify the following things:

Add a link to your shop in your navigation menu (typically found in base.html)
Add pikachoose plugin css
Add pikachoose js library
Add a file called shop/listing.html
Add a product description file called shop/product.html
Make the listed theme-specific changes

It's okay if those steps don't totally make sense, we'll walk you through each step including what to copy and where to paste it. Trust us - you can do this.

Add the shop page to your navigation

You'll probably want to add the shop page to your navigation - the way to do that is to find the base.html file and look for all of your other navigation links.

Add:

<li><a href="/shop" data-barley="nav_shop_link" data-barley-editor="link">SHOP</a></li>

Add Pikachoose CSS

Select your CSS folder - then select 'Add new' and paste:

plugins/pikachoose/base.css

Copy/paste the following code to the base.css file:

/* Just for the example. Fee free to delete these three lines */
body{font-family:Helvetica, sans-serif;}
a{color:white;}
.pikachoose {width: 520px; margin: 0 auto;}

/* Style the thumbnails */
.pika-thumbs{ padding: 0 16px; height: 75px; }
  .pika-thumbs li{ width: 144px; height:74px; margin: 10px 0 0 17px; padding: 0; overflow: hidden;
    float: left; list-style-type: none;padding: 3px; margin: 0 5px; background: #fafafa; border: 1px solid #e5e5e5; cursor: pointer;}
  .pika-thumbs li .clip {position:relative;height:100%;text-align: center; vertical-align: middle; overflow: hidden;}
  
/* The stage is the wrapper. The image fills 100% the height of the stage */
.pika-stage, .pika-textnav {width: 500px;}
.pika-stage {position: relative; background: #fafafa; border: 1px solid #e5e5e5; padding: 10px 10px 40px 10px; text-align:center; height:250px;}
.pika-stage img{height:100%;}
.pika-stage .caption {position: absolute; background: #000; background: rgba(0,0,0,0.75);  border: 1px solid #141414; font-size: 11px; 
      color: #fafafa; padding: 10px; text-align: right; bottom: 50px; right: 10px;}
  .pika-stage .caption p {padding: 0; margin: 0; line-height: 14px;}

/* Ths play, pause, prev and next buttons */
.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3;}
  .pika-imgnav a.previous {background: url(prev.png) no-repeat left 45%; height: 100%; width: 50px; top: 10px; left: 10px;cursor:pointer;}
  .pika-imgnav a.next {background: url(next.png) no-repeat right 45%; height: 100%; width: 50px; top: 10px; right: 10px;cursor:pointer;}
  .pika-imgnav a.play {background: url(play.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display: none;cursor:pointer;}
  .pika-imgnav a.pause {background: url(pause.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display:none;cursor:pointer;}

/* The previous and next textual buttons */
.pika-textnav {overflow: hidden; margin: 10px 0 0 0;bottom:10px; position:absolute;}
.pika-textnav a {font-size: 12px; text-decoration: none; color: #333; padding: 4px;}
  .pika-textnav a.previous {float: left; width: auto; display: block;}
  .pika-textnav a.next {float: right; width: auto; display: block;}

/*for the tool tips*/
.pika-tooltip{font-size:12px;position:absolute;color:white;padding:3px; background-color: rgba(0,0,0,0.7);border:3px solid black;}
.pika-counter{position: absolute;bottom: 45px;left:15px;color:white;background:rgba(0,0,0,0.7);font-size:11px;padding:3px;-moz-border-radius: 5px;border-radius:5px;}

/* If using user thumbnails there's a pause well the new large image loads. This is the loader for that */    
.pika-loader{ background:url(loading.gif) 3px 3px no-repeat #000; background-color:rgba(0,0,0,0.9); color:white; width:60px; font-size:11px; padding:5px 3px; 
  text-align:right; position:absolute; top:15px; right:15px; }

Add the Pikachoose JS file

Scroll down to the folder titled js and select it. Select 'Add new' and paste:

jquery.pikachoose.min.js

Copy/paste the following code into this file:

(function($){"";"use strict";var defaults={autoPlay:true,speed:5000,text:{play:"",stop:"",previous:"Previous",next:"Next",loading:"Loading"},transition:[1],showCaption:true,IESafe:false,showTooltips:false,carousel:false,swipe:true,carouselVertical:false,animationFinished:null,buildFinished:null,bindsFinished:null,startOn:0,thumbOpacity:0.4,hoverPause:false,animationSpeed:600,fadeThumbsIn:false,carouselOptions:{},thumbChangeEvent:'click.pikachoose',stopOnClick:false,hideThumbnails:false};$.fn.PikaChoose=function(o){return this.each(function(){$(this).data('pikachoose',new $pc(this,o));});};$.PikaChoose=function(e,o){this.options=$.extend({},defaults,o||{});this.list=null;this.image=null;this.anchor=null;this.caption=null;this.imgNav=null;this.imgPlay=null;this.imgPrev=null;this.imgNext=null;this.textNext=null;this.textPrev=null;this.previous=null;this.next=null;this.aniWrap=null;this.aniDiv=null;this.aniImg=null;this.thumbs=null;this.transition=null;this.active=null;this.tooltip=null;this.animating=false;this.stillOut=null;this.counter=null;this.timeOut=null;this.pikaStage=null;if(typeof(this.options.data)!="undefined"){e=$("<ul></ul>").addClass("jcarousel-skin-pika").appendTo(e);$.each(this.options.data,function(){var tmp=null;if(typeof(this.link)!="undefined"){tmp=$("<li><a href='"+this.link+"'><img></a></li>").appendTo(e);if(typeof(this.title)!="undefined"){tmp.find('a').attr('title',this.title);}}else{tmp=$("<li><img></li>").appendTo(e);}
if(typeof(this.caption)!="undefined"){tmp.append("<span>"+this.caption+"</span>");}
if(typeof(this.thumbnail)!="undefined"){tmp.find('img').attr('ref',this.image);tmp.find('img').attr('src',this.thumbnail);}else{tmp.find('img').attr('src',this.image);}});}
if(e instanceof jQuery||e.nodeName.toUpperCase()=='UL'||e.nodeName.toUpperCase()=='OL'){this.list=$(e);this.build();this.bindEvents();}else{return;}
var y=0;var x=0;for(var t=0;t<25;t++){var a='<div col="'+y+'" row="'+x+'"></div>';this.aniDiv.append(a);y++;if(y==5){x++;y=0;}}};var $pc=$.PikaChoose;$pc.fn=$pc.prototype={version:"96"};$.fn.pikachoose=$.fn.PikaChoose;$pc.fn.extend=$pc.extend=$.extend;$pc.fn.extend({build:function(){this.step=0;if(this.options.pikaStage){this.wrap=this.options.pikaStage;this.wrap.addClass('pika-stage');}else{this.wrap=$("<div class='pika-stage'></div>").insertBefore(this.list);}
this.image=$("<img>").appendTo(this.wrap);this.imgNav=$("<div class='pika-imgnav'></div>").insertAfter(this.image);this.imgPlay=$("<a></a>").appendTo(this.imgNav);this.counter=$("<span class='pika-counter'></span>").appendTo(this.imgNav);if(this.options.autoPlay){this.imgPlay.addClass('pause');}else{this.imgPlay.addClass('play');}
this.imgPrev=$("<a class='previous'></a>").insertAfter(this.imgPlay);this.imgNext=$("<a class='next'></a>").insertAfter(this.imgPrev);this.caption=$("<div class='caption'></div>").insertAfter(this.imgNav).hide();this.tooltip=$("<div class='pika-tooltip'></div>").insertAfter(this.list).hide();this.aniWrap=$("<div class='pika-aniwrap'></div>").insertAfter(this.caption);this.aniImg=$("<img>").appendTo(this.aniWrap).hide();this.aniDiv=$("<div class='pika-ani'></div>").appendTo(this.aniWrap);this.textNav=$("<div class='pika-textnav'></div>").insertAfter(this.aniWrap);this.textPrev=$("<a class='previous'>"+this.options.text.previous+"</a>").appendTo(this.textNav);this.textNext=$("<a class='next'>"+this.options.text.next+"</a>").appendTo(this.textNav);this.list.addClass('pika-thumbs');this.thumbs=this.list.find('img');this.loader=$("<div class='pika-loader'></div>").appendTo(this.wrap).hide().html(this.options.text.loading);this.active=this.thumbs.eq(this.options.startOn);this.finishAnimating({'index':this.options.startOn,'source':this.active.attr('ref')||this.active.attr('src'),'caption':this.active.parents('li:first').find('span:first').html(),'clickThrough':this.active.parent().attr('href')||"",'clickThroughTarget':this.active.parent().attr('target')||"",'clickThroughTitle':this.active.parent().attr('title')||""});this.aniDiv.css({position:'relative'});var self=this;this.updateThumbs();if(this.options.fadeThumbsIn){this.list.fadeIn();}
if(this.options.hideThumbnails){this.list.hide();}
if(this.options.carousel&&$.fn.jcarousel){var carouselDefaults={vertical:this.options.carouselVertical,initCallback:function(carousel){jQuery(carousel.list).find('img').click(function(e,x){if(typeof(x)!=='undefined'&&x.how=="auto"){if(self.options.autoPlay===false){return false;}}
var clicked=parseInt(jQuery(this).parents('.jcarousel-item').attr('jcarouselindex'),10);var last=(jQuery(this).parents('ul').find('li:last').attr('jcarouselindex')==clicked-1)?true:false;if(!last){clicked=(clicked-2<=0)?0:clicked-2;}
clicked++;carousel.scroll(clicked);});}};var carouselOptions=$.extend({},carouselDefaults,this.options.carouselOptions||{});this.list.jcarousel(carouselOptions);}
if(this.options.swipe&&$.fn.touchwipe){this.wrap.touchwipe({wipeLeft:function(){self.Next();},wipeRight:function(){self.Prev();}});}
if(typeof(this.options.buildFinished)=='function'){this.options.buildFinished(this);}},createThumb:function(ele){var self=ele;var that=this;this.thumbs=this.list.find('img');if(typeof $.data(ele[0],'source')!=='undefined'){return;}
ele.parents('li:first').wrapInner("<div class='clip' />");self.hide();$.data(ele[0],'clickThrough',self.parent('a').attr('href')||"");$.data(ele[0],'clickThroughTarget',self.parent('a').attr('target')||"");$.data(ele[0],'clickThroughTitle',self.parent('a').attr('title')||"");if(self.parent('a').length>0){self.unwrap();}
$.data(ele[0],'caption',self.next('span').html()||"");self.next('span').remove();$.data(ele[0],'source',self.attr('ref')||self.attr('src'));$.data(ele[0],'imageTitle',self.attr('title')||"");$.data(ele[0],'imageAlt',self.attr('alt')||"");$.data(ele[0],'index',this.thumbs.index(ele));$.data(ele[0],'order',self.closest('ul').find('li').index(self.parents('li')));var data=$.data(ele[0]);$('<img />').on('load',{data:data},function(){if(typeof(that.options.buildThumbStart)=='function'){that.options.buildThumbStart(that);}
var img=$(this);var w=this.width;var h=this.height;if(w===0){w=img.attr("width");}
if(h===0){h=img.attr("height");}
var ph=parseInt(self.parents('.clip').css('height').slice(0,-2),10);var pw=parseInt(self.parents('.clip').css('width').slice(0,-2),10);if(pw===0){pw=self.parents('li:first').outerWidth();}
if(ph===0){ph=self.parents('li:first').outerHeight();}
var rw=pw/w;var rh=ph/h;var ratio;if(rw<rh){self.css({height:'100%'});self.fadeTo(0.001,0);self.css({left:-(self.outerWidth()-pw)/2});self.hide();}else{self.css({width:'100%'});}
self.hover(function(e){clearTimeout(that.stillOut);$(this).stop(true,true).fadeTo(250,1);if(!that.options.showTooltips){return;}
that.tooltip.show().stop(true,true).html(data.caption).animate({top:$(this).parent().position().top,left:$(this).parent().position().left,opacity:1.0},'fast');},function(e){if(!$(this).hasClass("active")){$(this).stop(true,true).fadeTo(250,that.options.thumbOpacity);that.stillOut=setTimeout(that.hideTooltip,700);}});if(data.order==that.options.startOn){self.fadeTo(250,1);self.addClass('active');self.parents('li').eq(0).addClass('active');}else{self.fadeTo(250,that.options.thumbOpacity);}
if(typeof(that.options.buildThumbFinish)=='function'){that.options.buildThumbFinish(that);}}).attr('src',self.attr('src'));},bindEvents:function(){this.thumbs.on(this.options.thumbChangeEvent,{self:this},this.imgClick);this.imgNext.on('click.pikachoose',{self:this},this.nextClick);this.textNext.on('click.pikachoose',{self:this},this.nextClick);this.imgPrev.on('click.pikachoose',{self:this},this.prevClick);this.textPrev.on('click.pikachoose',{self:this},this.prevClick);this.imgPlay.unbind('click.pikachoose').on('click.pikachoose',{self:this},this.playClick);this.wrap.unbind('mouseenter.pikachoose').on('mouseenter.pikachoose',{self:this},function(e){e.data.self.imgNav.stop(true,true).fadeTo('slow',1.0);if(e.data.self.options.hoverPause===true){clearTimeout(e.data.self.timeOut);}});this.wrap.unbind('mouseleave.pikachoose').on('mouseleave.pikachoose',{self:this},function(e){e.data.self.imgNav.stop(true,true).fadeTo('slow',0.0);if(e.data.self.options.autoPlay&&e.data.self.options.hoverPause){e.data.self.timeOut=setTimeout((function(self){return function(){self.nextClick();};})(e.data.self),e.data.self.options.speed);}});this.tooltip.unbind('mouseenter.pikachoose').on('mouseenter.pikachoose',{self:this},function(e){clearTimeout(e.data.self.stillOut);});this.tooltip.unbind('mouseleave.pikachoose').on('mouseleave.pikachoose',{self:this},function(e){e.data.self.stillOut=setTimeout(e.data.self.hideTooltip,700);});if(typeof(this.options.bindsFinished)=='function'){this.options.bindsFinished(this);}},hideTooltip:function(e){$(".pika-tooltip").animate({opacity:0.01});},imgClick:function(e,x){var self=e.data.self;var data=$.data(this);if(self.animating){return;}
if(typeof(x)=='undefined'||x.how!="auto"){if(self.options.autoPlay&&self.options.stopOnClick){self.imgPlay.trigger('click');}else{clearTimeout(self.timeOut);}}else{if(!self.options.autoPlay){return false;}}
if($(this).attr('src')!==$.data(this).source){self.loader.fadeIn('fast');}
self.caption.fadeOut('slow');self.animating=true;self.active.fadeTo(300,self.options.thumbOpacity).removeClass('active');self.active.parents('.active').eq(0).removeClass('active');self.active=$(this);self.active.addClass('active').fadeTo(200,1);self.active.parents('li').eq(0).addClass('active');$('<img />').on('load',{self:self,data:data},function(){self.loader.fadeOut('fast');self.aniDiv.css({height:self.image.height(),width:self.image.width()}).show();self.aniDiv.children('div').css({'width':'20%','height':'20%','float':'left'});var n=0;if(self.options.transition[0]==-1){n=Math.floor(Math.random()*7)+1;}else{n=self.options.transition[self.step];self.step++;if(self.step>=self.options.transition.length){self.step=0;}}
if(self.options.IESafe&&$.browser.msie){n=1;}
self.doAnimation(n,data);}).attr('src',$.data(this).source);},doAnimation:function(n,data){this.aniWrap.css({position:'absolute',top:this.wrap.css('padding-top'),left:this.wrap.css('padding-left'),width:this.wrap.width()});var self=this;self.image.stop(true,false);self.caption.stop().fadeOut();var aWidth=self.aniDiv.children('div').eq(0).width();var aHeight=self.aniDiv.children('div').eq(0).height();var img=new Image();$(img).attr('src',data.source);if(img.height!=self.image.height()||img.width!=self.image.width()){if(n!==0&&n!==1&&n!==7){}}
self.aniDiv.css({height:self.image.height(),width:self.image.width()});self.aniDiv.children().each(function(){var div=$(this);var xOffset=Math.floor(div.parent().width()/5)*div.attr('col');var yOffset=Math.floor(div.parent().height()/5)*div.attr('row');div.css({'background':'url('+data.source+') -'+xOffset+'px -'+yOffset+'px','background-size':div.parent().width()+'px '+div.parent().height()+'px','width':'0px','height':'0px','position':'absolute','top':yOffset+'px','left':xOffset+'px','float':'none'});});self.aniDiv.hide();self.aniImg.hide();switch(n){case 0:self.image.stop(true,true).fadeOut(self.options.animationSpeed,function(){self.image.attr('src',data.source).fadeIn(self.options.animationSpeed,function(){self.finishAnimating(data);});});break;case 1:self.aniDiv.hide();self.aniImg.height(self.image.height()).hide().attr('src',data.source);self.wrap.css({height:self.image.height()});$.when(self.image.fadeOut(self.options.animationSpeed),self.aniImg.eq(0).fadeIn(self.options.animationSpeed)).done(function(){self.finishAnimating(data);});break;case 2:self.aniDiv.show().children().hide().each(function(index){var delay=index*30;$(this).css({opacity:0.1}).show().delay(delay).animate({opacity:1,"width":aWidth,"height":aHeight},200,'linear',function(){if(self.aniDiv.find("div").index(this)==24){self.finishAnimating(data);}});});break;case 3:self.aniDiv.show().children("div:lt(5)").hide().each(function(index){var delay=$(this).attr('col')*100;$(this).css({opacity:0.1,"width":aWidth}).show().delay(delay).animate({opacity:1,"height":self.image.height()},self.options.animationSpeed,'linear',function(){if(self.aniDiv.find(" div").index(this)==4){self.finishAnimating(data);}});});break;case 4:self.aniDiv.show().children().hide().each(function(index){if(index>4){return;}
var delay=$(this).attr('col')*30;var gap=self.gapper($(this),aHeight,aWidth);var speed=self.options.animationSpeed*0.7;$(this).css({opacity:0.1,"height":"100%"}).show().delay(delay).animate({opacity:1,"width":gap.width},speed,'linear',function(){if(self.aniDiv.find(" div").index(this)==4){self.finishAnimating(data);}});});break;case 5:self.aniDiv.show().children().show().each(function(index){var delay=index*Math.floor(Math.random()*5)*7;var gap=self.gapper($(this),aHeight,aWidth);if($(".animation div").index(this)==24){delay=700;}
$(this).css({"height":gap.height,"width":gap.width,"opacity":0.01}).delay(delay).animate({"opacity":1},self.options.animationSpeed,function(){if(self.aniDiv.find(" div").index(this)==24){self.finishAnimating(data);}});});break;case 6:self.aniDiv.height(self.image.height()).hide().css({'background':'url('+data.source+') top left no-repeat'});self.aniDiv.children('div').hide();self.aniDiv.css({width:0}).show().animate({width:self.image.width()},self.options.animationSpeed,function(){self.finishAnimating(data);self.aniDiv.css({'background':'transparent'});});break;case 7:self.wrap.css({overflow:'hidden'});self.aniImg.height(self.image.height()).hide().attr('src',data.source);self.aniDiv.hide();self.image.css({position:'relative'}).animate({left:"-"+self.wrap.outerWidth()+"px"});self.aniImg.show();self.aniWrap.css({left:self.wrap.outerWidth()}).show().animate({left:"0px"},self.options.animationSpeed,function(){self.finishAnimating(data);});break;}},finishAnimating:function(data){this.animating=false;this.image.attr('src',data.source);this.image.attr('alt',data.imageAlt);this.image.attr('title',data.imageTitle);this.image.css({left:"0"});this.image.show();var self=this;$('<img />').on('load',function(){self.aniImg.fadeOut('fast');self.aniDiv.fadeOut('fast');}).attr('src',data.source);var cur=data.index+1;var total=this.thumbs.length;this.counter.html(cur+"/"+total);if(data.clickThrough!==""){if(this.anchor===null){this.anchor=this.image.wrap("<a>").parent();}
this.anchor.attr('href',data.clickThrough);this.anchor.attr('title',data.clickThroughTitle);this.anchor.attr('target',data.clickThroughTarget);}else{if(this.image.parent('a').length>0){this.image.unwrap();}
this.anchor=null;}
if(this.options.showCaption&&data.caption!==""&&data.caption!==null){this.caption.html(data.caption).fadeTo('slow',1);}
if(this.options.autoPlay&&total>1){this.timeOut=setTimeout((function(self){return function(){self.nextClick();};})(this),this.options.speed,this.timeOut);}
if(typeof(this.options.animationFinished)=='function'){this.options.animationFinished(this);}},gapper:function(ele,aHeight,aWidth){var gap;if(ele.attr('row')==4){gap=(this.aniDiv.height()-(aHeight*5))+aHeight;aHeight=gap;}
if(ele.attr('col')==4){gap=(this.aniDiv.width()-(aWidth*5))+aWidth;aWidth=gap;}
return{height:aHeight,width:aWidth};},nextClick:function(e){var how="natural";var self=null;try{self=e.data.self;if(typeof(e.data.self.options.next)=='function'){e.data.self.options.next(this);}}catch(err){self=this;how="auto";}
var next=self.active.parents('li:first').next().find('img');if(next.length===0){next=self.list.find('img').eq(0);}
next.trigger('click',{how:how});return next;},prevClick:function(e){if(typeof(e.data.self.options.previous)=='function'){e.data.self.options.previous(this);}
var self=e.data.self;var prev=self.active.parents('li:first').prev().find('img');if(prev.length===0){prev=self.list.find('img:last');}
prev.trigger('click');return prev;},playClick:function(e){var self=e.data.self;self.options.autoPlay=!self.options.autoPlay;self.imgPlay.toggleClass('play').toggleClass('pause');if(self.options.autoPlay){self.nextClick();}else{clearTimeout(self.timeOut);}
return(self.options.autoPlay)?"playing":"paused";},Next:function(){var e={data:{self:this}};return this.nextClick(e);},Prev:function(){var e={data:{self:this}};return this.prevClick(e);},GoTo:function(v){var e={data:{self:this}};var gotoImg=this.list.find('img').eq(v);if(gotoImg.length>0){gotoImg.trigger('click');return gotoImg;}else{throw"Image not found. Images are 0 indexed.";}},Play:function(){if(this.options.autoPlay){return"playing";}
var e={data:{self:this}};return this.playClick(e);},Pause:function(){if(!this.options.autoPlay){return"paused";}
var e={data:{self:this}};return this.playClick(e);},updateThumbs:function(){var self=this;this.thumbs=this.list.find('img');this.thumbs.each(function(){self.createThumb($(this),self);});}});})(jQuery);

Add shop/listing.html

Under "html" scroll down and see if you already have a folder labeled "shop". If you do not have a folder labeled "shop" then under HTML select "Add New" and add the folder "shop" and select the "Create Directory?" checkbox. After you’ve created the "shop" folder select the folder and hit "Add New" and create a file named listing.html and save (this will not be a directory).

It's important for you to name the folder 'shop' in all lower-case. "Shop" or "SHOP" will not work.

At a minimum the listing.html file should contain:

You can customize this code if you'd like, but this basic template will work to start out.

{% extends "base.html" %}
{% block title %}One-Time Products{% endblock %}

{% block page_content %} 
  {{ shop.listing_page() }}
{% endblock %}

{% block page_javascript %}
  {{ shop.listing_js() }}
{% endblock %}

Add shop/product.html

Under the shop folder add the file product.html (just like the listing.html file):

At a minimum it should contain:

{% extends "base.html" %}
{% block title %}Product{% endblock %}

{% block override_metatags %}
<meta property="og:url" content="{{ product | product_ecom_url(http=True) }}" />
{% if product.images %}
<meta property="og:image" content="{{ product.images[0].url[2:]}}" />
{% endif %}
{% endblock %}

{% block css %}
  {{ 'css/plugins/pikachoose/base.css' | asset_url | stylesheet_tag }}
{% endblock %}

{% block page_content %}
  {{ shop.product_page() }}
{% endblock %}

{% block page_javascript %}  
<script src="{{ 'js/jquery.pikachoose.min.js' | asset_url }}"></script>

<script>
$(document).ready(
  function (){
    $("#thumbs").PikaChoose(
      {
        autoPlay: false,
        showCaption: false,
        animationSpeed: 400,
        transition: [0],
        bindFinished: load_image
      }
    );
    if ($("#thumbs li").length <= 1) {
      $("#thumbs").hide();
    }
    
    var load_image = function(img) {
      var actualImage = new Image();
      container = $(".pika-stage");
    actualImage.src = img.attr('src');
    actualImage.onload = function() {
        width = this.width;
        height = this.height;
        var cutoff = 300;
        img = container.find("img");
        if (width < cutoff) {
          container.css({'min-height': '300px'});
          img.css({'width': width, 'height': height}); 
          var width_centered = (container.width() - width) / 2;
          var height_centered = (container.height() - height) / 2;
          img.css({'position': 'relative', 'top': height_centered});
        } else {
          img.css({'width': '100%', 'height': '100%', 'top': '0'});
          container.css({'min-height': '0px'});
        }
    }
    }
    $("#thumbs li").on("click", function() {
      setTimeout(function() {
        load_image($(this).find("img"));
      }.bind(this), 400);
    });
    load_image($(".pika-stage").find("img"));
  });
</script>

{{ shop.product_js() }}
{% endblock %}

If you see product images being stretched out of proportion, try removing the line "img.css({'width': '100%', 'height': '100%', 'top': '0'});" -- it may help.

Add CSS to styles.css

Find your CSS folder and select styles.css (or styles2.css) Scroll down to the bottom and paste in the following:

/*----------------------ECOM---------------------- */
.section{
  padding-top: 50px;
  padding-bottom: 50px;
}
.header-article {
    text-align: center;
}

.header-article .heading {
  margin-bottom: 10px;
}

.header-article p {
  margin-bottom: 20px;
}
.card {
  margin-top:20px;
  margin-bottom: 20px;
}
.card > a {
  display: block;
}
.card > a:hover {
  text-decoration: none;
}
.card .heading {
  display: block;
  margin: 0;
  font-size: 18px;
  line-height: 120%;
  color: {{ settings.color_light_body_text }};
}
.card .price {
  display: block;
  color: {{ settings.color_body_text }};
}
.card .img-container {
  display: inline-block;
  width: 225px;
  height: 225px;
  border: 1px solid #e0e0e0;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}
#product-form {
  padding-top: 10px;
}
#product-form .cselect {
  background: #FAFAFA;
  border: 1px solid {{settings.color_form_border}};
  color: {{settings.color_form_input_text}};
  border-radius: 3px;
  height: 40px;
}
#product-form .control-label {
  line-height: 30px;
}
.product {
  padding: 60px 0;
}
.header-article a {
  color: {{ settings.color_body_text }};
}
.product .thumbs {
  position: relative;
  margin-bottom: 30px;
}
.product .price {
  margin-bottom: 10px;
  font-size: 18px;
  color: {{ settings.color_body_text }};
}
.product .heading {
   margin-bottom: 15px;
  font-family: {{ settings.face_secondary_heading }};
}
.product .hsecondary-grp {
  margin: 0 0 5px;
  color: {{ settings.color_body_text }};
}
.product p {
  line-height: 120%;
}
.product .share {
  margin: 25px 0;
  font-size: 18px;
}
.product .share .social {
  margin-left: 15px;
  font-size: 24px;
}
.product hr {
  margin: 35px 0;
}
.product .btn {
  background: {{settings.color_button}};
  color: {{settings.color_button_text}};
  border: none;
}
.product .btn:hover {
  background: {{settings.color_button_hover}};
}
div.pika-stage {
  padding: 0;
  width: 100%;
  height: auto;
  background: none;
}
div.pika-stage .pika-textnav,
div.pika-stage .pika-imgnav,
div.pika-stage .pika-aniwrap,
div.pika-stage .pika-loader {
  display: none !important;
}
div.pika-stage > img {
  width: 100%;
  height: auto;
}
ul.pika-thumbs {
  margin-top: 10px;
  padding: 0;
  height: auto;
}
ul.pika-thumbs > li {
  padding: 0;
  margin: 0 10px 0 0;
  height: 87px;
  width: 87px;
  border: none;
  background: none;
}
.filter-cards {
  margin-top: -30px;
  padding-top: 25px;
  padding-bottom: 25px;
}
.filter-cards .label {
  display: inline-block;
  margin-right: 10px;
  padding: 0;
  font-weight: 400;
  font-size: 14px;
  color: {{ settings.color_body_text }};
}
.filter-cards .cselect {
  background: #FAFAFA;
  border: 1px solid {{settings.color_form_border}};
  color: {{settings.color_form_input_text}};
  border-radius: 3px;
  height: 40px;
}
.product-label {
  display: table;
  line-height: 120%;
}
.product-label .thumb,
.product-label .meta {
  display: table-cell;
  vertical-align: middle;
}
.product-label .thumb {
  padding-right: 35px;
  width: 125px;
}
.product-label .heading {
  margin-bottom: 5px;
}
.product-label p {
  margin: 0;
}
.cart-thead {
  margin-top: -30px;
}
.cart-thead .cart-td {
  padding: 15px 0;
  border-bottom: 1px solid #e0e0e0;
  border-top: 1px solid #e0e0e0;
}
.cart-thead .heading {
  margin: 0;
}
.cart-table {
  position: relative;
  display: table;
  width: 100%;
}
.cart-table .close {
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -11px;
}
.cart-td {
  display: table-cell;
  float: none;
  padding: 30px 0;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: middle;
}
.cart-tfoot {
  float: right;
  margin-top: 30px;
  margin-bottom: 85px;
}
.cart-tfoot .cart-subtotal {
  display: table;
  margin-bottom: 30px;
}
.cart-tfoot .cart-subtotal .title,
.cart-tfoot .cart-subtotal .price {
  display: table-cell;
  vertical-align: middle;
}
.cart-tfoot .cart-subtotal .title {
  padding-right: 30px;
  font-size: 18px;
}
.cart-tfoot .cart-subtotal .price {
  font-size: 38px;
  color: {{ settings.color_light_body_text }};
  line-height: 120%;
}
.cart-tfoot .cart-subtotal .price small {
  display: block;
  margin-top: 10px;
  color: {{ settings.color_light_body_text }};
  font-size: 14px;
  line-height: 120%;
}

.jq-selectbox__select {
  height: 40px;
  line-height: 36px;
  font-size: 15px;
  background: none;
  background: #FAFAFA;
  box-shadow: none;
  color: {{ settings.color_body_text }};
  text-shadow: none;
}
.jq-selectbox__trigger {
  border: none;
}
.jq-selectbox__trigger-arrow {
  top: 18px;
}
.jq-selectbox__dropdown {
  top: 100% !important;
  text-align: left;
}
.jq-selectbox__select-text {
  display: inline;
  width: 100% !important;
}
.product_paging {
  margin: 50px 0 35px;
}
.product_paging > li {
  display: inline-block;
  margin: 0 1px;
}
.product_paging > li:first-child a,
.product_paging > li:last-child a {
  color: {{ settings.color_body_text }};;
}
.product_paging > li > a {
  padding: 5px;
  line-height: 16px;
  color: {{ settings.color_body_text }};
  border: none;
}
.product_paging > li > a:hover {
  background: none;
}
.product_paging > li.active a {
  color: {{ settings.color_light_body_text }};
  background: none;
  border-bottom: 2px solid {{ settings.color_light_body_text }};
}
.product_paging > li.active a:hover {
  background: none;
  color: {{ settings.color_light_body_text }};
}

@media (max-width: 768px) {
  .filter-cards > div {
    text-align: center;
  }
  .filter-cards > div + div {
    margin-top: 20px;
  }
  .cart-table {
    display: block;
    padding-bottom: 20px;
    margin-bottom: -1px;
    border: 1px solid #e0e0e0;
  }
  .cart-table .close {
    top: 15px;
    right: 15px;
    margin-top: 0;
    font-size: 30px;
  }
  .cart-td {
    display: block;
    padding: 15px;
    border: none;
  }
  .product-label .thumb {
    text-align: right;
  }
  .cart-tfoot {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
  .cart-tfoot .cart-subtotal {
    display: block;
  }
  .cart-tfoot .cart-subtotal .title,
  .cart-tfoot .cart-subtotal .price {
    display: block;
    text-align: center;
  }
  .cart-tfoot .cart-subtotal .title {
    padding: 0;
    font-size: 25px;
  }
  .cart-tfoot .cart-subtotal .price {
    font-size: 60px;
  }
  .cart-tfoot .cart-subtotal .price small {
    font-size: 22px;
  }
}
.fb-share-button {
  position: relative;
  top: -5px;
  margin-right: 20px;
}
.pinterest-share-button {
  position: relative;
  left: -9px;
}

Other things to check

Most themes have these things but if you are getting errors or things don't look quite right, check this stuff:

You need to have a "{% block css %}{% endblock %}" at the bottom of your <head></head> block, this is usually either in a file called, "head.html" or "base.html".
You should have a "{% block page_javascript %}{% endblock %}" in your base.html after the footer.
For the Facebook share button to properly load you should have the code below right after the beginning <body> in your base.html

<div id="fb-root"></div>
 <script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>

Theme-Specific Changes

Joybox

If you are using one of the Joybox themes, you must make these two changes to your components/shopping-cart.html file:

Find the line:

<p class="meta">{{ cart_gift.subscription_type_term.name | title }}</p>

Replace it with:

{% if cart_gift.subscription_type_term %}
 <p class="meta">{{ cart_gift.subscription_type_term.name | title }}</p>
{% else %}
 <p class="meta">One-Time Product</p>
{% endif %}

Find the line:

<p class="meta">{{ cart_prod.subscription_type_term.name | title }}</p>

Replace it with:

{% if cart_prod.subscription_type_term %}
 <p class="meta">{{ cart_prod.subscription_type_term.name | title }}</p>
{% else %}
 <p class="meta">One-Time Product</p>
{% endif %}

Betterman

Replace the shop/listing page with this:

{% extends "base.html" %}
{% block title %}One-Time Products{% endblock %}
 
{% block page_content %} 
<section class="ecom-listing">
  {{ shop.listing_page() }}
</section>
{% endblock %}
 
{% block page_javascript %}
  {{ shop.listing_js() }}
{% endblock %}

Replace the shop/product page with this:

{% extends "base.html" %}
{% block title %}Product{% endblock %}
 
{% block override_metatags %}
<meta property="og:url" content="{{ product | product_ecom_url(http=True) }}" />
{% if product.images %}
<meta property="og:image" content="{{ product.images[0].url[2:]}}" />
{% endif %}
{% endblock %}
 
{% block css %}
  {{ 'css/plugins/pikachoose/base.css' | asset_url | stylesheet_tag }}
{% endblock %}
 
{% block page_content %}
<section class="ecom-product-page">
  {{ shop.product_page() }}
</section>
{% endblock %}
 
{% block page_javascript %}  
<script src="{{ 'js/jquery.pikachoose.min.js' | asset_url }}"></script>
 
<script>
$(document).ready(
  function (){
    $("#thumbs").PikaChoose(
      {
        autoPlay: false,
        showCaption: false,
        animationSpeed: 400,
        transition: [0],
        bindFinished: load_image
      }
    );
    if ($("#thumbs li").length <= 1) {
      $("#thumbs").hide();
    }
    
    var load_image = function(img) {
      var actualImage = new Image();
      container = $(".pika-stage");
    actualImage.src = img.attr('src');
    actualImage.onload = function() {
        width = this.width;
        height = this.height;
        var cutoff = 300;
        img = container.find("img");
        if (width < cutoff) {
          container.css({'min-height': '300px'});
          img.css({'width': width, 'height': height}); 
          var width_centered = (container.width() - width) / 2;
          var height_centered = (container.height() - height) / 2;
          img.css({'position': 'relative', 'top': height_centered});
        } else {
          img.css({'width': '100%', 'height': '100%', 'top': '0'});
          container.css({'min-height': '0px'});
        }
    }
    }
    $("#thumbs li").on("click", function() {
      setTimeout(function() {
        load_image($(this).find("img"));
      }.bind(this), 400);
    });
    load_image($(".pika-stage").find("img"));
  });
</script>
 
{{ shop.product_js() }}
{% endblock %}

That's it! You should be ready to go!

(Old Designer) Adding One Time Products to your Site Print