Udesly 3.0 beta - Webflow to Shopify - Converting product pages

[@YahiaElBellaj]

Bravooo for your videos and the job you do. Helping us a lot here. Thanks

[@AlternatePro]

Happy to hear that! Thanks for the feedback

[@rileyjdonahue]

absolute life saver thank you so much for making this!!!!

[@AlternatePro]

My pleasure many more to come.

[@jean-huguesdoumbe6994]

Thanks a lot!!!

[@AlternatePro]

Glad it helped.. sorry that it was one of the first tutorials was still learning the content creation ropes.

[@koyit4201]

@11:15 custom attribute force: select to force the div into a dropdown with selections

[@jjt03]

Thank you for another fantastic video!!! I'm almost there I'm just struggling with Rich texts that are appearing with code on the page. I have it set up as product-metafield:text="story" & added the special-page="content" recommended by udesly on their docs. But still getting text with code on the page. So weird. Thank you buddy! Keep them coming!

[@mfactor1018]

Thanks man this was pretty helpful, would like to see a video on how to create some sort of user management, like allowing users to login and see history stuff

[@AlternatePro]

Sure thing! Consider it done

[@whatthehecknz]

Loving these keep up the great work

[@AlternatePro]

Thanks Andrew.. this channel is growing fast and it is going to pick up some serious speed soon.. So yep more and more tutorials and videos are coming and I will be covering all supported CMS's

[@tompoynor1189]

Thank you man for these videos, they are increadbly helpful!! Do you have any recommendations on a product review shopify app, that integrates well with the conversion. Or if there was another way of doing it? Thanks!

[@AlternatePro]

Hi Tom.. responded to your direct message however for the benefit for others. I haven’t implemented on of these personally but the judge.me app looks pretty solid and their documentation walks you through v1 Shopify theme installation.

[@tompoynor1189]

@@AlternatePro Thanks man!

[@fusionmotorsportsusa]

Thank you for the great video! Are you able to add multiple videos to one product page?

[@funnellab]

Hi! Thanks for your video man! I wanted to know how to create another product page template. I've read the documentation but I don't quite understand how to do it. Do you know how to do it? Thanks in advance ! 🙌

[@AlternatePro]

Hi there.. it's pretty straightforward (once you have done it once haha), but it all comes down to the URL slug you give the new product page template. So, for example.. create a new page and then make sure that the slug (URL) starts with product- (so for clarity's sake it would look like this >> product-special-product-template or product-alternate-template. Then because there is technically no "product functionality" on this page like there would be with the default product page, you need to add a collection list and set it to products, limit it to 1 product, and then you can use the CMS binding as usual.. else you can use liquid:object custom attributes to bypass this step completely, but then you will need to reference the Shopify liquid cheat sheet for the product objects ( www.shopify.com/nz/partners/shopify-cheat-sheet). Hope that helps, and I will do a tutorial on this soonish.

[@funnellab]

@@AlternatePro Great, I get it! This is not very clear in the Udesly documentation. I had converted quite a few models with V1 of the tool and the doc was better. I had another question: For the conversion of CMS collections it's the same principle as for the product, can we use "liquid:object" and the meta fields to do it? Thanks for your time 🙏

[@AlternatePro]

Hi you sure can.. the advanced liquid and html attributes can help you out of a jam a lot and often just use them to configure pages. I did a tutorial on advanced metafields and my latest tutorials (linked products and linked product add to cart buttons) show the workflow for Shopify 2.0 native metafields.

[@funnellab]

@@AlternatePro All right! Thanks a lot for your answers

[@iriscbmiranda]

Hey, thanks for this video, so helpful! I was wondering: is it possible to sell themes created on Webflow on the Shopify theme store?

[@AlternatePro]

Hi thanks. Unfortunately not. Although the theme is very close to a native theme there are some dependencies that would cause issues.

[@deezy88888]

Super helpful. Thank you! Do you know the best way to configure product recommendations?

[@AlternatePro]

Hey there. Pretty simple todo.. you just have to add the shopify:recommended attribute onto a product collection list.. hope that helps

[@toryche1310]

@@AlternatePro is there a way to set it to only show products that are not a current product? shopify doesn't seem to recognize the webflow filter.

[@itshungle]

Hi, i'm new to udesly and shopify. I want to ask if i need ecommerce plan on webflow to be able to do this?

[@AlternatePro]

Hi welcome. No you just need an account plan that allows you to export code. You do not need a hosting plan at all. Just build the site and add the webflow commerce functionality.to build out the e-commerce templates.. you just need a few template products so you can design a build you store.. all of the product authoring should be done on Shopifys end.hope that clears things up.

