Credits usage has reached0%.
Expected to run out of credits in0 days. If credits usage limit is exceeded, SKUs will automatically remove the integrated custom features.
1.How do I use the CustoMeow Buttons Block?
Shopify
SHOPLINE
Shoplazza
2.CustoMeow Buttons Configuration Guide
Buttons
Sticky Button Bar
Customization Type
Cart Drawer
3.How do you place the preview in the position of your main image?
4.How to change the style of the customization feature on the embedded page?
Instructions for Using CustoMeow Buttons
1. How do I add the CustoMeow Buttons Block?
Go to Themes, select your theme, and click the Customize button.
Switch the theme page to the product page.
Select the template you are currently using.
Typically, we place the button above the Buy buttons. (😎 Yes, you guessed it—we’re replacing the Buy buttons.)
Select the App and locate CustoMeow Buttons.
You can see the CustoMeow Buttons in the right-side preview view.
About the CustoMeow Buttons
To modify button text and style, please proceed to Step 2.
When your product uses CustoMeow's customization feature, the button text will display "Customize Now."
When your product does not have the customization feature, the button text will display "Add to Cart."
Hide or remove the Buy buttons block.
进入店铺设计，选择你要应用的主题，点击设计按钮。
切换主题页面到商品详情页模板。
选择你当前正在使用的模板。
将鼠标放置在商品详情模块的右侧，点击添加按钮。
选择应用，找到 CustoMeow 按钮并添加。
将 CustoMeow 按钮移至购买按钮上方，此时右侧预览视图就能够看到按钮。
关于 CustoMeow 按钮的说明
如修改按钮的文案和样式，请移至步骤2查看。
当你的产品含CustoMeow(定制喵)的定制功能，那么按钮文案显示为 "Customize Now"。
当你的产品不含CustoMeow(定制喵)的定制功能，那么按钮文案显示为 "Add to Cart"。
不要忘记隐藏或者移除购买按钮。
进入主题装修，选择你要应用的主题，点击编辑按钮。
切换主题页面到商品详情。
选择你当前正在使用的模板。
点击商品详情模块中的添加内容按钮。
找到 CustoMeow 按钮模块并添加。
将 CustoMeow 按钮移至购买按钮上方，此时右侧预览视图就能够看到按钮。
关于 CustoMeow 按钮的说明
如修改按钮的文案和样式，请移至步骤2查看。
当你的产品含CustoMeow(定制喵)的定制功能，那么按钮文案显示为 "Customize Now"。
当你的产品不含CustoMeow(定制喵)的定制功能，那么按钮文案显示为 "Add to Cart"。
不要忘记隐藏或者移除购买按钮。
2. CustoMeow Buttons Configuration Guide
Since the configuration options for CustoMeow Buttons are the same across Shopify, Shopline, and Shoplazza, this guide uses Shopify as an example. If you have any questions after reading, feel free to contact our online customer support.
Buttons
Sticky Button Bar
Customization Type
Cart Drawer
3. How do you place the preview in the position of your main image?
CustoMeow Buttons block will automatically locate your main image position and place the preview on top of the product image. However, if your store's theme layout has been significantly modified, the automatic placement may not work, and you'll need to manually specify the position by referring to this article.
First, visit your customized product page.
We recommend using the Chrome browser. Hover your mouse over the product image, right-click, and select "Inspect".
Open the console and locate the parent level of the product image.
We recommend finding the outermost parent element of the product image and copying its class name.
Go back to the admin dashboard - Store theme - Locate the current theme - Edit code.
We recommend downloading all the code and using a programming tool like VSCode. This allows you to perform a global search to quickly locate the code section that needs to be modified.
Add the "customeow-desktop-preview" code after the located code and save.
This way, the desktop version's preview view will display in the layer below `customeow-desktop-preview`. Let's go back to the product page to check the result.
When you start customizing, the preview will appear in the main image position. You can close the preview window at any time, and it will automatically reappear when you customize anything again.
4. How to change the style of the customization feature on the embedded page?
We provide three class names in CSS that you can modify to ensure consistency with your website's style.
We’ve modified the style of the embedded customization feature based on the Dawn theme. The code is as follows.
Return to the theme settings page and open the custom CSS section.
Paste the modified style code into the Custom CSS section.
Save and preview your product page.
That's it for now!