CustoMeow Button Block Setup

1.Buttons

2.Sticky Button Bar

3.Customization Type

4.Cart Drawer

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

6. 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!

Updated on: 05/09/2025