I'm designing this popup for a mobile website where a single input needs to be added. the user might need some additional information to help them with this input (e.g. the serial number is visible at the bottom of your product). This will be an image and i've come up with the following solution. This might seem slightly unconventional and i'd be grateful if you could suggest a better way of doing this
As shown in your wireframe, you have a single entry field and a single interaction on that screen.
Without having more details than that, I probably wouldn't hide that "extra information" at all. The user can hardly get lost on this screen, because it is so simple. Just keep the image content simple and the graphic style "non-overwhelming" ;) in terms of coloration and detail.
That would instantly address the rule of not hiding meaningful information from the user, and it would do so without jeopardizing the form's overall usability.
First, make your Extra info text more clear as to what info it is. You can use a descriptive label to explain what the extra info is. Something like, "Can't find your serial number?" or "Locate your serial number". Then place the help text next to the label.
Then, instead of having the popup slide down at the bottom, you can have it open centered with a close button on the top right. This way, you will capture the attention of users and prevent them from scrolling down.
Don't hide info on mobile or anywhere.
Why cannot you ask serial number without popup? It seems serial number is part of a workflow to complete the process. It is a conditional fields I guess which can be invoked on page the itself by show/hide logic. Isn't it?
If you're still up for popup, 'Extra info section' can be a open section and let user scroll if they want. Make sure you work on copy so that no gibberish information is there.
Lastly, let user scroll only content section not the complete popup.