The customizer integration setting is only available if you are using Shopify.
This setting allows you to choose between loading the Kickflip customizer directly when navigating on your product page or displaying a “Customize” button on your product page that opens the customizer in a modal.
Types of customizer integration
Two types of customizer integrations are available for you to choose from.
1. Customizer only
This is the default integration, it displays the Kickflip customizer on your product page. With this integration, if you want to add a product description under your customizer, you can set it up manually like this.
2. Customize button
This integration replaces the “Add to cart” button by a “Customize” button on your product page. When clicked, the “Customize” button opens a modal containing the Kickflip customizer. Using this integration, you can have a product page that includes your product description, reviews, images, etc.
Modifying your customizer integration
Within your Kickflip dashboard, open the Online Stores section and click on your online store.
Scroll to the bottom of the page to the Customizer integration section.
Select the Shopify theme you want to update in the dropdown menu and click on the Change integration button
Select the integration you want to use.
Troubleshooting
*** Please note that depending on your Shopify Theme, the code might be slightly different than the one in the following tutorial. If you are not familiar with coding, we highly recommend to ask a Shopify web developer such as Carson or StoreTasker to help you out. ***
Since changing the customizer integration requires Kickflip to edit some Shopify template files (.liquid files), some problems may occur. The success of the process depends on your Shopify themes. We try to support the majority of themes, but some errors can occur, if you are using a custom Shopify theme for example. You still have the possibility to manually install the Customize button if the installation does not work with your theme.
My product page still shows an “Add to cart”
This means the installation process was not able to locate your product template file. This is the file that contains the “Add to cart” button. You will have to follow the manual installation steps below.
My quantity input is still displaying
This means the installation process was not able to locate the quantity input. You will have to manually add the attribute data-mczr=”quantity_input”. You will have to follow the manual installation steps below.
My ‘Buy it now’ button is still displaying
This means the installation process was not able to locate the Buy it now button. You will have to manually add the attribute data-mczr=”buy_it_now”. You will have to follow the manual installation steps below.
The customize button looks weird
Since we replaced the “Add to cart” button with the Customize button, it should look the same. If for some reason you want to change the styling of this button, you can add CSS properties to the class mczr-customize-button or the id product-mczr-modal-button.
Manually installing the “Customize” button
In your Shopify Theme > Action > Edit Code page, under the folder Templates, rename product.mczr.liquid to product.bak.mczr.liquid
Locate the product form in your Sections folder
This is the file containing the Add to cart button. Typically, it’s one of the following files but it could be different depending on your Shopify theme:
sections/main-product.liquid
sections/product-template.liquid
sections/product-page.liquid
sections/template-product.liquid
snippets/single-product.liquid
snippets/product-form.liquid
In the product template you found in the previous step, add the following attributes:
For the add to cart button, add the
data-mczr="customize_button"attribute
I.e.:
<input type="submit" name="button" class="add clearfix" value="{{ 'products.product.add_to_cart' | t }}" data-mczr="customize_button" />For the quantity input, add the
data-mczr="quantity_input"attributeFor the buy it now button, add the
data-mczr="buy_it_now"attributeOptionally, you can add the
data-mczr="hidden"attribute on an element to hide it.
At the end of the product template, add the following line:
{% render 'snippets/customize-button.mczr.liquid' %}
Edit your custom products in Shopify to apply the 'Default product' Theme template:
You should be ready to rock now!
Manually uninstalling the “Customize” button
Rename product.bak.mczr.liquid to product.mczr.liquid
Delete the customize-button.mczr.liquid file
Locate the product form in the files
This depends on your theme. Typically, it’s one of the following files:
sections/main-product.liquid
sections/product-template.liquid
sections/product-page.liquid
sections/template-product.liquid
snippets/single-product.liquid
snippets/product-form.liquid
In the product template, remove the following attributes:
data-mczr="customize_button"data-mczr="quantity_input"data-mczr="buy_it_now"data-mczr="hidden"
At the end of the product template, remove the following line:
{% render 'snippets/customize-button.mczr.liquid' %}
You should be ready to rock now!
Frequently Asked Questions
Can I have both the Customize button and Add to cart buttons ?
Right now, we replace the Add to cart button with the Customize button. If this is something you are interested in, feel free to contact us.
Can the customizer be embedded in the page instead of displayed in a modal ?
At this moment, we only support the display of the customizer in a modal, but we plan on adding more options in the future. If this is something you are interested in, feel free to contact us.
Can I translate or rename the Customize button?
Yes! The Customize button is supported by all the top translation apps offered on Shopify. If you have only one language (other than English), you could also manually edit the customize-button.mczr.liquid file.