Udesly 3.0 - Webflow to Shopify - Editable Sections - Updated

[@conchabelo]

Amazing stuff! These tutorials are so helpful!

[@AlternatePro]

Thanks for the comment.. glad you are finding them helpful. Cheers cheers

[@graphyteco]

JOB DONE! Thank you for this David!

[@AlternatePro]

My Pleasure

[@cyrohan21]

Another great video. thanks so much!!

[@AlternatePro]

Glad you enjoyed it!

[@SIFRAAAA]

Great Tutorial, One question, How could you make a section preset? Preset meaning it can be draggable or place the section in different part of the page? Could udesly do that?

[@AlternatePro]

Hi Udesly themes are not Shopify 2.0 enabled.. meaning they do not use the “new” sections anywhere JSON structure. So at the moment sections have to be defined in their locations.. the reason being comes down to the way Webflow leverages interactions and how it needs to know where each component is.

[@papercraneca]

Disclaimer for anybody potentially reading this: the "richtext" part of the video doesn't quite work with migrations. Shopify's rich text doesn't support the same elements that Webflow's does, so it will erase any corresponding text ~90% of the time when porting a site over. To make it work, you need to change the "option:richtext" to "option:html" in which case you'll just need to write the tags yourself if you change it in the customizer. This has been confirmed by Udesly support.

[@AlternatePro]

Correct.. the Shopify rich text just allows you to make some pretty minor tweaks to the text (I.e bold text). It’s definitely quiet far from the Webflow rich “content” that we are use too.. the only like for like native rich “content” editor is the page content editor on Shopify which supports HTML markup and has a WSIWIG editor. However you can use a app like Accentuate Custom Fields to create a HTML metafield which has a WSIWIG editor if needed.

[@anitabueno85]

Love it, Thank u for sharing

[@AlternatePro]

Thanks for watching!

[@muhammadumeralam3591]

Hi ... excellent tutorial ....buti have one question: is it necessary to create symbol for editable section .... ?

[@AlternatePro]

Hi yes you need to create a symbol. Also if you do not have any attributes like option:text on any elements within the symbol it will instead be converted to a snippet

[@hannesmue5054]

i convert the sections into components in webflow and add the correct attributes. unfortunately, shopify only shows me that this page does not contain any sections. is there anything else i need to consider? this still works because the conversion from symbol to component has been changed

[@juanro10]

Thanks for this amazing content! Quick Question. For Header, Template and Footer structure within Shopify, besides components in WF, is there any a way to achieve that organization?

[@AlternatePro]

Hi Yes.. you just have to use the Wordpress respective attributes that link into the Wordpress navigation Ui.

[@tompoynor1189]

legend!

[@AlternatePro]

Thanks

[@Walizen]

Any showcase of udesly them on WordPress platform also backend access? Thanks for the tuts!

[@AlternatePro]

Hi sorry nope. At best I could give you access to the backend when I do another wordpress tutorial.. but being honest my focus will be on Jamstack and Shopify in the near future.

[@fusionmotorsportsusa]

Does the img-size work if the photo is a background of a div?

[@AlternatePro]

Hi nope.. as it’s a background image it doesn’t have the same HTML attributes so there is no srcset it would use a image-set which sounds like the same thing but it isn’t, this is standard html/css.. if you want to have the srcset then you need to use a image element and use absolute / relative positioning. Hope that helps

[@juliensow5597]

Thanks for the help man! Got this error following the process : Liquid error in tag 'section' - home-hero is not a valid section type. Could you help us on that?

[@AlternatePro]

Hey thanks.. can you ping me a editor preview link to [e-mail] and I can take a quick look.. it will be something minor that just needs a tweak and I should be able to spot it quick.. cheers

[@leonardomaldonadodesign6801]

Hey mate! Great content as always. Is it possible to make a slider editable? With the possibility to add and remove slides? Do you have any suggestions for that workflow? Thanks a lot again.

[@AlternatePro]

Hey hey I seem to be getting this question a lot so will do a tutorial.. this can be done with blocks.. sorry for the delayed response.

[@leonardomaldonadodesign6801]

@@AlternatePro I managed to find another solution. But not as fluid as the one with blocks. I added new fields to the cms e-commerce collection/category and linked each slide to the respective collection. The only problem is that the client cannot use less or more slides on shopify. Not the best solution but it works.

[@thecommercebureau]

Great! Love your videos. Thank you. Is there any way of setting the default values for section or block elements? I noticed the background colour of the icon container in the features blocks came through black but it was light blue when exported from Webflow.

