ADD NEXT PREV PRODUCT IN SHOPIFY DEBUT THEME

-------------------------------------------------------------------------------------------------------------------

Button that scrolls with the page

https://stackoverflow.com/questions/29907959/button-that-scrolls-with-the-page

http://jsfiddle.net/samuraii/sc9jycd7/2/

-------------------------------------------------------------------------------------------------------------------

STEP :0

ADD SNIPPET LINK IN product-template.liquid

{%- include 'next-prev-product' -%}

{% schema %}

-------------------------------------------------------------------------------------------------------------------

STEP :1

ADD NEXT PREV ENABLE CODE IN SCHEMA SETTING

{
"type": "checkbox",
"id": "next_prev_enable",
"label": "Enable next/previous products",
"default": true
},
{
"type": "checkbox",
"id": "show_vendor",
"label": {
"de": "Lieferanten anzeigen",
"en": "Show vendor",
"es": "Mostrar proveedor",
"fr": "Afficher les vendeurs",
"it": "Mostra fornitore",
"ja": "販売元を表示する",
"pt-BR": "Exibir fornecedor"
},
"default": false
},

-------------------------------------------------------------------------------------------------------------------

CREATE SNIPPET next-prev-product.liquid IN SNIPPET FOLDER

next-prev-product.liquid CODE

check result url link for next prev product

https://fbgadgets.myshopify.com/collections/new

----------------------------------------------------------------------------------------------------------------------

HOW BUTTON MOVE WITH SCROLLBAR

or remove theme.liquid css part or use javascript scroll part

@include media-query($medium-up) {
// Prevent mobile menu inline styles from overriding desktop styles
// sass-lint:disable no-important
@include transform(translate3d(0, 0, 0));
}

-------------------------------------------------------------------------------------------------------------------

{% if section.settings.next_prev_enable %}

#floater {

position: absolute;

top: 500px;

right: 1px;

-webkit-transition: all 2s ease-in-out;

transition: all 2s ease-in-out;

z-index: 1;

border-radius: 3px 0 0 3px;

padding: 10px;

background-color: #41a6d9;

color: white;

text-align: center;

box-sizing: border-box;

}

.red {

background-color: green;

color: white;

}

/* EOS */

</style>

<style>

.next-prev-product {

position: fixed;

top: 50%;

margin-top: -50px;

z-index: 1;

max-width: 60px;

-webkit-transition: all ease .3s;

-o-transition: all ease .3s;

transition: all ease .3s

}

.next-prev-product:hover {

max-width: 70px

}

.next-prev-product.prev {

left: 0

}

.next-prev-product.next {

right: 0

}

