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?
ADDITIONALLY:
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
The solution is to use Javascript and update the content of the front-end. If you like to store the changes for that specific user you can save them as cookie or localstorage.
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.
Each one of these steps will require some custom Javascript that will affect only the user in question, if you like to modify the product in the back-end directly you will need some kind of an app for this.
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)
Write a Javascript function to get input value in real time
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
HTH
Related
I'm working on a custom code block for the Tapcart app version of my e-commerce site on Shopify. They have the ability to add HTML, CSS and/or JS in a custom code block.
However, I cannot get the html to output the custom fragrance notes (my custom metafield) for the product. Matter of fact, I can't get anything to output- it's just blank.
Thoughts? Appreciate your help!
{{product.metafields.custom.fragrance_notes}}
I tried {{product.metafields.custom.fragrance_notes}} expecting it to output the plain text multi-line of each individual product's fragrance notes (which I have as a custom metafield for each product) but instead nothing displays at all.
When asking for metafield data you can often meet with success by asking for the value stored at that key.
{{product.metafields.custom.fragrance_notes.value}}
Since the namespace is custom, the key is fragrence_notes and what you want to use or display is the value. So it is a key:value thing.
Of course, if your metafield is empty, you won't see anything no matter what.
I would like to customize my deepview with a specific image depending on where on my site it is clicked (custom product image for example).
I understand that I can not use javascript in the deepview but my thinking was that I might be able to pass a url to our cdn in the query parameters of the link but I can't figure out how to access it in the deepview.
I'm trying to display only the images of the colour variant I have selected on the product page. They're currently being pulled in by their Img Alt text, which is in the product list CSV.
I would to hide the thumbnails of the other colours when they're not selected, and switch to them when they are, including replacing the larger featured image.
Any help would be greatly appreciated. Thank you.
product-template.liquid https://pastebin.com/AyaDpNG4
theme.js https://pastebin.com/KBniw7J8
Link to Product page
https://4158qu33fstl4w69-53119090861.shopifypreview.com/products/lightweight-trainers
Link to CSV
https://docs.google.com/spreadsheets/d/1lc8XcHDMyMFGAkegTRrBLLTlQN8oNVbU430vT0aeP4Y/edit?usp=sharing
From a data standpoint, there is unfortunately no way to do this in vanilla shopify (without an app or using metafields to set up variant images).
The reason for this is that variants only allow one featured image in the data structure. For this reason, you'll likely need to go the app route.
An alternate "hacky" approach would be to add slugs to the end of your image names ('-maroon', '-black', '-all') and then use javascript to match up the images to the currently active variant. This would always be a bit risky and require work when uploading images, though.
Here are some APP, but most of the APPS over Shopify has paid.
Variant Image
Wizard
Variant Image Automator
In my shopify store I make custom arts based on customer's image. I need to add an image uploader where user selects the image and when they hit continue I should take them to checkout. I am using the debut theme. How can I make this happen?
You can add additional details to a product by including an input field with a name of properties[some-property-name], and this also works for input fields with a type of file.
For example, you could add the following to your product form to create an image upload field. (Note: Make sure your form has enctype="multipart/form-data" set so that browsers submit the form correctly)
<input type="file" name="properties[Uploaded Image]" class="custom-upload" />
The resulting file will be uploaded to Shopify and will be accessible to you through the order in the Shopify admin. Your customers will be bound by whatever limits Shopify enforces regarding file sizes, which from a quick Google search looks to be set at 20MB currently.
NB: If your theme uses Javascript to submit your product form, it may or may not be compatible with file inputs out-of-the-box. Many simple stay-on-page features assume that all of the form data can be treated as text, so would ignore your file field. Here's an answer to a similar question where I tried to provide some ideas on how you could get around this problem: https://stackoverflow.com/a/58271610/2592369
I am trying to write a Shopify application and I want to add a section to the product page when the store owner installed my app. I tried this by adding a custom script tag in the shop template and this tag will load and inject my desired HTML into the page. It's work but it needs to force the store owner to change the product page template and its not user-friendly.
I see some apps in the Shopify app store that can change the product page after you install them without needs add any part to the product page template. How they do this work? I can't find the correct way in the Shopify documents.
You can change the Shopify theme of the shop using The API for Assets:
However as drip mentioned this is not a good idea:
If you change the theme auto-magically via code, you are looking for trouble. A lot of things can go wrong - simply you cannot cater for all themes and their changes over time! So you could possibly leave a broken page after the change. The e-shop owner won't be impressed! Actually a lot of the 1* reviews of apps are for that reason!
What would happen if the eshop owner removes your app? He won't know what code to remove.
So, most apps ask the user to add the app code. They provide detailed instructions of course.
Fyi, another problematic approach is the following:
Some apps may attempt to change the DOM "on the fly", by first locating an existing DOM element (a lot of theme-specific if statements to do that with any degree of success) and, then insert the app's DOM elements.
That's very messy and problematic as well, but at least you do not risk ruining the owner's theme files. In the worst case he can uninstall your app and he 'll be ok.