[@AlternatePro]

Hi because we are technically not defining a default value in the HTML markup as we have a metafield specified the browser doesn’t know what todo so it’s defaulting to black.. there probably is a workaround but I would need to play with it.. maybe some custom code embed with conditionals but as I said it’s probably a bit overkill and more work than needed.

[@thecommercebureau]

@@AlternatePro Great. Thanks for the clarification.

[@hitbox7422]

Very cool stuff, just found your content over some research of how to use udesly effectively, and this feature is a gamechanger for one of my clients in terms of webflow to shopify customization. Had to work with the buy button application until now, since the ecommerce limit of webflow is kinda destroying the purpose of using dynamic collection lists in the first place. A question though, would it be problematic to convert a template without using the data package for including the products ? like in just using webflow to generate a custom template and generating the input of the product pages within shopify ? Since converting the template still leaves you with the 50 product variation limit of webflow.

[@AlternatePro]

Hi and welcome. I think I understand your question basically when you create a Shopify theme through this process you can completely unshackle webflow limitations on custom fields (you need to embed native metafields - there is a tutorial on this), product variants (limited to Shopify’s 100) etc.. what you are doing is creating a fully functional theme for the destination platform and any content placed on webflow can be considered placed holder for design purposes (but it can be brought across by importing the data) hope that answers you question.. cheers cheers

[@toryche1310]

Thank you so much for your videos! They are very helpful! Some of my sections converted perfectly, but for others I keep getting an error "Error in tag 'section' - 'section' is not a valid section type". Would really appreciate your advice on this!

[@toryche1310]

I rebuilt the sections and the error disappeared. Still not sure what it was though.

[@AlternatePro]

Strange.. Glad you got it sorted. Would be interesting to see the exported files of the problem so that I can see what happened by looking at the code.

[@hitbox7422]

The error kinda allready tells you the problem. It seems like udesly had problems converting the webflow section html tag. Since this happens mainly with js-libraries my guess is that there was an update in between you converting the template and webflow uploading new content, thus messing up some identification process of how sections are recognized by third party programms.

[@lodeyo]

I have a section on my home page where I want to be able to create blocks for featured products with alternating left-aligned layout and right-aligned layout. Currently I have both variations in my template one after the other "featured product block left" and "featured product block right" but when I try to add multiple alternating blocks in the shopify customizer, they all stack together instead of alternating.

[@mjmkevin]

I think I am having the same problem. I would like to use multiple different kinds of blocks, like have one for image section, one for title section etc. (This so my client can rearrange the blocks in a way they prefer with each new product launch). But I can only arrange these blocks in the way I have arranged them in Webflow. So the drag and drop functionality of the Shopify customiser is not working. Did you find a solution? Thanks!

[@lodeyo]

@@mjmkevin Hey Kevin! So i messaged support and they explained that unless you add some custom javascript (or maybe its possible with altering the liquid and adding some logic) , it is not possible to have variations of blocks within a section. Since posting that comment 3 weeks ago, I actually took a dive into learning liquid so that I could modify and customize the exported webflow template. It took me a couple days to get a solid understanding of how everything works, and although I was initially intimidated, it was actually pretty straightforward and much easier than I expected. I found that using my exported udesly/webflow theme as a foundation also helped to give me a solid enough base to work off of. As to what the solution is for what you are trying to do with being able to set up modular sections of varying content, there are a few things that need to happen. 1 is that each of those need to exist as a seperate "section"xxx .liquid file in your theme sections folder. 2 is that the theme template needs to be formatted as a .json file, which is the newer shopify 3.0 format, instead of .liquid which is what udesly currently outputs. I asked the udesly support about whether they had plans to update their platform to use the json shopify format so that pages could be designed in webflow to take advantage of this more flexible approach, and they said sometime in the future they will have an update for this. in the meantime, it needs to be edited manually in the theme files. There are some youtube videos that walk through this process, although I did find it a somewhat messy process.

[@mjmkevin]

Hi thanks for your reply! Ok I’ll dive into transforming the index.liquid into index.json using a KZbin tutorial. So in that way it would be possible to rearrange the sections? Great that Udesly is working on this! I heard in some videos the previous version (I assume that is Shopify 1.0) was only able to move sections on the homepage (which would be fine for my client) but that doesn’t seem to be possible even with a index.liquid. Btw are you on the Udesly Slack?

[@AlternatePro]

