ADD NEXT PREV PRODUCT IN SHOPIFY

-

ADD NEXT PREV PRODUCT IN SHOPIFY

-------------------------------------------------------------------------------------------------------------------
ADD NEXT PREV PRODUCT IN SHOPIFY
ReadMore:
-------------------------------------------------------------------------------------------------------------------
STEP :0
ADD SNIPPET LINK LINE IN product-template.liquid AFTER END CASE
-------------------------------------------------------------------------------------------------------------------
{% endcase %}
{% if section.settings.AddNextPrevProductId %}
{% include 'AddNextPrevProductSnippet' %}
{% endif %}

//=== ADD THIS PART IN SCHEMA SETTING ===//
{
"type": "checkbox",
"id": "AddNextPrevProductId",
"label": "AddNextPrevProductShow🛒",
"default": false
},
-------------------------------------------------------------------------------------------------------------------
STEP :1
ADD SNIPPET AddNextPrevProductSnippet.liquid IN SNIPPET FOLDER
-------------------------------------------------------------------------------------------------------------------
{{'bootstrap.min.css' | asset_url | stylesheet_tag }}
{{'AddNextPrevProduct.css' | asset_url | stylesheet_tag }}
​
<div class="prod_extended" >
<div class="col-sm-6 justify-content-end align-items-center d-sm-flex d-none">
{% assign found_a_collection = false %}
{% for c in product.collections %}
{% if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' and c.all_products_count > 1 %}
{% assign found_a_collection = true %}
{% assign collection = c %}
{% endif %}
{% endfor %}
<div class="arrows-product">
{% assign current = product.id %}
{% if collection and collection.all_products_count >1 %}
{% for product in collection.products %}
{% assign id = product.id %}
{% if id == current %}
{% if forloop.last %}
{% assign next = 0 %}
{% else %}
{% assign next = forloop.index %}
{% endif %}
{% assign prev = forloop.index |minus:2 %}
{% endif %}
{% endfor %}
<div class="prev_prod"  >
<a href="{{prevProduct.url}}">{% include 'icon-chevron-left' %}PREV</a>
<div class="position-absolute img-prev">
<a href="{{collection.products[prev].url}}">
<img src="{{collection.products[prev].featured_image.src | img_url:"80x80"}}" class="">
</a>
<div class="info-prod">
<a href="{{collection.products[prev].url}}">{{collection.products[prev].title}}</a>
<p >{{collection.products[prev].price|money}}</p>
</div>
</div>
</div>
​
<div class="next_prod"  >
<a href="{{collection.products[next].url}}">NEXT{% include 'icon-chevron-right' %}</a>
<div class="img-next">
<a href="{{collection.products[next].url}}">
<img src="{{collection.products[next].featured_image.src | img_url:"80x80"}}" class="">
</a>
<div class="info-prod">
<a href="{{collection.products[next].url}}">{{collection.products[next].title}}</a>
<p >{{collection.products[next].price|money}}</p>
</div>
</div>
</div>  
{% else %}
<a href="#"><i class="prev flaticon-left-arrow position-relative"></i></a>
<a href="#"><i class="next flaticon-right-arrow position-relative"></i></a>
{% endif %}
</div>
</div>
</div>
-------------------------------------------------------------------------------------------------------------------
STEP :2
ADD CSS FILE bootstrap.min.css IN ASSETS FOLDER
-------------------------------------------------------------------------------------------------------------------
/*https://getbootstrap.com/docs/4.1/getting-started/download
https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css
This Code is Taken From BootStrap 4.1.3
*/
.clearfix::after {
display: block;
clear: both;
content: ""
}
.d-none {
display: none!important
}
.d-inline {
display: inline!important
}
.d-inline-block {
display: inline-block!important
}
.d-block {
display: block!important
}
.d-table {
display: table!important
}
.d-table-row {
display: table-row!important
}
.d-table-cell {
display: table-cell!important
}
.d-flex {
display: -ms-flexbox!important;
display: flex!important
}
.d-inline-flex {
display: -ms-inline-flexbox!important;
display: inline-flex!important
}
@media (min-width: 576px) {
.d-sm-none {
display:none!important
}
.d-sm-inline {
display: inline!important
}
.d-sm-inline-block {
display: inline-block!important
}
.d-sm-block {
display: block!important
}
.d-sm-table {
display: table!important
}
.d-sm-table-row {
display: table-row!important
}
.d-sm-table-cell {
display: table-cell!important
}
.d-sm-flex {
display: -ms-flexbox!important;
display: flex!important
}
.d-sm-inline-flex {
display: -ms-inline-flexbox!important;
display: inline-flex!important
}
}
@media (min-width: 768px) {
.d-md-none {
display:none!important
}
.d-md-inline {
display: inline!important
}
.d-md-inline-block {
display: inline-block!important
}
.d-md-block {
display: block!important
}
.d-md-table {
display: table!important
}
.d-md-table-row {
display: table-row!important
}
.d-md-table-cell {
display: table-cell!important
}
.d-md-flex {
display: -ms-flexbox!important;
display: flex!important
}
.d-md-inline-flex {
display: -ms-inline-flexbox!important;
display: inline-flex!important
}
}
@media (min-width: 992px) {
.d-lg-none {
display:none!important
}
.d-lg-inline {
display: inline!important
}
.d-lg-inline-block {
display: inline-block!important
}
.d-lg-block {
display: block!important
}
.d-lg-table {
display: table!important
}
.d-lg-table-row {
display: table-row!important
}
.d-lg-table-cell {
display: table-cell!important
}
.d-lg-flex {
display: -ms-flexbox!important;
display: flex!important
}
.d-lg-inline-flex {
display: -ms-inline-flexbox!important;
display: inline-flex!important
}
}
@media (min-width: 1200px) {
.d-xl-none {
display:none!important
}
.d-xl-inline {
display: inline!important
}
.d-xl-inline-block {
display: inline-block!important
}
.d-xl-block {
display: block!important
}
.d-xl-table {
display: table!important
}
.d-xl-table-row {
display: table-row!important
}
.d-xl-table-cell {
display: table-cell!important
}
.d-xl-flex {
display: -ms-flexbox!important;
display: flex!important
}
.d-xl-inline-flex {
display: -ms-inline-flexbox!important;
display: inline-flex!important
}
}
@media print {
.d-print-none {
display: none!important
}
.d-print-inline {
display: inline!important
}
.d-print-inline-block {
display: inline-block!important
}
.d-print-block {
display: block!important
}
.d-print-table {
display: table!important
}
.d-print-table-row {
display: table-row!important
}
.d-print-table-cell {
display: table-cell!important
}
.d-print-flex {
display: -ms-flexbox!important;
display: flex!important
}
.d-print-inline-flex {
display: -ms-inline-flexbox!important;
display: inline-flex!important
}
}
.flex-row {
-ms-flex-direction: row!important;
flex-direction: row!important
}
.flex-column {
-ms-flex-direction: column!important;
flex-direction: column!important
}
.flex-row-reverse {
-ms-flex-direction: row-reverse!important;
flex-direction: row-reverse!important
}
.flex-column-reverse {
-ms-flex-direction: column-reverse!important;
flex-direction: column-reverse!important
}
.flex-wrap {
-ms-flex-wrap: wrap!important;
flex-wrap: wrap!important
}
.flex-nowrap {
-ms-flex-wrap: nowrap!important;
flex-wrap: nowrap!important
}
.flex-wrap-reverse {
-ms-flex-wrap: wrap-reverse!important;
flex-wrap: wrap-reverse!important
}
.flex-fill {
-ms-flex: 1 1 auto!important;
flex: 1 1 auto!important
}
.flex-grow-0 {
-ms-flex-positive: 0!important;
flex-grow: 0!important
}
.flex-grow-1 {
-ms-flex-positive: 1!important;
flex-grow: 1!important
}
.flex-shrink-0 {
-ms-flex-negative: 0!important;
flex-shrink: 0!important
}
.flex-shrink-1 {
-ms-flex-negative: 1!important;
flex-shrink: 1!important
}
.justify-content-start {
-ms-flex-pack: start!important;
justify-content: flex-start!important
}
.justify-content-end {
-ms-flex-pack: end!important;
justify-content: flex-end!important
}
.justify-content-center {
-ms-flex-pack: center!important;
justify-content: center!important
}
.justify-content-between {
-ms-flex-pack: justify!important;
justify-content: space-between!important
}
.justify-content-around {
-ms-flex-pack: distribute!important;
justify-content: space-around!important
}
.align-items-start {
-ms-flex-align: start!important;
align-items: flex-start!important
}
.align-items-end {
-ms-flex-align: end!important;
align-items: flex-end!important
}
------------------------------------------------------------------------------
STEP :3
ADD CSS FILE AddNextPrevProduct.css IN ASSETS FOLDER
------------------------------------------------------------------------------
.prod_extended .arrows-product,.product_sidebar .arrows-product {
position: relative;
display: flex;
padding: 20px 0 30px
}
.prod_extended .arrows-product:before,.product_sidebar .arrows-product:before {
content: '';
height: 20px;
width: 1px;
background: #d6d6d6;
position: absolute;
left: 50%;
transform: translateX(-50%)
}
.prod_extended .arrows-product .prev_prod,.product_sidebar .arrows-product .prev_prod {
font-size: 9px;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
padding-right: 15px;
position: relative
}
.prod_extended .arrows-product .prev_prod i,.product_sidebar .arrows-product .prev_prod i {
font-size: 12px;
font-weight: 600;
padding-right: 12px
}
.prod_extended .arrows-product .prev_prod .img-prev,.product_sidebar .arrows-product .prev_prod .img-prev {
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
background-color: #fff;
-webkit-box-shadow: 0 3px 16px 0 rgba(0,0,0,.07);
-moz-box-shadow: 0 3px 16px 0 rgba(0,0,0,.07);
box-shadow: 0 3px 16px 0 rgba(0,0,0,.07);
border: 1px solid #f4f4f4;
position: absolute;
top: 100%;
right: 0;
visibility: hidden;
opacity: 0;
min-width: 240px;
-webkit-transition: -webkit-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
-o-transition: -o-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
-moz-transition: -moz-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
transition: transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px)
}
.prod_extended .arrows-product .prev_prod .img-prev .info-prod,.product_sidebar .arrows-product .prev_prod .img-prev .info-prod {
margin-left: 10px
}
.prod_extended .arrows-product .prev_prod .img-prev .info-prod a,.product_sidebar .arrows-product .prev_prod .img-prev .info-prod a {
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none
}
.prod_extended .arrows-product .prev_prod .img-prev .info-prod p,.product_sidebar .arrows-product .prev_prod .img-prev .info-prod p {
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
color: #83868c
}
.prod_extended .arrows-product .prev_prod:hover .img-prev,.product_sidebar .arrows-product .prev_prod:hover .img-prev {
visibility: visible;
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.prod_extended .arrows-product .next_prod,.product_sidebar .arrows-product .next_prod {
font-size: 9px;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
padding-left: 15px;
position: relative
}
.prod_extended .arrows-product .next_prod i,.product_sidebar .arrows-product .next_prod i {
font-size: 12px;
font-weight: 600;
padding-left: 12px
}
.prod_extended .arrows-product .next_prod .img-next,.product_sidebar .arrows-product .next_prod .img-next {
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
background-color: #fff;
-webkit-box-shadow: 0 3px 16px 0 rgba(0,0,0,.07);
-moz-box-shadow: 0 3px 16px 0 rgba(0,0,0,.07);
box-shadow: 0 3px 16px 0 rgba(0,0,0,.07);
border: 1px solid #f4f4f4;
position: absolute;
top: 100%;
right: 0;
visibility: hidden;
opacity: 0;
min-width: 240px;
-webkit-transition: -webkit-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
-o-transition: -o-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
-moz-transition: -moz-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
transition: transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px)
}
.prod_extended .arrows-product .next_prod .img-next .info-prod,.product_sidebar .arrows-product .next_prod .img-next .info-prod {
margin-left: 10px
}
.prod_extended .arrows-product .next_prod .img-next .info-prod a,.product_sidebar .arrows-product .next_prod .img-next .info-prod a {
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none
}
.prod_extended .arrows-product .next_prod .img-next .info-prod p,.product_sidebar .arrows-product .next_prod .img-next .info-prod p {
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
color: #83868c
}
.prod_extended .arrows-product .next_prod:hover .img-next,.product_sidebar .arrows-product .next_prod:hover .img-next {
visibility: visible;
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
------------------------------------------------------------------------------

Comments

  1. Stephenie PetersonNovember 2, 2021 at 12:25 AM

    Really impressed with the article you supplied. It was quite informative, efficient, and simple to use. Building a custom Build Custom Shopify Theme From Scratch is a big commitment for entrepreneurs that pays off in the long run It is the ideal solution for developing brands and scaling organizations. Meanwhile, small businesses will profit more from the preconfigured Shopify theme, which takes nearly no time to set up.

    ReplyDelete

Post a Comment

Popular posts from this blog

ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY DEBUT THEME 5️⃣

-
Image
  ------------------------------------------------------------------------------------------------------------------------ ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY READ MORE https://youtu.be/acTT5_lkrCg https://stackoverflow.com/questions/45477730/ajax-jquery-autocomplete-in-search-box-shopify https://stackoverflow.com/questions/39593169/sorting-json-results-by-10-max-results DOWNLOAD: https://fbgadgets.myshopify.com/admin/files/0e841afc73cd3152ebf447feabe7abfa/theme_export__fbgadgets-myshopify-com-shopify-debut-theme__05JUL2022-0654am.zip/download ------------------------------------------------------------------------------------------------------------------------ 1) NEEDS JQUERY FILE WITHOUT ASYNC OR DEFFER IN LINK LIKE <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> --> OR CHANGE VENDOR JS FILE LINK IN  LAYOUT>THEME LIQUID FILE <script src="{{ 'vendor.js' | asset_url }}"></script> ...
Read more