How to add a metafield to Shopify product pages that displays a video? - shopify

I would like to create a way for an admin to add a different video on each product page. Such as a field that would take a YouTube embed code. Video needs to be underneath the product description (not part of the description or in place of the product image). Is there an easy way to do this?

If you are using Google chrome you have an extension "ShopifyFD" to add metafields.
There are other apps and API (useful for bulk) that will also help you in adding metafields to product.
Once done you can use {{ product.metafields.___.___ }} format to call the metafield value.

Related

How can I create a metafield with the type: product, for a shopify input?

I have made several metafields with the type as product, so I know they work, but in this section they don't show up for this link. I can hardcode the link to a specific product, but I want it to be dynamic using metafields. I'm using the palo alto theme.
and this is the result when I click the dynamic source button:
I'd rather leave any theme customization or coding as a last resort.
A link would take a metafield of type url but you are trying to add a metafield of type product. Type product stores the product object with all its data that's not what you need here if you just need to link to the product page.
Id just set up another metafield of type url and pop the url of the product in there.
I'm not familiar with where you are adding this in the Palo Alto theme but unless this is a section that appears on multiple pages, like product pages or blog pages, where you need to link to a different product on each page you may not need a metafield at all.

Double forward slash outputting as https:// in Tapcart App from Shopify Site

Working on a Shopify site for a client that utilizes tapcart, which appears to just grab default or inline styles from rich text editor. The problem lies in the product description where we use "//" as a divider.
Product Description // This is a product is how it is supposed to look. It instead appears as:
Product Description https:// This is a product
Not too familiar with how Tapcart works as they don't allow much outside development and can't give an answer as to why this is happening or if there is any way to avoid it. The error does not appear on the actual website. Is there a proper way to escape it? Has anyone seen something like this before?
Thanks!
You can stop using the product description for stuff other than the product description and use metafields instead.
In the shopify admin go to settings -> metafields and define the metafields you need, then go to each product and use the metafields at the bottom rather than using the description to put additional info.

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?
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

Add custom fields on adding product in shopify

How to add some extra details while adding products?
Currently I am able to add Variant in Product which shows an input field for the product in product details page. But then, I require to add the same Variants for all products.
My Requirement was to add custom field, e.g. Weight, Height, Wood Type, Color etc. that would appear for all products that are of category Table.
Is this possible some how?
This can be accomplished by creating a new template for your product. You can find some documentation for manually configuration additional product options here.
Most merchants on Shopify use apps to avoid manually configuring additional product options.
A simple task for you would be to add the information using the API for metafields since you are saying they are to be added to all the products. More information on metafields API and liquid are in the links below
Metafield Object and Metafield API
If they are only a few products, you can give this app a spin - ShopifyFD
If the different fields affect the price, create variants. Metafields can also be defined at variant level.
Product metafields can be managed from the Shopify adminpanel directly. You don't need a third-party app or chrome extension anymore!
From the adminpage, go to settings (bottomleft corner) and go to Metafields. From there, you can add the metafields to the product and set the desired contenttype (inputfield, image upload, checkbox, etcetera)
You will need to provide a namespace and key, which you can refer to from the code template. For instance: setting the "namespace and key" field to my_custom_fields.somefield, you will be able to access it from the product template file (product.liquid) like so:
{{ product.metafields.my_custom_fields.somefield }} or, of course, assign it like so:
{% assign myField = product.metafields.my_custom_fields.somefield %}
The created metafields will appear on the product editpage at the bottom. No chrome extensions needed!!
The accurate answer to your question is NO, You can't
But, the good news is there are some apps to accomplish the result. Here is one of the apps which is free!

BigCommerce Add Products To Cart API

I'm just setting up my first BigCommerce store, and I'd like to know if I can use their API to add products to a shopper's cart and forward them to the checkout page programmatically?
The problem I'm trying to solve is creation of bundles of products in the store. I need to have each product in a bundle show up as a separate line item and sku on the order, but BigCommerce does not natively support this. The next best thing I can think of is to send the user to a specially crafted php page that will add the constituent parts to their cart, then forward them to the checkout page.
Am I barking up the wrong tree? Is there a simple way to do this that I've missed?
You can use the Cart api to
- Create cart
https://developer.bigcommerce.com/api/v3/cart.html#post-carts
and use the created cart id to
Generate cart URL
https://developer.bigcommerce.com/api/v3/cart.html#post-carts-cartid-redirect_urls
Then you can move the user to this url