[Buy button] how to display all products on a same page?

Solved
wilowood
New Member
1 0 0

Hello,

Need advice urgently. 

I have created a page with buy button feature. A simple page where customer knows the products well, no need explanation, just to give a quick order process.. The problem is that I have more than 100 products, and the page only shows 20 products and the customer needs to click "next page" many times to see the whole range of products. 

Any way to show the entire products in one page? The script is as following,

 

<div id="collection-component-1606117880558"></div>
<script type="text/javascript">// <![CDATA[
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src=scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'jin-global.myshopify.com',
storefrontAccessToken: '42f31ff1b3154583233e9cfe8a27c87e',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('collection', {
id: '210748768416',
node: document.getElementById('collection-component-1606117880558'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px",
"width": "calc(25% - 20px)"
},
"img": {
"height": "calc(100% - 15px)",
"position": "absolute",
"left": "0",
"right": "0",
"top": "0"
},
"imgWrapper": {
"padding-top": "calc(75% + 15px)",
"position": "relative",
"height": "0"
}
},
"title": {
"font-size": "14px"
},
"button": {
"font-size": "13px",
"padding-top": "14.5px",
"padding-bottom": "14.5px",
":hover": {
"background-color": "#5fa999"
},
"background-color": "#6abcaa",
":focus": {
"background-color": "#5fa999"
},
"border-radius": "8px",
"padding-left": "7px",
"padding-right": "7px"
},
"quantityInput": {
"font-size": "13px",
"padding-top": "14.5px",
"padding-bottom": "14.5px"
},
"price": {
"font-size": "15px"
},
"compareAt": {
"font-size": "12.75px"
},
"unitPrice": {
"font-size": "12.75px"
}
},
"contents": {
"button": false,
"buttonWithQuantity": true
},
"text": {
"button": "Add to cart"
}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-size": "13px",
"padding-top": "14.5px",
"padding-bottom": "14.5px",
":hover": {
"background-color": "#5fa999"
},
"background-color": "#6abcaa",
":focus": {
"background-color": "#5fa999"
},
"border-radius": "8px",
"padding-left": "7px",
"padding-right": "7px"
},
"quantityInput": {
"font-size": "13px",
"padding-top": "14.5px",
"padding-bottom": "14.5px"
}
},
"text": {
"button": "Add to cart"
}
},
"cart": {
"styles": {
"button": {
"font-size": "13px",
"padding-top": "14.5px",
"padding-bottom": "14.5px",
":hover": {
"background-color": "#5fa999"
},
"background-color": "#6abcaa",
":focus": {
"background-color": "#5fa999"
},
"border-radius": "8px"
}
},
"text": {
"total": "Subtotal",
"button": "Checkout"
},
"contents": {
"note": true
},
"popup": false
},
"toggle": {
"styles": {
"toggle": {
"background-color": "#6abcaa",
":hover": {
"background-color": "#5fa999"
},
":focus": {
"background-color": "#5fa999"
}
},
"count": {
"font-size": "13px"
}
}
}
},
});
});
}
})();
// ]]></script>

 

the sample page is ("https://jin-global.com/pages/ks-link-order")

Please help! Your help is very much appreciated. Thank you.

0 Likes
Syed_Mustafa
Shopify Partner
305 6 22

This is an accepted solution.

Let me do this for you if interested so please feel free to mail me anytime. Thanks and Best Regards  

If helpful then please Like and Accept Solution.
Do you need custom changes on the store or want a complete speed optimization? Hire me.
Need a dropshipping expert or wants to alive your dead dropshipping store?
Feel free to contact me at Syedmustafanadeem99@gmail.com
0 Likes