Hi Blocks will only adopt a single layout. You are trying to use Shopify's new JSON sections functionality but this is not supprted at the moment within the Udesly conversion process due to the way Webflow handles interactions. Think of blocks as a repeatable element with a defined layout (Team members, Categories navigation, custom mega menu item with icon - title & description) they are all the same layout.

[@mjmkevin]

@@AlternatePro hi, I see ok! Are you guys working on this? It’s crucial for my client to have some customisation (especially on the homepage). Could you confirm if it is possible to convert the Udesly Template output from liquid to json/to 2.0? There are tutorials for this to make stores 2.0 compatible and was planning to try this out. Thanks! If not, I was thinking of using checkboxes to hide certain parts of a block, to make it dynamic in that way. But better would be to use (radio buttons) options instead of checkboxes so only one would be able to select at a time?

[@mjmkevin]

I have a question about the blocks. I would like to use multiple different kinds of blocks, like have one for image section, one for title section etc. (This so my client can rearrange the blocks in a way they prefer with each new product launch). But I can only arrange these blocks in the way I have arranged them in Webflow. So the drag and drop functionality of the Shopify customiser is not working. Any ideas? Thank you!

[@AlternatePro]

Hi I think you are referencing Shopify 2.0 sections anywhere functionality. As of yet this is not supported within the Udesly workflow due to limitations on Webflow's end and how they handle interactions.

[@abdelwahab7308]

Thank you so much! I have a question, how can we make the hero background image customizable? and is it possibe to make hero sliders using blocks?

[@AlternatePro]

Hi there you can add the option:image attribute to a div.. I hope that helps

[@РоманЮсипов-р9т]

Hello cool video! keep doing the same! What do you think about updating finnsweet in the context of conversion for shopify?

[@AlternatePro]

Hey and thanks. Finsweet is basically just javascript and HTML so will work fine with a few caveats. When doing things like filtering or anything that's referencing collection items (i.e products) you will be limited to Shopify's objects per page on load limit of 50. Basically, the way Finsweet CMS library filtering and other Webflow filtering solutions work is by filtering the items loaded within the HTML so when you use these solutions in Shopify they will only work on the first 50 items loaded by Shopify. Now Finsweet launched an update to the way they work (Attributes) and there is a Javascript Developer API in the works from what I understand so this might be usable for this purpose but I haven't played with it yet. But it's on the to-do list. In the meantime I did a Filtering tutorial that uses an awesome filtering app with the key difference is that filtering apps are able to reference the server to pull down more objects. Hope that helps clarify things for you.

[@baron5978]

Followed this to the T and when I go into the Shopify Customizer, that heading that I gave the attribute (option:text) (heading) to isn't editable. I must be missing something. Do I have to do something to the section itself in Webflow to tell Shopify that it's a section?

[@AlternatePro]

Hi you need to make the section a symbol.. if you can flick me over your webflow preview link to [e-mail] and I’ll see if I can spot anything.. cheers

[@baron5978]

@@AlternatePro Thank you - I missed that part in your video and in Udesly's instructions. Another question - Udesly's docs say that when reuploading a new config file/conversion (for example, if I build a new page that needs to be added to an existing project on shopify) means "you will lose though the settings of the Shopify Customizer" - what exactly is being erased in the Customizer? Does this mean a new conversion file will erase any changes that the client may have made to content on the pages? It makes sense but seems like a deal breaker. I'll have to tell my clients that I can't add any new pages unless I want to copy all of their new content somewhere and paste it into the webflow project.

[@AlternatePro]

Hi, this is no different to the native Shopify Workflow. Basically, what you need to do is copy the "content" of the settings_data.json file and paste it into the new theme file's settings_data.json file. And you may need to edit any locales text (such as en.default.json) as well if you are editing an existing theme, such as just adding a new section with new functionality without installing an all-new theme. You only need to edit these files if you have added new elements to the theme that are not controlled via the customiser and have a language translation (such as a new button or static titles or whatever). You will see the theme state something like missing_translation_12345. I will do a tutorial on this soonish as it is pretty useful to know and can seem a bit confusing at the start, but once you understand the process, it really opens things up and makes iterative development easier.

[@baron5978]

@@AlternatePro Gotcha - I'm new to the Webflow - Shopify conversion (and new to Shopify itslef) thing and trying to get a complete grasp on it to make sure it even makes sense to offer it to clients without some kind of blocker. I don't need a client request come through that I can't do, such as adding a new page, without it erasing existing content. Thanks for the replies.

[@haunted_tales_stories]

Hi, I ran into an issue where these editable section work perfectly on the homepage but on all other pages they don't work. So the sections in Shopify don't show up - is there anything I've missed?

[@AlternatePro]

Hi not sure to be honest, if you can ping over your webflow edit preview link ill take a quick look to see if anything jumps out

[@Thehouseoftatum]

Hi what if im exporting webflow sites without udesly what do put in custom attributes?

[@AlternatePro]

Hi this is a Udesly centric workflow so needs Udesly in order to function.

[@thebigbadman04]

Is it mandatory to have the udesly plugin in wordpress installed for the wordpress theme to work in the future?

[@AlternatePro]

Yes it is.. you need it to manage the theme and make edits to the site using the built in editor.

[@thebigbadman04]

@@AlternatePro Thanks for answering my question. Last question, would it be possible to remove the plugin when done editing the theme after importing it in Wordpress? And maybe later install the plugin again when the client decides something needs to be changed?

[@AlternatePro]

@@thebigbadman04 Hey never tried really but I would assume no.. the Udesly plugin is installed automatically with the publishing of the theme and everything is linked so if you deleted the plugin you would lose critical functionality that’s driving the theme and the content management.. so I would not recommend it.

[@benjaminchurchill3686]

Is it possible to have the ability to reorder, add and remove section blocks in Shopify much like a typical shopify template that has a bunch of 'Blocks' That you are free to organize how you like within the theme customizer?

[@AlternatePro]

Hi dynamic sections are limited to the homepage at the moment.. sections everywhere is a Shopify 2.0 functionality which currently isn’t supported by Udesly. You can used blocks within the sections as discussed in this video. Hope that helps.

[@benjaminchurchill3686]

@@AlternatePro I actually found a way to do this which might be worth doing a tutorial on. For each section, you must set presets in the schema ie: "presets": [{ "name": "Hero Section", }] Additionally, you must add {{content_for_index}} in index.liquid where you want the 'Add sections' Button and dropdown to appear. I feel like Udesly could add these snippets of code when the conversion happens to make it a more native shopify experience.

[@AlternatePro]

@@benjaminchurchill3686 cool nice one.. will have a tinker

[@AlternatePro]

Just had a thought.. a issue may present itself if you are adding a section to a page THAT wasn’t placed on a page in webflow at the the time of export. Basically your Webflow interactions won’t work correctly as the webflow.js file will not be updated so you will need to place all modules on all pages for this to work.

[@benjaminchurchill3686]

@@AlternatePro To fix that I just made sure that I made the section available to each page in the schema of each section within Shopify.

[@koyitsang3]

Does this only work for static pages and not dynamic pages (with CMS)?

[@AlternatePro]

Hi yes it works with dynamic/CMS pages but because Udesly is currently not building Shopify 2.0 themes the editable sections will be a single instance across all of the dynamic pages that use the specific template.. this means if you added say a call to action section on your product pages then the same call to action module and it’s content would be shared across all product pages (they are not individually author-able). If you want to have different content per product then you will need to use custom metafields and conditionals.. check out my advanced metafields tutorial.kzbin.info/www/bejne/eKeydmN9bbh0pM0

[@Byaprilco]

Hey guys! Is it possible to include this particular section into an existing 2.0/ standard Shopify Theme? Also - do we need paid subscriptions for Webflow & Udesly to be able to perform these tasks?

[@AlternatePro]

Hey there although technically possible.. it would not be easy and you would need to know what you are doing with liquid, CSS, and JavaScript.. basically when you export and run the site through Udesly it packages up the site and includes all the code needed to run the site as a unified theme.. breaking a section out and then making a hybrid would mean that you would probably be missing JavaScript dependencies which would break the modules and in particular any interactions / webflow animations. In regards to your second question to use Udesly you need an account plan with Webflow so that you can export code but you do not need a CMS plan.. regarding Udesly the free version is watermarked and I think has some other limitations. Hope that helps clarify things for you.

[@AlternatePro]

Also Shopify 2.0 is their new way of working and currently Udesly 3.0 builds themes using 1.0.. but as the beta moves on this will be upgraded.. is this a big deal?? Yep as they are broadly different with regards to how they utilise JSON and liquid structures so a Udesly theme right now won't play nice in Shopify 2.0 land at the moment.

[@nicsasawa4134]

