Change Product image to audio preview

Highlighted
New Member
2 0 0

Hello there,

I'm currently looking for a solution to change the product image (on collections, Featured products etc.) for an audio preview. Just like with the product image, every product should have an individual audio preview attached to it, since I´m building an onlineshop that's selling Audio samples.

Of course I checked all the forum posts I could find on the topic, but all the information seems to be outdated. 

I think there might be a way with metafields and an embedded soundcloud player, but I'm not sure how to do it. Of course I will also implement a player into the product page, but for now I'm looking for a way to preview the audio without having to click every single product to listen to the different samples.

I'm currently on the Supply theme (because it has a list view for collections and products), but I have no problem with switching to debut (which, unfortunately doesn't have the list view)

I've been looking into this for a while now and I would appreciate a bit of help. Since I want to learn how to do it myself and the budget ist pretty low I don't think I will outsource it to a guru or a shopify expert.

 

Thanks a lot!

 

0 Likes
Highlighted
Astronaut
1088 182 215

Sounds like this app can help you out: https://apps.shopify.com/osaria-audio-player

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Shopify Partner
2294 117 353

Typically this is just done using the rich text editor, or in themes with a custom-text block added there

https://help.shopify.com/en/manual/productivity-tools/rich-text-editor#insert-audio-files-with-the-r...

I think there might be a way with metafields and an embedded soundcloud player,

What is the embbeded code like and which part needs to be a metafield?

Excelify, airpower, etc can all facilitate bulk adding metafield values, there's also using the bulk editor 

https://SHOP.myshopify.com/admin/bulk?resource_name=Product&edit=metafields.global.soundcloudcode:string,variants.sku

 

Remember to add such files to the files admin, you do not want to put such things into theme assets it will hit problems eventually.

If you have a large inventory needing external assets you'll only want to use an app if it allows bulk import AND export so your data is transferable in some form or another to other services|apps.

 

 

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
New Member
2 0 0

Could you elaborate further on the rich text method? 

I'm looking for a solution like this on the product image: Unbenannt-1.png

 

It's very important to me to have the audio preview in the overview sections like the "all products" page and inside the collections, so the user doesn't have to enter every product page to listen to the audio.

 

Thanks for your help! 

0 Likes
Highlighted
Shopify Partner
2294 117 353

the rich text editor just uses links from either an external source or urls from files in the files admin.

Then it shows up in the product description.

It's possible to extract it from the product.description to be used in a different parts of the theme|template. typically just with the <! --- split ---> method you can find on the forums.

But that's very manual so if have a lot of products may be better to instead add that file to a metafield in a bulk fashion and make a snippet to display it for each product or in collections.

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes