Integrating your customizer in Shopify

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

1. Within your Kickflip dashboard, open the Online Stores section and click on your online store.

2. Scroll to the bottom of the page to the Customizer integration section.

3. Select the Shopify theme you want to update in the dropdown menu and click on the Change integration button

4. 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

1. In your Shopify Theme > Action > Edit Code page, under the folder Templates, rename product.mczr.liquid to product.bak.mczr.liquid

2. Locate the product form in your Sections folder

   1. 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. You can find this in the folder Templates > cart.json or Templates > cart.liquid:

      • sections/main-product.liquid

      • sections/product-template.liquid

      • sections/product-page.liquid

      • sections/template-product.liquid

      • snippets/single-product.liquid

      • snippets/product-form.liquid

3. In the product template you found in the previous step, add the following attributes:

   1. For the add to cart button, add the data-mczr=”customize_button” attribute

   2. For the quantity input, add the data-mczr=”quantity_input” attribute

   3. For the buy it now button, add the data-mczr=”buy_it_now” attribute

4. At the end of the product template, add the following line:

   1. {% render 'snippets/customize-button.mczr.liquid' %}

5. Edit your custom products in Shopify to apply the 'Default product' Theme template:

   

6. You should be ready to rock now!

Manually uninstalling the “Customize” button

1. Rename product.bak.mczr.liquid to product.mczr.liquid

2. Delete the customize-button.mczr.liquid file

3. Locate the product form in the files

   1. 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

4. In the product template, remove the following attributes:

   1. data-mczr=”customize_button”

   2. data-mczr=”quantity_input”

   3. data-mczr=”buy_it_now”

5. At the end of the product template, remove the following line:

   1. {% render 'snippets/customize-button.mczr.liquid' %}

6. 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, you can do that by editing customize-button.mczr.liquid or with a third-party translation app.