Create custom block using an Existing Design

3 0 1



I currently have a third-party "virtual fitting room" plugin added via Google Tag Manager and I like the buttons design.


I have basic HTML knowledge, and I want to create custom pop-up block linked to a metafield to put right above the plugin, but I want the block to follow the same design. I am thinking about just customizing the popup block in Dawn theme. I believe that all I have to do is change it in main-product.liquid, right?


If that's so, can anyone help me extract the HTML code of the current buttons design so I can use the same? 


This is how my store currently is:


Screenshot 2023-06-07 at 18.28.47.png


This is what I'd like to do:

Screenshot 2023-06-07 at 18.29.07.png


My current theme is Dawn. The site is:


Thank you in advance

Replies 2 (2)
Shopify Partner
3756 709 1077



Yes, the code is at main-product.liquid under the Section folder. 



Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Shopify Partner
803 32 60

You can get the code to copy it from your code file for the product.


You mentioned that you have basic HTML knowledge, have you ever worked with code on Shopify before?