Once your BigCommerce store is connected, if you create a product in Kickflip and connect it to your store, Kickflip will create a product page in BigCommerce that includes your customizer.
The Kickflip dashboard in BigCommerce is where you can manage your integration settings and control how the customizer appears on your product pages.
TIP
Most Stencil themes work without any extra setup.
Managing your BigCommerce integration
To open the Kickflip dashboard, log in to your BigCommerce admin and go to Apps › My apps, then open Kickflip. Once installed, Kickflip also appears directly in the Apps menu of the sidebar.
The dashboard is organized in cards, from top to bottom:
Card | What it's for |
Connection status | Shows whether your store is connected to Kickflip. Click Open Kickflip to go to the Kickflip admin. |
Script | Shows whether the Kickflip script is active on your storefront. Status must be INSTALLED for the customizer to appear. See How the Kickflip script works on BigCommerce. |
Integration type | Choose how the customizer appears on your product pages. |
Customize Button settings or Customizer Only settings | Adjust the look of the integration type you selected. |
Product advanced settings | Manually tell Kickflip where to place the customizer, if your theme needs it. |
Cart advanced settings | Manually tell Kickflip where your cart is, if your theme needs it. |
NOTE
The integration settings only appear once the store is CONNECTED and the script is INSTALLED. If you don't see them, check the first two cards (see Installing the Kickflip app on BigCommerce).
Making Kickflip products visible on your storefront
When you connect a Kickflip product to your BigCommerce store, Kickflip creates the matching product in BigCommerce as hidden, so you can review it before selling it. To publish it:
In your BigCommerce admin, go to Products › All products and open the product created by Kickflip. You can also click the product name next to your store in Kickflip to open it directly.
Turn on Visible on storefront.
Under Categories, assign the product to the category where it should appear.
Click Save.
NOTE
In Kickflip, a green check next to the linked product means it's visible on your storefront. An orange one means it's still hidden. Learn more about connecting products to your store.
Modifying your BigCommerce integration settings
Which products do these settings affect?
The BigCommerce integration settings are global: they apply to every Kickflip product in your store. Products that aren’t connected to Kickflip keep their regular product pages and aren’t affected by these settings.
Saving your changes
As soon as you change a setting, a bar appears at the bottom of the page. Click Save to apply your changes to your storefront, or Cancel to discard them.
Choosing how the customizer appears
In the Integration type card, choose how customers reach the customizer.
Customize button (default)
Kickflip replaces your theme’s Add to Cart button with a Customize button that opens the customizer in a modal. The rest of your product page (images, description, reviews) stays as it is. Kickflip also hides the product options and the quantity field, since customers choose everything in the customizer.
Customize Button settings
Setting | Description |
Button label | Text shown on the button that opens the customizer. Default: Customize. If you leave it empty, Kickflip uses Customize.To translate it, see Translating the Customize button in BigCommerce. |
Custom button class | By default, the Customize button copies the look of your theme's Add to Cart button. To style it differently, enter one or more CSS classes from your theme, separated by a space. |
Modal settings
Setting | Description | Range | Default |
Width (%) | Width of the popup, as a percentage of the screen width. | 50 – 100 | 85 |
Height (%) | Height of the popup, as a percentage of the screen height. | 50 – 100 | 85 |
Corner radius (px) | Rounds the corners of the popup. | 0 – 40 | 0 |
Close button color | Color of the button that closes the popup. | — | White |
TIP
Set both Width and Height to 100% to open the customizer full screen.
Customizer only
Kickflip embeds the customizer directly on your product page, replacing the main product section so customers can start personalizing as soon as the page loads, without clicking a separate button. Depending on your theme, the replaced section can include most of the product page content: images, options, the Add to Cart button, and sometimes the description.
Use Advanced mode to choose exactly where the customizer goes.
Customizer Only settings
Setting | Description | Range | Default |
Height (%) | Height of the customizer, as a percentage of the screen height. | 50 – 100 | 80 |
Horizontal padding (px) | Space on the left and right of the customizer. | 0 – 100 | 0 |
Vertical padding (px) | Space above and below the customizer. | 0 – 100 | 0 |
Advanced mode
Kickflip automatically finds the right elements on your product page for most themes. If the integration doesn't display correctly, for example with a heavily customized theme, you can tell Kickflip exactly which elements to use.
IMPORTANT
Only use advanced mode if the integration isn't working properly with your theme. You'll need to know the CSS selectors of your theme's elements.
Product advanced settings
In advanced mode, Kickflip no longer hides elements automatically. Use CSS selectors to specify which button to replace with a **Customize** button and which elements to hide on your product page.
In the Product advanced settings card, turn on Use advanced mode.
Fill in the fields described below.
Click Save, then check a customizable product on your storefront.
Setting | Shown in mode | Description |
Add to Cart button selector | Customize button | CSS selector of your theme's Add to Cart button. Kickflip hides it and adds the Customize button in its place. |
Customizer placement selector | Customizer only | CSS selector of the element the customizer should go in. Kickflip replaces that element's content with the customizer. |
Hide element | Both | CSS selectors of the elements to hide on customizable products, one per line. |
Cart advanced settings
For Kickflip products, your cart page and mini cart are automatically updated as follows:
The product image is replaced with an image of the customer’s design.
The design summary (e.g. Strap: Mustard Yellow, Case: Silver, …) is shown instead of the technical options (Design ID, Design Token, Design Image).
The Change link is hidden. Clicking the product brings customers back to its product page, where the customizer reopens with their design so they can edit it.
If these changes don't show up in your cart or mini cart, you can use advanced cart setting to tell Kickflip where your cart is:
In the Cart advanced settings card, turn on Use advanced mode.
in Main cart container selector, enter your main cart container’s CSS selector.
In Other cart container selectors, add selectors for any other cart containers, such as your mini cart, one per line.
Click Save.
IMPORTANT
Kickflip only looks inside the containers you specify, so include every cart where Kickflip products can appear.
Setting | Description |
Main cart container selector | CSS selector of the element that contains the product list on your cart page. Only one selector. |
Other cart container selectors | CSS selectors of your other carts, such as the mini cart or a side cart. One per line. |
Troubleshooting
The customizer doesn't appear on my product page
Make sure the product is connected to Kickflip and visible on your storefront (see Making your products visible on your storefront.
In the Kickflip dashboard, check that Connection status is CONNECTED and Script is INSTALLED. If the script is UNINSTALLED, click Install script.
The Customize button appears at the bottom of the page
Kickflip couldn't find your theme's Add to Cart button. Turn on advanced mode and enter your button's selector in Add to Cart button selector.
The Add to Cart button, options or quantity field are still visible
Turn on advanced mode and add the corresponding selectors to Hide element.
The design image or summary doesn't appear in my cart
Turn on advanced mode in Cart advanced settings and enter your cart containers' selectors.