@@AlternatePro Do you know whether Udesly has updated their beta to be compatible with shopify 2.0 at this point?

[@jamesdaniel3184]

Does Webflow animations still work when intergrated to shopify?

[@AlternatePro]

Hi yes they do.. but there is a caveat.. if you create a element (eg. top navigation) with interactions (such as click to open) and then you only place it on the homepage and then decide you want to add the section code to a new page on Shopify by custom coding it directly in Shopify by editing the theme code.. then the interactions won’t work.. this is because webflow interactions need to know where the element is that it’s animating so in the theme assets folder when you export there is a webflow.js file that controls the interactions.. so if you hit this limitation just add the element to the page you want in webflow, re-export the theme and then just replace the webflow.js file on the theme if you don’t want to change the whole theme.

[@abchk_yt4322]

Hi, If I only create the Shopify theme for my shop. Since I can edit on webflow by myself. Do I still need editable sections? Thanks

[@AlternatePro]

Hi it’s really up to you.. if you are not going to change things on your site or you are happy to make the amends via code or deploying your site then yeah no drama.. some of my client sites only have limited edit ability as I do most text amends in visual studio.

[@abchk_yt4322]

@@AlternatePro Thank you.

[@serhatsozeri1911]

Hi, I tried this 5 months ago with your first video. It worked. Now I tried it again but it doesn't show any editable fields. Is it still working?

[@AlternatePro]

Hey there.. yes it’s still working on my end.. I did a conversion yesterday.. Check that you have the custom attributes configured correctly and that you have converted the section in a symbol. Cheer cheers

[@serhatsozeri1911]

@@AlternatePro unfortunately it doesn't work for me, I create a section then add a heading, paragraph, button and give Heading option:text, Paragraph option:richtext and Button option:url. But it does not work!

[@AlternatePro]

@@serhatsozeri1911 Hi Serhat.. I will need to see whats going on to help you.. I offer 1 on 1 training if you would like to book an hour?

[@lucas7q407]

My customiser doesn’t show the attributes although I added all the necessary attributes in Webflow :(((((

[@AlternatePro]

Hi have you converted your section into a symbol?

[@certifieduxdesigner7322]

Can we make shopify 2.0 theme with webflow

[@AlternatePro]

Not yet but this is on the development roadmap from what I understand.

[@balanceandjustice777]

Hey there, do you have an email I contact you at? This is my first conversion of Weblow to Shopify and the client needs the theme to be editable within shopify. I followed your video but the issue persists. Please let me know if we can schedule a time to chat.

[@AlternatePro]

Hi Soleil you can reach me on [e-mail]

[@cobuildchris]

Thanks for these tutorials, really utilizing them to help build this new Webflow to Shopify project. Keep 'em coming bud! Question I believe it related to sections, specifically setting a background image on a section and being able to change the background image in Shopify after the conversion. In Udesly University > General > Sections ... I see option:bgcolor but no option:bgimage Is it possible to let the client change a background image of a section/symbol made in Webflow? For example: imgur.com/a/wGQHkLu That section has a "placeholder1.svg" as it's background image. After the export from Webflow to Shopify we want to be able to change that background image within Shopify. Is that possible, and if so can you point us in the right direction? Thank you in advance!

[@AlternatePro]

Hi there the attribute you are looking for is option:image hope that helps

[@cobuildchris]

@@AlternatePro Thanks for the quick reply... does just adding option:image to the symbol's custom attributes in Webflow make that magic work? In this screenshot 'Intro Header' is the symbol. imgur.com/a/Qt1s2DI How does Shopify know that image should be applied to the background of that section/symbol?

[@AlternatePro]

@@cobuildchris hi nope apply it to a div within the section.

[@cobuildchris]

By Jove I think I've got it! It did work when I put a div inside the section that was converted to a symbol. That inner div had a background image applied with the background > image & gradient option in Webflow and the custom attribute option:image added to it. Finally, the image selector showed up in Shopify when editing that symbol/section. Success! Thank you for the guidance. : )

[@ecomkevv]

Hello, I need some help understanding this. I have a section and I followed your guide, but when it comes down to Webflow to Shopify, it says I need Ecommerce elements, and what is that? I only want to create a couple sections, not a whole purchase page. Maybe I don't fully understand?

[@AlternatePro]

Hi there in order for the Webflow to Shopify conversion to work you need to have activated Webflows e-commerce functionality. So click the shopping cart icon in the left hand menu when in the Webflow designer and say yes to adding the pages and modules. Hope that helps