[@SeanAlvarado-wp1vg]

Great video thank you! One issue I am running into is my product lightbox is not working on Shopify. When you click on a product, the lightbox opens up but then after about a half a second, the entire screen turns white and you are not able to get back to product page without refreshing the page or pressing back in the browser toolbar. This does not happen on the Webflow site though. Any suggestions on how to fix?

[@AlternatePro]

Hi are you using the free version of Udesly?

[@SeanAlvarado-wp1vg]

@@AlternatePro at the moment yes. I was planning on going with the paid option once I solved this issue, but is it because I am still on the free version? And thank you for the quick response!

[@AlternatePro]

The free version has a few limitations to protect the company.. this is one of them.. upgrade and your good to go. If possible use my affiliate link please.

[@SeanAlvarado-wp1vg]

@@AlternatePro THANK YOU! Just purchased Udesly year account with your link. Thank you again!

[@AlternatePro]

My pleasure and thanks

[@wildernesslei5409]

great video! Do you know if it's possible to customize the page on a single product, not the template for all products? thank you

[@AlternatePro]

Hi you have two options 1. Create a seperate product template and assign this per product.. or 2. Use metafields and conditionals to drive your product template (I seem to use this more than the other route but it depends on what you need)

[@koyitsang3]

Thank you for the tutorial! Quick question- will the images and product descriptions shows on FB and Instagram Shops? I was having trouble pulling datas into FB and IG shops.

[@AlternatePro]

Hey should be no issues as this is fully controlled via Shopify.

[@waterjacket3305]

Thank you for making these videos. Can you do a conditional where one of the product variant option boxes would show a different css style (maybe a line through or diff color etc..) if that variant specifically was sold out?

[@AlternatePro]

Hi there is already a css combo class for this. If you check the code you will be able to target it. Let me know if you need some help.

[@waterjacket3305]

@@AlternatePro I had tried to do this with the old adapter and was trying to find the class and the support said "that combo class is no longer available, due to several issues that came out with products that had multiple variation properties like (Size and Colour). We were forced to move that combo class to the add to cart button, otherwise there were edge cases where you couldn't select the variation." Not sure if this is different with the new adaptor though and shopify 2.0?

[@AlternatePro]

Hmm yes.. I have just double checked the code and the combo class is indeed only present on the add to cart button.. I will speak with the Udesly team and look to find a variant solution.

[@AlternatePro]

Hi there Just following up on this my next tutorial covers this off a bit but basically if you have multiple option types (i.e. colour, size, fit) then the variant button disabled state is not applied and is instead uses the out of stock message when the vairant is selected. If you only have one option then the disabled state configured in webflow is applied.. the next tutorial shows a bit of a work around by removing the colour option to its own product.

[@abigailtate7246]

Thanks for another great tutorial! Do you know if it's possible make it so it doesn't select a default variant when a product page is loaded?

[@AlternatePro]

I think thats a default behaviour of Shopify.. There has been a number of frustrations voiced about this on the Shopify forum.

[@alonyakobichvili9129]

Thanks a lot, real helpful. Is there a way to make the sections dynamic as well like other Shopify themes? I mean add and rearrange Sections order?

[@AlternatePro]

Hi Alon.. at the moment this is only possible when using the legacy version of the Udesly app.. this is in the pipeline for 3.0 but as it's a beta there is still some work todo to get full feature parity and this is one of those that still need work.

[@alonyakobichvili9129]

@@AlternatePro thanks for the reply. I know you’re focusing on the beta, I also have the legacy version. I just can’t seems to figure out how to get it to work so that clients can add/rearrange sections on Shopify. Thanks again for any reply! Keep at it !!

[@AlternatePro]

When you use the legacy version you have to create a div that's has the custom attribute item=content-for-index and then you have to specify which sections can be dynamic by adding dynamic=true to the sections custom attributes.. hope that helps.

[@keyanurbennett7582]

Can you add as many option sets as you want for varients? Webflow only offers 3, I need 10?

[@AlternatePro]

Hi Yes you are not limited by Webflow as you are building for Shopify.. Shopify has its own limits on the number of variants but that is 100.

[@AlternatePro]

One caveat is that the unstock or out of stock states for Udesly options only works when you have a single option.. so best to use a swatch plugin on Shopify.

[@pixelsilo6069]

Hey, does anyone know if the offset image thing ever get fixed? Tried to add a few combos as attributes without much success.

