This article explains how to use App blocks to integrate your customizers into your online store. This type of integration gives you extra flexibility. It allows you to manually place your customizers pretty much anywhere on your website. It is useful if:
You want the customizer outside standard product pages
You are using an heavily customized theme
you want complete control over placement
you want both Add to Cart and Customize buttons visible
Integrating the customizer outside a product page
This approach allows the customizer to be placed anywhere in the theme. For example:
Homepage feature sections
Landing pages
Collection pages
Custom marketing pages
A specific product is selected in the App Block settings, and Kickflip loads the customizer associated with that product.
Follow these steps to set it up:
In Shopify Theme Editor, open the page or template where you want to integrate the customizer.
Click Add section (or Add block in the section you want).
Select Apps → Kickflip Customizer or Kickflip Customize Button.
Open the block settings.
Select the product to link to this customizer.
Position the block where desired.
Click Save.
Adding your customizer in a product page
If our standard app embed customizer placement does not fit your theme, this option allows you to manually place the customizer directly in the product page. We strongly recommend creating a dedicated product template for your customizable products to ensure proper functionality and avoid unintended changes affecting non-Kickflip products when using the app block integration in a product page.
STEP 1 : Create a dedicated product template
Go to Online Store → Themes → Edit theme.
Open the template selector.
Click Create template.
Select Product.
Name it (example: kickflip).
Click Create.
STEP 2 : Assign template to customizable products
STEP 3 : Add the Kickflip App Block
In Theme Editor, open kickflip product template.
Click Add section (or Add block in the section you want).
Select Apps and choose one of the two available Kickflip blocks: Kickflip Customize Button or Kickflip Customizer (to understand the difference see the section above)
Connect dynamic source to App Block, so it takes the context into account when loading the product
Click Save.
  |
 |
NOTE
Both blocks support adjusting basic styling options such as padding, width, height, corner radius, and colors to fit your page layout.
TIP
The Kickflip Customize Button App Block is ideal for brands that want to have both an Add to Cart button and a Customize button on the same product page. Simply add a block containing the Customize button to a standard product page. See a demo product for a live example here.
Advanced: integrating a customizer into a section that does not support app block by default
If you want to add a Kickflip App Block inside a section that doesn't already support app blocks (such as a header, footer, etc…), you need to edit the section's Liquid code directly.
Follow these steps to set it up:
In Shopify Theme Editor, click Edit code.
Find the .liquid file for the section (e.g. sections/header.liquid).
In the {% schema %} block, add { "type": "@app" } to the "blocks" array:
"blocks": [
{ "type": "@app" },
...existing block types...
]Save the file.
Back in Theme Editor, the section will now accept app blocks as usual.