How to connect store from Customall to your platform?
Our app is designed to work with multiple e-commerce platforms. Currently, Customall supports integration with Shopify, Shopbase, and Shoplazza. In this guide, we provide a step-by-step walkthrough on how to connect Customall to your platform.
Open the Settings menu and navigate to Online Stores, then click on the Add New button.
Select a platform from the list of available options.
Click Install app to be redirected to the Shopify App Store.
Click Install to add Customall to your Shopify account.
Review the privacy details, and finally, click Install 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 Shopify store, you must enable the Customall theme.
Follow these steps:
Hover over the Action button and select Enable Customall Theme.
You will be redirected to the Shopify platform. Simply click Save to enable the Customall theme.
Additionally, you can enable the theme via the Customall Dashboard by clicking Enable Shopify Theme in the Connect your store section or Enable now in the Enable for Shopify Store section.
Choose your store and theme, then click the Preview in Theme button. This will redirect you to the Shopify platform, where you can enable the Customall theme.
Enter the title and domain of your store, then click OK.
You will be redirected to your Shopbase account. Review the privacy details, and 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.
Enter the title and domain of your store, then click OK.
You will be redirected to your Shoplazza account. Review the privacy details, and 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.
Open the Settings menu and navigate to Online Stores, then click on the Add New button.
Select a platform from the list of available options.
Shopify Platform
Click Install app to be redirected to the Shopify App Store.
Click Install to add Customall to your Shopify account.
Review the privacy details, and finally, click Install 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 Shopify store, you must enable the Customall theme.
Follow these steps:
Hover over the Action button and select Enable Customall Theme.
You will be redirected to the Shopify platform. Simply click Save to enable the Customall theme.
Additionally, you can enable the theme via the Customall Dashboard by clicking Enable Shopify Theme in the Connect your store section or Enable now in the Enable for Shopify Store section.
Choose your store and theme, then click the Preview in Theme button. This will redirect you to the Shopify platform, where you can enable the Customall theme.
Shopbase Platform
Enter the title and domain of your store, then click OK.
You will be redirected to your Shopbase account. Review the privacy details, and 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
<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.
Shoplazza Platform
Enter the title and domain of your store, then click OK.
You will be redirected to your Shoplazza account. Review the privacy details, and 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.
Updated on: 10/10/2024
Thank you!