[@AlternatePro]

Hey should be working.. but I will double check next week.. public holiday here on Monday so will check on Tuesday.. for the time being you can add the offset code manually to the code in Shopify just add offset: number inside the for loop. I.e {% for image in product-images offset:1 %}

[@thedukedubstep]

@@AlternatePro Thanks for offering to check. I've been doing it the manual way as you described... Just hoping for a solution that avoids having to edit the code on each template update. Do let me know if you find a solution 👍

[@pixelsilo6069]

@@AlternatePro Hey - Did you ever discover if this was possible within webflow via custom attributes? Thanks!

[@leonardomaldonadodesign6801]

Hey man! Thanks a lot for the tutorial! Really helpful!! Is there a way to build the product gallery using the native tabs Webflow component? I tried to build that in the CMS and then exporting to Shopify, but it isn't working. If it's possible I would like to schedule a 1 on 1 consulting with you for furthermore information. Thanks a LOT!

[@AlternatePro]

Hi Leonardo.. Not sure I am understanding what you are looking to do here. May be worth having a quick chat so I can get my head in the right gear..

[@kimosabe77]

do u need the site plans(with cms) for this or account plans will do?

[@AlternatePro]

Hi there yep you just need an account plan.. you don't need a CMS. The one caveat here is there are some limitations with regards to number of items you can create on a no cms plan website but if you are building the themes to fully leverage the conversion CMS of your choice then its a non issue.

[@iriscbmiranda]

@@AlternatePro But you do need an e-commerce account, or am I wrong?

[@AlternatePro]

@@iriscbmiranda hi no you can add the e-commerce without the plan.. you just need a light account plan so you can export the code..

[@sabsturr]

is it possible to do an image carousel ? i know udsely offers one, but i dont like the styling of i and i want to use my own code, but i'm confused how to program it. for example, there's one main image, and then there are sub images below you can select from. i assume you have an index, but what if a product has 1 image or others have 10

[@AlternatePro]

Hey yes you can.. the image carousel code that udesly applies is pretty straightforward and you could always tweak the styling of it with custom classes.. Depending on your requirements you could use more advanced hardcoded solutions but without understanding your requirements further it would be difficult for me to say what's what. I will do a detailed tutorial on this.

[@vrajangshroff156]

But what about the buy button? This will not let anyone check-out through Shopify, right?

[@AlternatePro]

Hi, I am not sure I understand the question correctly.. the checkout system is all controlled via Shopify and it is not much you can change. If you use a buy button this is normally used to go directly to checkout without adding more products to the cart.

[@asagoldstein1669]

Hey man, I have a few specific questions about the converter. Is there some way to reach out to you directly?

[@AlternatePro]

Hi yep just reach out via the channel email or through my website and we can go from there.. I do offer 1 on 1 consulting and support if interested.

[@asagoldstein1669]

@@AlternatePro great, emailed you. Thanks!

[@georgehedley]

Is this up to date? Can't get product metafields to work

[@AlternatePro]

Hi there yep looks like it's still current. it is in continuous development so there WILL be some tweaks coming. If you are struggling to get metafields to work then I recommend watching this tutorial as it will get you up to speed quickly. kzbin.info/www/bejne/eKeydmN9bbh0pM0 You don't need the acf plugin as you can use the Shopify 2.0 metafields or if you are under the 30 field limit you can create the custom fields in Webflow cms and they will just convert. Hope that helps

[@Rathulion]

@@AlternatePro thanks for the great tutorials! Two questions: 1. My WF product description is not coming across as Shopify's native description but rather as a metafield without description. Is this normal? Also, if I add multi ref-fields to WF, how can I add new options to those fields in Shopify? For example how can 2023 be added in Shopify to a ref list of years created in WF?

[@asapixl]

Can you please do a Webflow to Wordpress video using Udesly 3.0. 🙌

[@AlternatePro]

Sure thing.. I will be covering all CMS conversions..

[@jeanivanjose9791]

Hi! What abount using photo on variation button?

[@AlternatePro]

At present you can't do this nativley but you can achieve this with either an app or custom code.. I am working on how best todo this and will do a tutorial on it when ready

[@jeanivanjose9791]

@@AlternatePro Thank you! What's the best app to use in order to achieve this?

[@AlternatePro]

Turns out this can be achieved using custom CSS.. I will do a tutorial on this soon

[@GP-JB]

force select appears to have stopped working

[@AlternatePro]

Will give it a try and come back to you

[@JimmyTRUELOVE]

@@AlternatePro ignore - was using it on the wrong div