Udesly 3.0 - Webflow to Shopify - How to add Product Filter & Search (APP)

Поделиться
HTML-код
  • Опубликовано: 6 янв 2025
  • ХоббиХобби

Комментарии • 82

  • @jasonhebert1656
    @jasonhebert1656 Год назад +1

    This no longer works. They've changed the plugin again. this is why using plugins is a nightmare

    • @AlternatePro
      @AlternatePro  Год назад

      Hi I just tested it and it does still work, did you see the update in the video description?
      You need to swap out the render tags with these
      {% render 'boost-sd-app', type: 'product-filter' %}
      {% render 'boost-sd-app', type: 'recommendation', widgetId: 'collectionpage-071760' %}
      {% render 'boost-sd-app', type: 'recommendation', widgetId: 'collectionpage-146875' %}
      If you run the auto install feature of the app it will comment out the collection page code with {% comment %} and {% endcomment %}.
      Just remove the {% comment %} & {% comment %} and plop the {% render 'boost-sd-app', type: 'product-filter' %} into the code where need. And if you want you can add the recommendation widgets like the above aswell.
      hope that helps
      D

    • @jasonhebert1656
      @jasonhebert1656 Год назад

      ​@@AlternatePro I don't understand what i'm doing wrong then. I get this error Liquid error (snippets/backup-layout line 1): Could not find asset snippets/__default-template.liquid. it's like it's deleting things

    • @jasonhebert1656
      @jasonhebert1656 Год назад

      also no matter what I do my menu disappears and also it's not complete i'm missing menu items too. i'm so frustrated lol. @@AlternatePro

    • @AlternatePro
      @AlternatePro  Год назад

      hi this is because the template code is being commented out . Open the Shopify theme code editor and remove the {% comment %} and {% endcomment %}, then move the {% render 'boost-sd-app', type: 'product-filter' %} to where you want it in the page

    • @jasonhebert1656
      @jasonhebert1656 Год назад

      ok I got it sorted! I found an old install and found the missing file. I'm still having that bizarre issue with the missing menu item though

  • @itzBr0Ski
    @itzBr0Ski 3 года назад +2

    👏🏼👏🏼I don’t believe it I was talking with my client over the weekend and they ask can we get a filter added to our Shopify site…. And bammmmm here’s the video I will use your links to show my appreciation ☺️

    • @AlternatePro
      @AlternatePro  3 года назад +1

      That is awesome! So glad this helped you.. Thanks for using the links every little bit helps grow this channel and the time I can spend helping out with this content.. Super stoked that you have found it useful.

  • @javiercastellanos5260
    @javiercastellanos5260 2 года назад +1

    will definitly be donating soon to encourage more tutorials

    • @AlternatePro
      @AlternatePro  2 года назад

      Thanks Javier.. have something cooking in the wings which will hopefully make everyone's life easier and mean i can focus on this 100%

  • @jasoncolman9542
    @jasoncolman9542 3 года назад +1

    That’s super cool, thank you. Can you do a video on how to add product reviews as well please. You know the kind you find at the bottom of product pages. Your videos have really helped me. Thank you for making them.

    • @AlternatePro
      @AlternatePro  3 года назад +1

      Great suggestion! Will add it to the list.. thanks for your support and feedback.. You ROCK!!

  • @cyrohan21
    @cyrohan21 3 года назад +1

    I was spending some time yesterday to figure out how to add site search on my Webflow-Shopify site. Thanks so much for this video. I wish I didn’t have to use any app at all though… 😅
    Looking forward to seeing more video like this 👍👍 thx

    • @AlternatePro
      @AlternatePro  3 года назад +1

      Glad it was helpful! You can do your own search but filtering is next level and the cost of developing your own vs the cost of subscription for an extremely well crafted plugin can't be undervalued.

    • @cyrohan21
      @cyrohan21 3 года назад

      @@AlternatePro Totally agreed! I thought a Site Search provided by Webflow also could be done and work jsut fine. Good to check from you !!
      and I gotta say that your video quality is getting even better and better !

    • @AlternatePro
      @AlternatePro  3 года назад +1

      Thanks man.. yeah investing A LOT in the channel so hopefully it keeps improving. This video I stupidly moved my microphone placement so there was a ton of echo in my voice (not helped but the massive cold I had) anyway will move the mic back to a overhead position and it will sort the bad audio.

  • @federicosapucci7425
    @federicosapucci7425 3 года назад +2

    Thanks man, I was looking for ages for someone able to explain these Webflow / Udesly / Shopify relations! Just hit subscribe!
    just a small video editing advice: sometimes it is really hard to keep track of what you're doing, try to leave your screen on all the time, and maybe put yourself in a floating window. Because it is really confusing from time to time, too many transitions

    • @AlternatePro
      @AlternatePro  3 года назад +1

      Thanks for the feedback Federico.. I am still very much a student when it comes to this whole RUclips tutorial stuff. So your feedback is golden.. I am redoing some of earlier tutorials soon as they were utterly terrible and the content/plugin has evolved.. I will keep your feedback in mind and will aim to reduce the amount of transitions (will make editing ALOT easier 😁).
      I also plan to reduce the usage and volume of background music so that it's less disctracting.
      Thanks for your valued feedback and subscription.

    • @AlternatePro
      @AlternatePro  3 года назад

      Hi Federico I have just published a new tutorial and have tried to implement your feedback.. Hopefully it's an improvement and easier to follow.. thanks again ruclips.net/video/qjg_5RTzHjw/видео.html

  • @AlternatePro
    @AlternatePro  Год назад +1

    Hi everyone.. Boost Commerce has updated their app and there is one small amend that needs to be made in order to get this to work.. Instead of using the sections tags in this video you now need to use {% render 'boost-sd-app', type: 'product-filter' %}

    • @zenigga
      @zenigga Год назад

      this is only for the filter right, not the search? Cause I've tried this before and it worked but not anymore

    • @jasonhebert1656
      @jasonhebert1656 Год назад

      I don't understand what you mean by this. section tags where? What section?

    • @zenigga
      @zenigga Год назад

      @@jasonhebert1656 we add the names to the section after making it into a symbol right, so do I have to change anything for just the search feature to work

    • @seb-astian-design
      @seb-astian-design Год назад

      Can you tell us where we need to do that? On webflow or when copy and pasting the code from liquid?

  • @Rathulion
    @Rathulion 2 года назад +1

    Extremely helpful tutorial once again! Curious to learn more on Blog filtering as well. Are you planning to do a tutorial on this any time soon?

    • @AlternatePro
      @AlternatePro  2 года назад

      Thanks for the kind feedback.. I will add it to the list.

  • @ItsEricPhung
    @ItsEricPhung 3 года назад +1

    I literally reached out to you today. Thank you so much. You should share your work email so people can contact you for paid work if you are available. Keep up the good work😇

    • @AlternatePro
      @AlternatePro  3 года назад

      Thanks Eric.. I do take on paid work from the channel and the best way to contact me it through hello@alternate.pro - That said I am trying to strike a balance between paid work and building this channel.. But there are plans in the process that hopefully will cover off both.. Thanks for your support.

  • @javiercastellanos5260
    @javiercastellanos5260 2 года назад +1

    Awsome tutorial ! Is this possible to do on other pages as well apart from the CMS or search pages, for example to show products on your homepage in a desired section of something?

    • @AlternatePro
      @AlternatePro  2 года назад

      Hi Thanks.. Sorry for the delayed response.. Yes it is possible the easiest way is to use a collection list in Webflow and then you will be able to select a collection to display on the homepage once converted.. which you select in the Shopify customiser or theme settings. Hope that helps

  • @RogrM6
    @RogrM6 3 года назад

    Thank you! Exactly what I needed!

  • @seb-astian-design
    @seb-astian-design Год назад

    Also does this work the collection-all page (the special udesly page that is collections/all in shopify)? Do I need to add some extra code? Or does this only work on search result page?

  • @tjlee3026
    @tjlee3026 3 года назад

    This is great, thank you! Your video are SUPER helpful!
    Could you do a video on how to add collection filters for a blog? (filter by category etc.) I've tried but when converting over, it breaks!

    • @AlternatePro
      @AlternatePro  3 года назад

      Great suggestion! Will add it to the to do list.. thanks for your feedback and suggestion.

  • @Extremspide101
    @Extremspide101 Год назад +1

    This is awesome and very helpful would you condider implementing a product review app

    • @AlternatePro
      @AlternatePro  Год назад

      Hi there someone else asked this question and I haven’t implemented one of these yet by the judge.me app looks pretty good and has great documentation for v1 theme installation. Given the interest I will add this to the tutorial todo list.

  • @joshturner6249
    @joshturner6249 2 года назад

    I love your tutorials! They have helped me understand soo much, thank you! I have a question on the Search function. The search works from the collection pages, but the Instant Search function has an issue from the individual product pages. But I only noticed when the slug is ...products/product_name. The Instant search adds a "...collection//product/product_name. Which ends in a 404. Any advice on why that does that?

    • @AlternatePro
      @AlternatePro  2 года назад

      Hey Josh.. thanks for the kind words.. if you can ping me a link to hello@alternate.pro and I can see if I can spot anything.

  • @xamznerol
    @xamznerol 3 года назад +1

    Awesome! Do you know if its possible to build multiple product pages?

    • @AlternatePro
      @AlternatePro  3 года назад +1

      Hi there.. yes it is you can create different product templates or use conditionals driven by metafields to show hide sections and functionality for different products. I will do a tutorial on this soon

    • @javiercastellanos5260
      @javiercastellanos5260 2 года назад

      @@AlternatePro I believe this answers my question but I'm a little lost
      SOS

  • @aymericgin9954
    @aymericgin9954 2 года назад

    Hi thank you for you tutorial ! What if we use the load infinity fonction of Finsweet ? Will it work ?

    • @AlternatePro
      @AlternatePro  2 года назад

      Hi iv’e not personally tried but finsweets framework is tailored to function within webflow so you are most likely going to run into a dependency issue.

    • @AlternatePro
      @AlternatePro  2 года назад +4

      I am going to be doing a fully native filter functionality tutorial in the future that uses Shopify’s 2.0 filter functionality.

    • @aymericgin9954
      @aymericgin9954 2 года назад +1

      @@AlternatePro Thank you for your answer ! That will be great and very helpful 🙏🏻
      Thank you

    • @javiercastellanos5260
      @javiercastellanos5260 2 года назад

      @@AlternatePro please mate, youd be saving my life

    • @AlternatePro
      @AlternatePro  2 года назад +1

      Hi there it’s definitely on the cards.. busy finishing up something cool that I hope will make a MASSIVE difference for the community

  • @bailey6759
    @bailey6759 2 года назад +1

    Thanks so much!

  • @РоманЮсипов-р9т
    @РоманЮсипов-р9т 3 года назад

    Hi I want to use fin sweet for shopify are there any nuances or limitations that I should be aware of? I want to make a cms using fin sweet and cookies...

    • @AlternatePro
      @AlternatePro  3 года назад

      Hi Yes the one major limitation is that you can only filter the first 50 products. Shopify only allows you to load 50 products per page and then you have to reference the server to pull down more. The way Finsweet works is it just filters the HTML (so the data has to be present at load). So by all means use Finsweet for modules that won't have more than 50 products or posts but anything more will need an app or custom code that uses a liquid for loop to get the posts/products.

    • @РоманЮсипов-р9т
      @РоманЮсипов-р9т 3 года назад

      @@AlternatePro Thanks a lot

  • @tehseenullah92
    @tehseenullah92 Год назад

    Hey, I have tried this and after adding "{% render 'boost-sd-app', type: 'product-filter' %}" into my div block where I want to display the filter feature but it does not work, and I can see only Boost Commerce's Product Filter & Search - Gif loading icon and the result is not showing.

    • @tehseenullah92
      @tehseenullah92 Год назад

      @AlternatePro please feel free to check this. thank you

    • @AlternatePro
      @AlternatePro  11 месяцев назад

      Hi unfortunately it is difficult for me to tell what's going on without looking at the actual site and code. I filmed this video a long time ago and there have been a number of changes to the app. If you would like a hand let me know and we can book in a call.

  • @jarnevandergeest28
    @jarnevandergeest28 Год назад

    do you know if there is a way to add the Search & Discovery app from shopify in it?

    • @AlternatePro
      @AlternatePro  Год назад

      Hi, there is but it requires significant custom code. at the moment.

  • @javiercastellanos5260
    @javiercastellanos5260 2 года назад

    is there any way we can find help if it doesn't happen to work like it did on the video ?

    • @AlternatePro
      @AlternatePro  2 года назад

      Hi there yes if you want ping over your preview link for your webflow project and I will take a quick look next week to see if I can spot the issue.. alternatively I offer on on one consulting.. on a seperate note I am busy working on something MAJOR which will hopefully make everyone’s lives easier.. more details to come in the following weeks.

    • @javiercastellanos5260
      @javiercastellanos5260 2 года назад

      my objective is to get the home page to also display products and have a fincional search bar like the categories page does. just like the video

  • @seb-astian-design
    @seb-astian-design Год назад

    damn the last tip really saves my ass!! do you think this would work for other filter & search apps as well?

    • @AlternatePro
      @AlternatePro  Год назад +1

      Yeah the process is similar, but how each work will vary depending on how the app is built. So with that you will need to look at their templating documentation or install the plugin on a default shopify theme to see how it integrates itself so that you can then reverse engineer the structure.

    • @seb-astian-design
      @seb-astian-design Год назад

      Thanks! I've contacted Globo's support for their filter and search plugin and they were super helpful...but yeah bit css and liquid knowledge is required.@@AlternatePro

  • @jasonhebert1656
    @jasonhebert1656 Год назад

    Hey guys! So one thing to be careful of is to double check that the Udesly app is properly creating your attributes. I tried to install this and ran into some severe issues. Like Shopify breaking issues and it turns out the culprit was udesly not adding the attributes correctly. Something about that in combination with this plugin equals a complete disaster. Double check your attributes!!!

    • @AlternatePro
      @AlternatePro  Год назад

      Hi Jason.. interested in understanding this more as it’s not something I’ve run into.. any steps to reproduce or are you still having issues? Sometimes the Udesly converter app can miss loading assets which results in a blank theme without any CSS.. the easiest solution is to refresh the browser and rerun the converter app and wait for the addition assets banner to complete before proceeding. Let me know if that helps or if you have any other details.

    • @jasonhebert1656
      @jasonhebert1656 Год назад

      @@AlternatePro honestly I don’t know exactly what happened. It was a huge mess and I couldn’t access the code editor and the backend would work every other load. I re-exported it and made sure the attitudes were correct and it worked as expected. Maybe it was just one of those random bugs

    • @jasonhebert1656
      @jasonhebert1656 Год назад

      Lol attributes not attitudes hahaha

    • @AlternatePro
      @AlternatePro  Год назад

      @@jasonhebert1656 cool man, if you hit the issue again let me know and we can jump on a quick call to take a look together.. would be good to understand as it could be a bit of missing content that needs to be produced.

    • @jasonhebert1656
      @jasonhebert1656 Год назад

      @@AlternatePro I deleted the app. It's not stable and not really practical to use on a udesly theme. Every time you need to update something and convert the theme you have to redo these steps and actually I literally cannot get it to work again on my new install even though everything is identical. Awesome tutorial and keep up the good work but I would definitely not recommend this solution in a serious client job.
      any ideas on alternatives that work a bit better?

  • @przemysaw1566
    @przemysaw1566 2 года назад

    Doesn't work. Don't know why... Components are still showing placeholder text :(

    • @AlternatePro
      @AlternatePro  2 года назад

      Hi make sure you install the app on the theme and then go into the theme code editor on Shopify and swap over the code.. this is a common missed step so hopefully it will help you..

    • @przemysaw1566
      @przemysaw1566 2 года назад +1

      @@AlternateProHi, thanks for Your response. App is installed on theme, sync is done, code is copied. Instant search is working. Filters and search page are not... Do you think I should write to support to Udesly or to Boost?

    • @AlternatePro
      @AlternatePro  2 года назад

      Hi your best bet is to flick me some login credentials for the Shopify admin so I can take a quick look.. I am on holiday at the moment but should have my laptop open at some point over the next few days. Send them to hello@alternate.pro

    • @przemysaw1566
      @przemysaw1566 2 года назад +1

      @@AlternatePro done. thx!

    • @AlternatePro
      @AlternatePro  2 года назад +1

      Hi, all done. Basically, the issue was you did not have a configurable element in the webflow component (i.e. option:text) so when the Udesly App configured the theme it coded the theme with a render tag and not a section tag.
      I have manually edited this for you but you will need to adjust the webflow components to include at least one option:text custom attribute element.

  • @TyronePalmer-u1l
    @TyronePalmer-u1l Год назад

    Is there a way to do this without an app yet?

    • @AlternatePro
      @AlternatePro  11 месяцев назад

      Not that I’m aware off. Shopify base filtering only works with Shopify 2.0 themes.

    • @TyronePalmer-u1l
      @TyronePalmer-u1l 10 месяцев назад

      @@AlternatePro I ended up messaging shopify and they gave me the exact custom attributes to add that would make my search page transfer properly! not sure about the filtering though, I didn't have a need for it.

    • @yuliiakozyr8125
      @yuliiakozyr8125 8 месяцев назад

      @@TyronePalmer-u1l hi, could you please share it?