customization - Shopify - is it possible to change the preview of a product with a inputbox?
Which ways are possible to edit the live preview of the product page in Shopify with Inputboxes next to it?
Let's say the product is a poster, and i want to add a custom text on it.
When typing into the inputbox the text changes in real time on the product.
Can this be implemented in the shopify code with the basic version of shopify?
Or does this necessarily needs an app?
Let me go a bit deeper. I have a code that can generate a QR code. Now i want that the QR code to be previewed in the product. Now position and color of the QR code is different from any product. Would that need an app?
Yes you can to an extent.
First the ground rules:
- You can't modify the product from the front-end and update the content or media in the back-end - this would be a huge security hole
- The changes applied to the product will be visible only to the user who changed them
If you like to share this change to other people you will need to add a custom parameter in the URL of the page and generate the content from it and share that url.
On my mind it can be done if the dynamic text is applied over product image.
Detailed code would be too long to write here but here are the steps:
- Add an input to your product form to add a custom property (https://community.shopify.com/c/Shopify-Design/Product-pages-Get-customization-information-for-products/td-p/616503 (https://community.shopify.com/c/Shopify-Design/Product-pages-Get-customization-information-for-products/td-p/616503))
- Use this value to display it in a div in product image container
- Position this div in CSS as absolute and style it as you wish
- While image container position should be set as relative in CSS
Didn't find the answer?
Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.