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.
Related
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
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 check this and it wasn't the same as my question:
Editing JSON data from within a shopify liquid page
Currently I have a file settings_data.json in my theme. This file has a specific field called "product_form_style" there is a specific field I need to edit here from one product template titled: product_custom_liquid
According to some scarce resource I read this would work:
{% settings.product_form_style == 'my value' %}
This however gives an error: "Liquid syntax error: Unknown tag 'settings'"
The official documentation says I can access it with ajax or jquery from js however it doesn't give any examples. It only says it can be done but I have no idea how.
The basic idea is if product template is 'product_custom' then change settings product_form_style == true.
Obviously the above is not correct syntax. Just an example.
You can't modify the settings_data.json from the front-end without using an APP.
If you could modify it without any authentication this would have been a huge security issue and anyone could modify it.
settings_data.json is modified only when you save something in your Customize panel. For any other way you will need a Private app or some App to do so.
In addition you can't modify files in any way from the liquid code as well. The liquid template language only outputs data, it can't modify that data without the use of some kind of an APP.
I'm trying to figure out how I can pass Shopify Global Variable, such as {{ discount_code }} for example, as a Custom Variable/Dimension into the "Additional Scripts" textarea.
We really just want to know if we can get the discount_code parameter in the thankyou page by giving the proper variable syntax. Thanks.
See this article on the Shopify wiki on how to customise your thank you page.
It says:
In the Additional Content & Scripts box, you can use:
HTML — anything goes here, you can use script, style, iframe and object elements, any valid HTML5 element is fair game.
Liquid — you're somewhat limited to what Liquid you can use, but you have access to the essentials, that is, the order and the shop variables.
So, you should be able to access the discounts property from the order variable.
I'm trying to customize a product in the CategoryContent panel in BigCommerce. I want to change the markup for each product in the listing, but the markup for the entire product list is trapped in an uneditable blob :%%GLOBAL_CategoryProductListing%% (I'm getting really tired of these unchangable GLOBAL variables).
Is there any way around this so that I can put my own markup on each product in the list. I'm also open, reluctantly, to reconstruct the product list using the API, but I'm not sure how I can access the API from within a BigCommerce store. Is that possible?
I was able to identify Snippets/CategoryProductsItem.html as the file containing the markup for the individual items in a category list.
I hope this saves someone the time it took me to find the file.
The Snippets/CategoryProductsItem.html is the snippet used for grid category files. If you are using the list view, the file is Snippets/CategoryProductsItemList.html.
This file represents each product listing li. It acts as a template which loops through all the %%GLOBAL_CategoryProductListing%% information for this category. To add a feature to the category ProductList li add it to the Snippet, and it will be applied to each item.
Hope this helps.