When you connect a Kickflip product to Shopify, Kickflip automatically creates a Shopify product page linked to your customizer. Kickflip uses the Shopify App Embed integration to inject the customizer directly into the product page. For most Shopify OS 2.0 themes, the integration should work immediately.
Choose how the customizer appears
Customizer Only
This integration replaces the entire product page with the Kickflip customizer. When customers visit the product page, they interact directly with the customizer instead of the usual product details.
Customize Button
This integration swaps the standard Add to cart button with a Customize button. When clicked, the customizer opens in a popup modal, allowing customers to personalize their product without leaving the page.
Follow the instructions below to choose the desired integration.
From the Kickflip admin, go to Settings > Online stores, and then click on your store.
Open the App Embed settings by clicking on it.
Under Integration type, select the integration type you prefer.
Click on save
Done!
When the 'Customizer only' integration is set up, the customizer will appear embedded in your product page inside your Shopify theme editor. When the 'Customize button' integration is working correctly, this is what you should see on your product page in the theme editor:
A customize button is shown where the Add to cart button would normally be.
Labels telling you that some elements will be hidden. Here's the list of elements that should be hidden:
Variant picker
Quantity input
Buy buttons
Customize button options
If you select the 'Customize button' integration, you can modify its appearance.
Change the button text
You can change the default “Customize” button label to display custom text (e.g., “Start Customizing”).
From your Shopify account, navigate to Sales Channels > Online Stores.
Click on Customize next to the theme where you want to apply the change.
Open App Embeds.
Under Customize Button Settings > Customize button text, enter your desired label (e.g., Start Customizing) in the input field.
Save your changes.
Translate the button
You can translate the Customize button using Shopify's Translate & Adapt app.
From your Shopify admin, go to Settings > Apps and sales channels.
Click Translate & Adapt.
Select the language that you want to translate.
Under Theme, click App embeds
If you are using a different translation app, you should also find the Customize button under Themes / App Embed.
Style the button
If you’d like to change the background color, text color, or other aspects of the button’s appearance, follow these steps. You can adjust properties such as its color, border radius, size, and more to match your store’s style.
Open Shopify's theme editor.
Go to Theme settings (Cog icon).
Under the Custom CSS section, you can apply custom styles to the 'Customize button' using standard CSS.
#kickflip-customize-button {
background-color: #yourcolor; /* background color */
color: #yourcolor; /* text color */
}
NOTE
All Kickflip App Embed settings apply to the default product template. These settings only apply to Kickflip customizable products.
Need more control or the integration is not working properly?
Use App Embed Advanced Settings for:
Heavily customized themes
Custom or advanced configuration
Hiding elements manually
If the integration is not working properly
Need even more flexibility?
Use App Blocks when you want to:
Place the customizer outside a product page
Manually position the customizer
Add a customize button for a Kickflip product on an existing product page. Example: you wish to offer a standard version and a customizable version of a product. Both products will be accessible on the same product page.