How to Install Customall on Shopbase Platform?
Welcome to Customall! Currently, Customall is compatible with multiple platforms. In this article, we will walk you through the process of installing Customall on Shopbase.
To add Customall app to your store on the Shopbase platform, follow these steps:
Login to your Shopbase account and search for Customall app by clicking here.
Next, click Install this app.
Review the privacy details, and finally, click Install app to complete the installation.
After installation, you will be redirected to the Customall store screen. Here, you will see the store you have just added.
To display the personalized option on your storefront, you will need to add a script to your store’s theme. This script embeds the Customall SDK into Shopbase, allowing the personalized option to appear on your storefront. Follow these steps:
Go to Online Store → Design → Customize.
In the top left corner, select Website settings → General.
Scroll down to the Additional Scripts section, paste the following code into the Inside <head> tag area.
Make sure to paste it at the bottom without deleting any of the existing code, as removing it could impact other apps or settings you've already set up
Since each theme has different selectors, you will need to adjust some parts of the code to fit your specific theme.
Understanding the Parts of the Code:
window.sliderEl: Refers to the section with the product image slides.
window.productFormEl: Refers to the section where product options (like size or color) are displayed.
window.productPriceEl: Refers to the sale price of the product.
window.productComparePriceEl: Refers to the original price (before discount).
window.productPriceSavingEl: Refers to the amount saved due to a discount.
window.listHideElement: Refers to elements you want to hide (e.g., Add to Cart button, quantity selector, dynamic checkout, or sticky Add to Cart button).
How to Find These Parts in Your Website:
For sliderEl and productFormEl (slides and product options):
- Right-click on the section with the product images or options → Select Inspect from the menu.
- Look for the parent section tag that contains the element you are inspecting
- Copy the block-id and replace to the code above
For price-related parts (sale price, original price, savings):
- Right-click on the price you want to modify and choose Inspect.
- Find a unique class that represents this price.
- Copy that class and replace it in the code.
Besides that, you must hide the sticky Add to Cart button, quantity selector, and Add to Cart options in your store theme to avoid any errors. If left as is, changes to quantity or variants could cause a mismatch between your theme and the Customall theme. These buttons are not managed by Customall, so if clicked, the personalization options won’t appear.
Finally, click Save in the top right corner to complete the setup.
If you have any questions or need further assistance, please do not hesitate to contact our support team.
Installation
To add Customall app to your store on the Shopbase platform, follow these steps:
Login to your Shopbase account and search for Customall app by clicking here.
Next, click Install this app.
Review the privacy details, and finally, click Install app to complete the installation.
After installation, you will be redirected to the Customall store screen. Here, you will see the store you have just added.
Enable Customall Theme
To display the personalized option on your storefront, you will need to add a script to your store’s theme. This script embeds the Customall SDK into Shopbase, allowing the personalized option to appear on your storefront. Follow these steps:
Go to Online Store → Design → Customize.
In the top left corner, select Website settings → General.
Scroll down to the Additional Scripts section, paste the following code into the Inside <head> tag area.
Make sure to paste it at the bottom without deleting any of the existing code, as removing it could impact other apps or settings you've already set up
<style id="customall-inline-style">
.ctm-skeleton-box {
display: inline-block;
height: 1em;
position: relative;
overflow: hidden;
background-color: #DDDBDD;
border-radius: 6px;
}
.ctm-skeleton-box::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
animation: shimmer 3s infinite;
content: '';
}
.product-cart__property, .checkout-product__property{
display: none !important;
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
.nf-product-single button.btn-add-to-cart {
height: auto;
}
</style>
<script>
window.sliderEl = "[block-id=Qs7Ry2]";
window.productFormEl = "[block-id=OjNInU]";
window.productPriceEl = ".price-span";
window.productComparePriceEl = ".price-original";
window.productPriceSavingEl = ".price-sale-msg";
window.listHideElement = ['[block-id=D5hDDQ]', '.sticky__product-actions', '.sticky__product-info', '[block-id="LOkezz"]']
window.sbsdk.ready(function() {
window.sbsdk.page.onContextUpdate(function(context) {
if (context.type === 'product') {
if (window.sbsdk?.product?.current()?.vendor === "customall") {
// inject script by creating a new script element
var script = document.createElement('script');
script.src = 'https://apis-v2.customall.io/app/shopbase.js';
document.head.appendChild(script);
} else if (document.querySelector('.customall-wrapper')) {
document.querySelector('#customall-inline-style').remove();
window.location.reload();
}
}
});
window.sbsdk.checkout.onCompleteOrder(function(payload) {
localStorage.removeItem('cartToken')
localStorage.removeItem('cartCheckoutToken')
})
});
</script>Since each theme has different selectors, you will need to adjust some parts of the code to fit your specific theme.
Understanding the Parts of the Code:
window.sliderEl: Refers to the section with the product image slides.
window.productFormEl: Refers to the section where product options (like size or color) are displayed.
window.productPriceEl: Refers to the sale price of the product.
window.productComparePriceEl: Refers to the original price (before discount).
window.productPriceSavingEl: Refers to the amount saved due to a discount.
window.listHideElement: Refers to elements you want to hide (e.g., Add to Cart button, quantity selector, dynamic checkout, or sticky Add to Cart button).
How to Find These Parts in Your Website:
For sliderEl and productFormEl (slides and product options):
- Right-click on the section with the product images or options → Select Inspect from the menu.
- Look for the parent section tag that contains the element you are inspecting
- Copy the block-id and replace to the code above
For price-related parts (sale price, original price, savings):
- Right-click on the price you want to modify and choose Inspect.
- Find a unique class that represents this price.
- Copy that class and replace it in the code.
Besides that, you must hide the sticky Add to Cart button, quantity selector, and Add to Cart options in your store theme to avoid any errors. If left as is, changes to quantity or variants could cause a mismatch between your theme and the Customall theme. These buttons are not managed by Customall, so if clicked, the personalization options won’t appear.
Finally, click Save in the top right corner to complete the setup.
If you have any questions or need further assistance, please do not hesitate to contact our support team.
Updated on: 20/11/2024
Thank you!