How To Add a Related Products Block to Your Product Page Without Apps

No video

How To Add a Related Products Block to Your Product Page Without Apps - Shopify Dawn Theme

Рет қаралды 22,038

Күн бұрын

This tutorial is for all the free Shopify 2.0 themes - Dawn, Craft, Crave, Sense, Taste, Ride, Colorblock, Refresh.
Grab the PRO version on my Gumroad - edcodes.gumroa...
A related products block is really useful for showing other colors of your products, if you have each color split into a separate product, rather than using color variants.
It's also an easy way to add an upsell without the need for an app. If you're selling tech products for example, you could use this block to suggest accessories like a case or charger.
Thanks to Shopify 2.0 Metafields, and specifically the new product reference metafield, it's pretty easy to add related products in the admin, and the code to add a block is pretty straightforward too.
===== Grab the code =====
Free version: ed.codes/blogs...
PRO version: edcodes.gumroa...
===== Who am I? =====
Hey! My name is Eduard.
I teach the tech side of starting and running a Shopify store.
Im a professional web developer, but my goal is to make Shopify easy with simple and straight-to-the-point videos.
Visit my website: ed.codes
===== Join "Shopify DIY" Community on Discord =====
Chat with me and other store owners and developers:
/ discord
===== FAQ's =====
My favorite Shopify Apps - ed.codes/blogs....
My favorite Themes - ed.codes/blogs....
===== Buy me a coffee =====
www.buymeacoff...
===== Chapters =====
00:00 Intro & Problem
02:54 PRO version
04:29 Code Add-ons idea
05:36 Creating the Metafield
08:20 Fill Metafields
10:03 Open the code & customizer
11:00 Add the block in settings schema
14:35 Add the main output code
15:44 You're done!
16:15 Add to specific products
17:31 Code explanation for nerds
22:52 Next video & more
#Shopify #Liquid #metafields

Пікірлер: 147

@sebastiant4206 2 жыл бұрын

Amazing tutorial. Too bad i just paid 250 usd for someone on upwork to do exactly this

@averseth Жыл бұрын

where did you find that person to do it?

@EdCodes 2 жыл бұрын

COMPLETE THE LOOK section is now available on my Gumroad - edcodes.gumroad.com/l/complete-the-look

@PTate Жыл бұрын

This is amazing. As someone who is self taught, videos like these make exploring and learning enjoyable! Thank you!

@jaemarie Жыл бұрын

I ABSOLUTELY LOVE the idea of creating lightweight code add ons than to have your site, backend overwhelm with the apps. Keep up the good work. I recently started watching your videos and the value far bypasses all the apps I pay for ---finally someone has a solution. Thank you so much!

@mattiagenola7936 2 жыл бұрын

I really like your approach of adding functionality via code without install 1000+ applications. I will purchase the pro version and I'll watching all your video tutorials ;) Great job!!!

@arzuwiest1521 10 ай бұрын

Amazing! THANK YOU! I've spent 2-3 days going through various resources and even called Shopify support. With a little background in coding, I knew there had to be a simple way to apply this since Shopify is a great tool. Anyway, it wasn't until I watched your video that I completed the task in 5 mins, LITERALLY. All I wanted to do was assign 'related products' to each product. Completed it without any code! If I want to take it to the next level, I'm definitely reaching out to you. I'm now a lifetime member! THANK YOU SO MUCH! I can now spend more time marketing than coding!!

@marksmith4405 Жыл бұрын

Hey Ed, Just wanted to say we appreciate your videos. You're doing a great job.

@NICO-jd2kg Жыл бұрын

Thank you Ed! We paid for the advanced code and it is great - works beautifully. Highly recommend.

@Ciaran.wasted 2 жыл бұрын

Keep on Ed your videos are not like those mainstream tutorials you really really bring a huge value with every video… reminds me of Wptuts wich really saved my ass like over 1000 times

@EdCodes 2 жыл бұрын

Thank you, really glad to hear that!

@ellieho9877 2 жыл бұрын

I know many people have said that but this video is so helpful. It's a life saver for merchants without coding experience I can't understand why Shopify release Metafield lists and then dont let them show easily (without code) and none of the Metafields apps have ever worked on this

@ellieho9877 2 жыл бұрын

One question, can I apply the same code to blog post page? (Just changing the namespace and key for the Blog post metafields)

@AlainDitDat Жыл бұрын

You're absolutely right, we want everything for free, but every entrepreneur understands that you also have your expenses sooo, I'll have to buy what I need from you

@user-km2wr5fl4s Жыл бұрын

Thanks for the great video.! I just started making my website and chose Dawn theme because of your good tutorials.! Thank you for this helpful tutorial and codes.!

@thakurpriyanka9092 Жыл бұрын

Hi Ed, This tutorial was too good and you have explained it in such an easy way. ❤

@MissAshley519 2 жыл бұрын

Amazing! Thank you so much for this. I'm definitely paying for the PRO version.

@lentreb4494 Жыл бұрын

Amazing Toturial as always! ❣. is it also possible to add the "add to cart" button with a dropdown variant selector on each related product ? so that the customer can quick that products

@shanofarmahaboob231 Жыл бұрын

Thank you very much. Finally someone who makes concrete useful tutorials :)

@gamerlife233 2 жыл бұрын

Dude, you are the WORST! You actually make me try my hardest to customize my store. THANK YOU!

@isabella.v. Жыл бұрын

thank you! I also appreciate the brief explanation of the code. it's really interesting to see how it's set up, even tho Idk how to code

@yvonneserna1934 Жыл бұрын

great tutorial! please keep uploading more like this and with pro versions too

@etienneb4403 2 жыл бұрын

Great video again, thank you. I have a question. All the sections you can add are nice, but how do you deal with translations when you add some text in a section block?

@user-tg4sq4bb6k Жыл бұрын

hello. could i do the same on prestige theme? Or do you have any tutorial about the prestige theme? Or maybe can you take the job?

@QDGSmokes Жыл бұрын

Wicked video man, really good. I'll be watching the other videos for sure

@adrianpillai5683 Жыл бұрын

Hope your experiment worked. Awesome idea. Keeping the store speed optimal is always the concern with apps (not just the cost).

@ashamandapati5073 4 ай бұрын

Thanks a lot! This actually helped

@Ciaran.wasted 2 жыл бұрын

The downloadable code ad ons are really really awesome!!!

@M2345M 2 жыл бұрын

just bought the pro to support you. Thank you so much for this!!

@EdCodes 2 жыл бұрын

Thank you!

@henkbrwr Жыл бұрын

Thanks for this helpful video. The only thing I didnt get is the last part about the templates, I have watched that video before, it's a shame that you dont show this quickly. Now I have to go back to that video and see how to connect the dotts. But anyway thank you.

@krishnaharsh483 Жыл бұрын

Great tutorials, could you please make a video on adding bundle products on the product page like amazon

@charlieloubaby 10 күн бұрын

Everything worked except that... it's not reading the meta field and making those products the suggested ones. It just seems to be arbitrarily picking products. Any idea why this might happen?

@pasqualebinetti2848 Жыл бұрын

Thanks a lot Ed, super tutorial! With Showcase theme it works :) Amazing!

@hvittradas6718 Жыл бұрын

This was great! Any chance you have some input on how to make the related products into a slider when there is more than 3-4 options? Thinking something in the line of how the "featured collection" looks like when "swipe on mobile" is activated?

@alexandrademidova8364 2 жыл бұрын

hi Ed, thank you for a such clear explanation. One question is bothering me.... so there is no way to add product reference with metafields without touching the code? Like I added already metafields with text type and no code was needed. I have created now a product reference metafield. Then was trying to add it to the product template, but in the section source, I can only select text-based metafields. Does it means that only text based metafields can be added without touching the code? Thank you!

@agknight55 Жыл бұрын

Fantastic! Absolutely wonderful video. Keep up the excellent service and I will be purchasing the code snippets.

@PurchaseLocallyInc. 9 ай бұрын

Can we do the same kind of thing on other pages that aren't product pages? Related products to a blog. A profile for a company and add a section like this to show their events. And so on. PS. I love the code examples! Thank you!

@Andrewzwyatt Жыл бұрын

You are a king my G.

@macdonaldquammie4021 Жыл бұрын

Thank you, Ed, for sharing your GOLD-MINE! I'll buy the code Awesome!

@SupinyaM 2 ай бұрын

It used to work but not working right now. Hope you can update on what has happened recently. thx

