Add Text with Custom HTML pop-out

Technical Q&A
, ,
1

Hi,

I have a shopify site where I sell womans lingerie, so sizing is a critical aspect of the customer experience.

I have 2 popout windows currently that show a sizing table and materials. I would like to add a third popout, in-line with the other two, with some custom HTML (like in the sample image attached). This is a sizing calculator that takes inputs from the customer and tells them their size. It uses HTML, CSS and Javascript.

I have the HTML written, which when I simply save in a text file and open it works. I would appreciate some help in guiding me how to do this please. Added script below for reference

Screenshot 2024-07-26 105557.png
Screenshot 2024-07-26 105557.png858Ă—447 103 KB


    
    
    
    
    
    

    # Nursing Bra Size Calculator
    

    

        

            Ă—
2

The problem here is that CSS rules apply to commonly used classes or other selectors like body, h1, button…

Obviously there are already CSS rules in your theme which apply to these elements and it would either break existing elements or these new elements will be affected by existing rules.

You can start by trying this code instead, but then you’d need to amend it to look as part of your theme – this can’t be done without seeing the code on your site.
3

Thanks for the reply, Tim. Understand what you’re saying about the theme vs CSS. My issue is more “how” do I make the pop-out function work with a custom HTML code? I can’t quite see any options when designing the page that allows me the ability to do this. There’s text pop-out functions but that doesn’t allow me to enter in my code, from what I can see.

Would you have any insight here?

4

Depending on your theme you can paste it into “Custom liquid” block or you’d need to find a relevant place in your existing theme code. Can’t suggest anything without seeing your site…

5

I can create the custom liquid block and have the calculator appear as a popout on the site, but I can’t see how I’m able to embed this block within an existing block. In the screenshot below, “Custom Liquid” is the block I’ve just created however I really want this to be within the “Purchase Form” section where the hidden “text popup” is.

If it helps, this is the website

Holly18_0-1722228976103.png
Holly18_0-1722228976103.png433Ă—743 24.6 KB

6

On your screenshot you’ve added a “Custom liquid” Section, not Block, Blocks are parts of Sections.

Now that we know your theme, you should rather do this:

  1. Create a new Page, call it “Size Calculator”

  2. In the “Content” area, click the </> button and paste the code provided below; save.

  3. In Customizer, on the product page, add “Text popup” block inside “Purchase Form” Section with label of “Size Calculator”, then click “Select Page” and select the “Size Calculator” page you’ve just created.

  4. Save.

New code to work in themes own popup:
7

Mate, that’s spot on. Thank you so much for taking the time to help me out.

All updated and working live. Cheers