@media (max-width:991px) {

.next-prev-product {

display: none

}

</style>

{%- if collection.previous_product -%}

{%- assign prevProduct = collection.previous_product -%}

</a>

{%- endif -%}

{%- if collection.next_product -%}

{%- assign nextProduct = collection.next_product -%}

</a>

{%- endif -%}

$(window).scroll(function() {

var winScrollTop = $(window).scrollTop();

var winHeight = $(window).height();

var floaterHeight = $('.next-prev-product').outerHeight(true);

var fromBottom = 420;

var top = winScrollTop + winHeight - floaterHeight - fromBottom;

$('.next-prev-product').css({'top': top + 'px'});

});

//]]></script>

{% endif %}

-------------------------------------------------------------------------------------------------------------------

OR USE THIS CODE FOR CREATE SNIPPET next-prev-product.liquid IN SNIPPET FOLDER

next-prev-product.liquid CODE

ADD LINK IN SECTION FOLDER LIQUID FILE

product-template.liquid

{% if section.settings.next_prev_enable %}

{%- include 'next-prev-product' -%}

{% endif %}

BEFORE SCHEMA LINE

{% schema %}

-------------------------------------------------------------------------------------------------------------------

{% if section.settings.next_prev_enable %}

<style>

.FaceBook{

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvhqoBSwprltPxhfic42Q5Rrtim2d2LxsjwkD1X42vaNgpoRa7Uo2HoBPkwfCjBAwiwU2FU_9IsVz_WARDF8FT3EeUnhaOXvzL_NBZ2om2wBzvK_7vEfDszg2P-9nVbwrXupMfHi8euWQo/s1600/FaceBook.png');

background-repeat:no-repeat;

width:43px;

height:43px;

position:fixed;

right:0px;

top:160px;

z-index:1000;

.FaceBook:hover{

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3f4NthN6WAs-PE9opkq_laR07TtB_kYozfeRsRu9VPjrxhVijDbU8OnSdfCIb4t40skSo6Q7zBrdV0-A-dpW_2UM2FNUVetIB9cSz9oxI2GvtaEYqufrObAJuCeRyqIKZkGv-8Hf1KubI/s1600/FaceBookOpen.png');

background-repeat:no-repeat;

width:150px;

height:43px;

position:fixed;

right:0px;

top:160px;

z-index:1100;

.Twitter{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE4c4JuyPnXp8LuQR5wmEruPGIxOa_tDrxX6_6MNJqZK8xsLKBxO99QHqcMarS3-gb5HOTdjSzyPure2L43mgwyRAlaqR9zSGtqNeP_q6xmktdlQ6dJS-8oNg7i3srF3mWD-KFw6hHh1NN/s1600/Twitter.png');
background-repeat:no-repeat;
width:43px;
height:43px;
position:fixed;
right:0px;
top:205px;
z-index:1000;
}
.Twitter:hover{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdCGU4zP0d_5MiXbFGx2wFp5U34wx4R69CjFwc84-ZA4bPXggqk9JCnZCm2e81Ifq7c0X14KBRVkPMd0TENVX2GQDKKi8JpVJWHKugUFCPcKTRPRwk2NenRvEU1FANuq9EMcSBlNZDmbsg/s1600/TwitterOpen.png');
background-repeat:no-repeat;
width:150px;
height:43px;
position:fixed;
right:0px;
top:205px;
z-index:1100;
}
.Google{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwNmZRzVfc8Cjy9pT6h6G6Oq5whlEES0ILCIcQxn4j6l49AbhRYFXcu25C2XHV_yMhuFmBJziFReXbuudy3lj_pA-vWSpx-eb8k1bSofMbUe9zRI2bCRFiKgSeEUfEHkCRbI4vYnj0KMUx/s1600/Google.png');
background-repeat:no-repeat;
width:43px;
height:43px;
position:fixed;
right:0px;
top:250px;
z-index:1000;
}
.Google:hover{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiYEQJXc33wclAuNfVbgwGsozsSBtTrYJtVhGl_KDCVQ6UwqFoOiORc_aBd4YxsO6c38GwHbOn8QxJiAjUNl6YGNVHc3DB-MwDMLrDh6Xk6eSI_aTMNEf9dBsnRxeYjIp6Lu0fZZRH1F-F/s1600/GoogleOpen.png');
background-repeat:no-repeat;
width:150px;
height:43px;
position:fixed;
right:0px;
top:250px;
z-index:1100;
}
.FeedBurner{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ZYJrIBmLvqAmJWN_jvikYeUgmuYRVMYolhVmlzcFz_fl1T9plzNsykzvPcAaMFY-Q-3tBCVdBBJuoAukdKzIQTHdEjLtAjoyGwSzXB7LWrP4huUNTUY6LUeBS4LreouEBBUPdFoKLTpI/s1600/Rss.jpg');
background-repeat:no-repeat;
width:43px;
height:43px;
position:fixed;
right:0px;
top:295px;
z-index:1000;
}
.FeedBurner:hover{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0av0GUD19jdinkFSZC1vViem9dw09f_Iu5M_j_DFettpgbCCAWfCSn6dRb7cnZ3XM_jQqw6u6VvwsZ4xzXgWwpQNxC7homiVQ04zbpAZ6LjZxPQJktkCVWpUUIemMXiPdWldLTlxTxmo7/s1600/RssOpen.png');
background-repeat:no-repeat;
width:150px;
height:43px;
position:fixed;
right:0px;
top:295px;
z-index:1100;
}
</style>

<div class='FaceBook'>
<a href='https://www.facebook.com/style4urban' target='_blank'>
<div class='FaceBook'></div>
</a>
</div>   
<div class='Twitter'>
<a href='https://twitter.com/Style4Urban' target='_blank'>
<div class='Twitter'></div>
</a>
</div>
<div class='Google'>
<a href='https://plus.google.com/u/0/115131756957365821290/posts' target='_blank'>
<div class='Google'></div>
</a>
</div>
<div class='FeedBurner'>
<a href='http://feeds.feedburner.com/FBGadgets' target='_blank'>
<div class='FeedBurner'></div>
</a>

{% endif %}

-------------------------------------------------------------------------------------------------------------------

Search This Blog

Shopify Login

ADD NEXT PREV PRODUCT IN SHOPIFY DEBUT THEME

product-template.liquid

Comments

Post a Comment

Popular posts from this blog

ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY DEBUT THEME 5️⃣

SLICK SLIDER SOURCES

ADD RECENTLY VIEWED PRODUCTS IN SHOPIFY