@siyaadaalli Жыл бұрын

You are brilliant !! Thanks for all this.

@r0h4n4n4nd4 Жыл бұрын

bro even if it sounds like a sales pitch, who cares?? it's an awesome product, just be confident and tell people they need this in their life

@EdCodes Жыл бұрын

Thank you man, needed to hear that!

@az7079 8 ай бұрын

I created the meta field how you did but when I click on my product and go down to the meta field at the bottom the ‘related products’ metafield is greyed out, won’t let me click on it? Any help??

@WE_NEED_PASSION Жыл бұрын

love from germany for your work :)))

@robt4219 8 ай бұрын

How do you change the symbol of a content drop down to be a + and - instead of a arrow up and arrow down?

@combatenglish Жыл бұрын

This is great way to add related products. But I see that the new Shopify already has this feature to choose complementary product. Only one different thing is that it display products vertically. Can you consider to change the code of default complementary product section to display products horizontally like yours. Thank you.

@nadanyb5527 Жыл бұрын

It worked! I have a question. How to make that related product open in new tab instead of the same window?

@luxxkitchenandbath52 3 ай бұрын

Ed, is the pro version of your RP block also limited to 6 products? We need as many as 16. If so, I assume we can re-use the Pro version 3 times.

@AhsanKhan-qo8rq 3 ай бұрын

Hey Ed, Can't we have a tick option to directly add the upsell products to cart.

@erwinlee558 Жыл бұрын

I bought the codes, thanks. Is there any way to use "the related products" to replace variants? for example, when clicking pictures, it shows colours

@hussaingurana9282 Жыл бұрын

Is it possible to be able to set a title for each of the related products showing in the block? Not when people hover, but a title that will appear above the product image and could be set within the block settings?

@alexandrecomet3391 2 жыл бұрын

I see at 22:58, you liked a video of "WeeklyHow" and you and him are the only channels which I'm subscribed. You do an excellent job and I wouldn't mind buying your add on which have more value and advantage than apps that slow down your site

@EdCodes 2 жыл бұрын

Thanks for the feedback! Let me know if there are any specific features you would like to see or apps that you would like to replace.

@WanjaWannback Жыл бұрын

Hi Great but when I try to find in Theme Warehouse it is not there, it is because it is a paid theme Kind regards, Wanja

@mulpuri2020 Жыл бұрын

Does it work with IMPULSE THEME?

@babsake 6 ай бұрын

Hi Ed. Really good stuff. Do you have a full course on shopify development? I mean a course that will make things like this and more from start to finish-ish.

@EdCodes 6 ай бұрын

Not yet. Is your goal to become a developer? Then just watch general web development tutorials (HTML, CSS, JS). They don't necessarily need to be for Shopify.

@qereactive8702 Жыл бұрын

Thank you for this!!! It worked perfectly! 🎉 Just in terms of style, how do I change the image sizing and/or ratio with codes?

@Viswa.chaitanya Жыл бұрын

Beautifully explained the code. Wonderful video.... Could u make a video on how to add wishlist to Shopify dawn theme without any app.....Thanks a lot

@vavsports Жыл бұрын

i have done all the steps, and i have the option on the sidebar but it shown nothing on the productpage, can someone help me?

@JonathanDunskyBooks Жыл бұрын

Is it possible to set for each product a title to be shown if it's included in the related products block, a different title from the actual product title? For instance, I sell books. Each book has several formats: audiobook, ebook, paperback, etc. The title for each product is the name of the book + the format. In the related products block, I'd like to have the format written above the product image, so there'll be an image of an ebook and the word "ebook" above it. Can this be done?

@andresfelipechaparrocarvaj6935 Жыл бұрын

Hi, what about creating an addon for wish list or fav list

@Plusminusco21 Жыл бұрын

I have a question i am using the Palo Alto theme and i am getting error message, its not allowing to savel the related products block. do you know how to fix that?

@chrisblair8648 Жыл бұрын

I appreciate your videos. Could you tell me if this is compatible with 2.0 paper theme please? Also what is the advantage of buying the code? Apart from saving some time, what extra does it provide please?

@globeinsideout 2 жыл бұрын

Thank you for this tutorial! 🙏

@pankajbhatia9108 2 жыл бұрын

