If your products exceeded the variant limitation of ShopBase, you will have to divide them into separate products. After that, you may want to group multiple products again as one product link. This scripts will helps.

Especially if your products are imported from Gearment, using this scripts will help to combine products and show as variants

A. How it shows

Different products (T-shirt, Tanktop, Phone cases ..) can be combined as different styles of a single product

On storefront
B. Steps

1. Open the additional scripts board

Go to your store admin >> Online Stores >> Preferences >> Additional scripts >> Body tab.



2. Add the below scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function addDomVariant() {
var domVariants = document.getElementById('product-variants');
var domPrice = document.querySelector('div.product__price');
if (domVariants === null && domPrice) {
var newElVariants = document.createElement('div');
newElVariants.setAttribute('id', 'product-variants');
domPrice.parentNode.insertBefore(newElVariants, domPrice.nextSibling);
}
}
function addOption() {
if ( jQuery( ".product__description #selectlinkathore" ).length ) {
if ( jQuery( "#product-variants" ).length ) {
var html_modelcombine = "";
html_modelcombine += '<div class="productvariants-wrapper">';
html_modelcombine += '<div class="productvariant-label mb8"><span style="font-weight: bold;">Style:</span></div>';
html_modelcombine += '<div class="flex flex-wrap align-center" id="gmstyle_combine" style="display:block">';
html_modelcombine += '</div></div>';

setTimeout(function(){
jQuery( "#product-variants" ).prepend(html_modelcombine);
var opt_selectlinkathore = jQuery('.product__description #selectlinkathore').first();
var wrap_opt_selectlinkathore = "";
jQuery('.product__description #selectlinkathore:eq(0) > option').each(function() {
var opt_gmchecked = "";
var opt_textstyle = $(this).text();
var opt_urlstyle = $(this).val();
if( jQuery(this).is(':checked'))
{
opt_gmchecked='product__option--active';
}
wrap_opt_selectlinkathore += '<button onclick="window.location = \''+opt_urlstyle+'\'" arialabel="Select '+opt_textstyle+'" class="product__option mr8 mb8 '+opt_gmchecked+'">'+opt_textstyle+'</button>';
});
jQuery("#product-variants #gmstyle_combine").html(wrap_opt_selectlinkathore);
}, 2000);
}
}
}
document.addEventListener('DOMContentLoaded', function() {
window.sbsdk.page.onLoad(function() {
var context = window.sbsdk.page.getContext();
if (context.type === 'product') {
addDomVariant();
addOption();
}
})
});
</script>


That's all and you're good to go.
Was this article helpful?
Cancel
Thank you!