Very nicely explained, Thank you! Any idea how to make this work for the Turbo theme? I checked and although have been able to add the block, can't seem to figure out the 'when' part. There is no reference to 'case' or 'when' in the products liquid file. Any pointers?

@yordanboradzhiev2712 Жыл бұрын

Hi, is it possible to change the column width for specific products. Example: Product 1: 7 ralated products on one row; Product 2: 3 related products on one row( but bigger so they take the whole row). Thank you!

@denhaagnl88 2 жыл бұрын

This is nice! Any way to add an add to cart button below the images?

@EdCodes 2 жыл бұрын

Yeah, there is! That's going to be another tutorial though, building on top of this one.

@mlee1614 Жыл бұрын

Great video! Can this code be used on other theme like Venture? Thank you.

@user-ph5ik3jm2b Жыл бұрын

Hi there, great tutorial! Been looking for this for ages! However, I followed everything using the Free Version and it's still not showing up for me. Any guidance would be really helpful. I would have bought the PRO version but my template is Prestige and isn't on your list.

@juliapenna9367 Жыл бұрын

Great tutorial! Love all your videos :) The new 8.0 Craf theme does not have {% schema %} so for this tutorial I wasn't able to follow. I installed on 5.0 version but now that I upgraded to 8.0 I am completely lost

@quangmai7868 Жыл бұрын

Hi Ed Codes! The Shopify District Theme 2.0 shows the search, login and shopping cart icons in a bar that sits above the site header. Could you do a video that shows step by step on how to move them to the right side of the header, as well as moving other menu items to the left side of the header. Or all menu items including the search, login and shopping cart icon to the right or left side of the header. Like option to move the menu items around.

@mahedihasanmahmud8329 2 жыл бұрын

Hey! Your thumbnail is very nice! And your tutorial is also very well 💚

@EdCodes 2 жыл бұрын

Thanks!

@nocconocco69 5 ай бұрын

It didn't add anything for me, I did everything correctly but it didn't add

@ellecools Жыл бұрын

This is fantastic. Just setting it up. I'm just wondering if there is a way to exclude out of stock products from the metafield dropdown on the admin product pages? I have a number of out of stock items and it's hard to remember which;)

@sl97 Жыл бұрын

Hey Ed, extremely nice video, thanks for the tutorial! One question: Would it be possible to create a block on the product page (beneath or next to the ad to cart button) were a customer has the option to buy 5+1for free? Highly appreciate your answer. Thanks.

@DerlyneG Жыл бұрын

Great tutorial. Is there a way to add an "add to cart button" to that section as well?

@gohliyen2059 Жыл бұрын

Hi I got a invalid JSON in tag 'schema' error

@caninespirit8356 Жыл бұрын

Thank you! With theme updates will we need to reload this? If we purchase your $20 code, would we need to reload, etc with updates? And could this be used to 'encourage people to buy in bundles'?

@htirvin1 Жыл бұрын

fantastic tutorial, would this work with an 'out of the sand box' theme??

@mirco_martin Жыл бұрын

I love you channel bro! Can you help me? Im looking for an app to show in product page the variant options with featured image with the product for my custom theme, could you recommend me one?

@anilgahlot4390 Жыл бұрын

Hi, is the complete the look video out here?

@htirvin1 Жыл бұрын

Hello Ed, would this work with Superstore Theme by Out Of The Sand Box?

@ClaudiavandenBerg Жыл бұрын

HI, I have the theme reformation. Can I also buy this on your website?

@jaemarie Жыл бұрын

Would changing the title mess with the code?

@mohitbeniwal3425 2 жыл бұрын

Yes please go deeper in coding you are explained well

@lifeastobi Жыл бұрын

Good video but can you please make another video on how to change the block title text font to your themes font?

@soynacho01 2 жыл бұрын

Hey! hoy u doing? thanks for the tutorial, very usefull! I know you have a video when you show how to change the position of the description in dawn theme, but i dont know where it's, please help me

@dear.henley Жыл бұрын

LEGEND! Thank you!

@GunjFashion Жыл бұрын

this dont work in ostly themes which have different name files for main product page

@EdCodes Жыл бұрын

This is for Dawn and dawn-based themes i.e. all of the free Shopify 2.0 themes directly from Shopify.

@JonathanDunskyBooks Жыл бұрын

Ed, I'm currently using variants on a Shopify bookstore. Is it possible to add a headline to each image in the related products? Also, is there a maximum number of products we should use for usability?

@ArmandoR-yo7ub Жыл бұрын

hELP ME PLEASE Invalid JSON in tag 'schema'

@JonathanDunskyBooks Жыл бұрын

Ed, this is impressive work. Is it possible to be able to set a title for each of the related products showing in the block? Not when people hover, but a title that will appear above the product image and could be set within the block settings?

@hussaingurana9282 Жыл бұрын

I need the same thing to be done

@armansaifi_ 6 ай бұрын

I dont find any {% case block.type%}

@guyswatson Жыл бұрын

Hi Ed, I need a feature for a new site and happy to pay. How do I get in touch with you? Guy

@ashleycampbell8992 Жыл бұрын

download it but its giving me the following error "Liquid syntax error (line 100): Unknown tag 'when'"

@ashleycampbell8992 Жыл бұрын

I have the flex theme, and the notes don't match the code I am seeing

@EdCodes Жыл бұрын

Hi, I just replied to your email.

@mark5730 Жыл бұрын

Hi Ed, Just tried purchasing the PRO version (think I actually paid twice) but nothing happens. Any ideas? Many thanks

@mark5730 Жыл бұрын

Ignore that, all sorted now!

@gracebreshears5075 2 жыл бұрын

Could you do a version that we could put as a separate block under the product block so we could display a bigger version across the whole page?

@EdCodes 2 жыл бұрын

Yeah, like at 23:00 ? That's coming up soon :)

@sha-zs1kw Жыл бұрын

Dude. thank you.

@TJ-TJ 2 жыл бұрын

thanks Ed! can you do one for a File PDF added as a metafielcd and download from front end?

@EdCodes 2 жыл бұрын

Hmm, do you really need to add it as a metafield? And do you want it just to appear as a text link? Because then you can just upload the file to Settings > Files and then grab the link from there, and use a basic text block to add that link to the product page.

@K5310 2 жыл бұрын

Great video ! the font & size and color and the heading ( ) won't display in the code... . Do I need to move the schema out product-main.liquid into the product.json? ( Dawn theme) Please let me know.

@EdCodes 2 жыл бұрын

No you don't need to do anything with json. You added the schema to main-product.liquid right? And your html has: style="font-size: {{block.settings.heading_font_size}}px; color: {{block.settings.heading_color}};"> ? There are default values for these in the schema, so they should output 18px and #121212

@3odesign 2 жыл бұрын

@@EdCodes hi Ed, To learn the hard way, I started by removing all code from the Dawns product-main.liquid and started adding back things, and I did remove the “while block” codes, I had to put the liquid into a snippet, put the schema into the main-product.liquid (section), then use the “for block in blocks”, now all works! Great videos!

@philippe-causse-berlin 2 жыл бұрын

Hi Ed, thanks for all these good tutorials. I would like to buy the Related Products Pro Version. I use the theme Focal. will it work too? Thanks and cheers. Philippe

@EdCodes 2 жыл бұрын

Hi Phillipe, It was intended for Dawn and the free Shopify 2.0 themes. I haven't tested it on Focal yet, and the installation would be different. So can't guarantee anything. You can try following this tutorial and installing the free version, if that works then so will the Pro!

@waystosuccess4751 2 жыл бұрын

I have difficulty opening this search bar. What are the keyboard combos to open search bar and search for words in these codes? Thank you

@EdCodes 2 жыл бұрын

Ctrl + F to open the search bar. Or Cmd + F on Mac

@waystosuccess4751 2 жыл бұрын

@@EdCodes thank you so much

@bowlofsoup9311 Жыл бұрын

Hello Ed, does your code work for any shopify theme?

@atsnobhvr2906 2 жыл бұрын

Thanks ed very useful, I am planning on buying the pro but wanted test how this works and I am stuck as when I want to add the main code, when searching for CASE it does not appear in my main-product.liquid file. Do you know wht this may be?

@EdCodes 2 жыл бұрын

Which theme are you using?

@atsnobhvr2906 2 жыл бұрын

@@EdCodes I am using motion

@atsnobhvr2906 2 жыл бұрын

@@EdCodes ok I have just seen this is for the free themes, if you can get this to work with motion I will purchase the pro as I need the image change on hover, thanks