Shopify Storefront Filtering (Online Store 2.0)

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

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

  • @dangerzone-136
    @dangerzone-136 3 года назад +3

    Really you are rock man. I always love your tutorial. Could you please do one more filtering system using color or size so that we can easily understand whats going on other Filter. Thanks in advance!

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

    GREAT JOB as always! wish you'd include the inks to the previous vids you refer too!

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

      Ok thanks for the feedback! If you need any help finding videos let me know. I sometimes put the links mentioned in the description as well ;)

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

    Thanks for the video! I'm using the Prestige theme and on the Navigation page i only see "Menus", I don't see "collection and search filters". :(

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

      Hmm that's interesting. Shouldn't matter what theme you're using when you're looking for those settings in the admin.
      Have a read of the documentation
      help.shopify.com/en/manual/online-store/themes/customizing-themes/storefront-filters#check-if-your-theme-supports-filtering

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

    Chris do you think, after I take your advanced Shopify course, that I'll be able to code a simple upsell on a product page? Basically, imagine you're on a product page for a red t-shirt and there's an upsell for a red pair of shorts, if you click the checkbox next to the shorts and then click the add to Cart button, both the t-shirt and the shorts are added to the cart. Or even simpler, if you check the box then shorts are added to the Cart and if you uncheck the box then they are removed...

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

      Hi Michael. With all my classes and tutorials I try to focus on fundamentals rather than teaching specific how-to's. The idea is that you can use your skills to figure out an appropriate solution rather than copy solutions from me.
      For the particular use case you mentioned, the main skill there is Javascript and working with the Cart AJAX API. Take a look at the curriculum of any of the classes and see if that matches up ;)
      Also, it worth mentioning that I recently covered what you're talking about here specifically on my Patreon.
      www.patreon.com/shopifydeveloper
      Skillshare class access is included in your membership ;)

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

      @@CodewithChristheFreelancer Thanks Chris, I'm checking this out now. I really hope you continue teaching on Shopify 2.0 because it's not been easy to find quality tutorials. Yours are world class!!

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

    on my side no collection-filters and no price range, that's weird because on the documentation there was a price range

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

    Hii Chris, Please make a video for Shopify Speed Optimization

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

    Thank you so much Chris, I have a question, How can I use paginate of liquid tag for response data in case I have more than 1000 product?

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

    Thanks a lot Chris for detailed explanation that really help ❤️❤️❤️❤️

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

    Awesome video as always... Thank you so much sir.
    Sir, can you please make a video on how to make a customizabel blog post frame work by editing the code.

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

      Thank you Dharmesh! Not sure what you mean by 'customizabel blog post frame work' though

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

    excellent tutorial...........

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

    du do ecom chris?

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

    How does filtering and meta data effect SEO ?

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

      Storefront filtering is based on query parameters so, given that there is a change in url, there should be an effect on SEO too.

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

      @@CodewithChristheFreelancer will this lead to duplicate content issues ?

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

      Not sure. You'd have to ask an SEO expert that question.

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

    Is there any way so we can use tag filter and dynamic filter both of them together

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

      Dynamic filter? If you're referring to the new storefront filters (discussed in the video) then yes, you can combine both at the same time.

    • @NizaamTechnology
      @NizaamTechnology 6 месяцев назад

      @@CodewithChristheFreelancer Hello brother. Do we have a video on this?

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

    how to display variants as single products in collection page ?

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

      For that, you would need to modify your collection template to include a nested loop. So something like:
      {% for product in collection.products %}
      {% for variant in product.variants %}
      [HTML Code here]
      {% endfor %}
      {% endfor %}

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

    Thanks for the video, excellent explanation 🤟

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

    Thanks sir ,
    but can I get your CSS styling source code, so as to style my filter with the same style as yours

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

    This is awesome! For some reason I don't see the collection and search filters on my end though.

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

      The two parts to make them show on your theme are:
      1) Turning them on inside the 'Navigation' part of your admin
      2) Placing the required code into your theme.
      If you do both of those, it should work

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

    Hi Chris, I have a unique use case I was wondering if it's possible. I work with automotive data like SKU, Year, Make, Model, Engine, etc and I have thousands of records per SKUs. I was wondering what the most efficient way to manage this data in Shopify.
    Currently, this data is hosted in a system that has an API I can a Year, Make, Model, Engine query and get back SKU results to filter products in Shopify, but I'm wondering if there's a way the dynamic Year Make Model filters can be added to Shopify, then call the API somehow.
    Love the videos, learned a ton on this one, but I am still trying to figure out a good solution.

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

      Hi Wilson. What's the limitation you're experiencing? Are you saying the product list data isn't stored on Shopify?

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

      @@CodewithChristheFreelancer It isn’t stored no.

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

    Great video! I have a question: I am using the new Dawn theme and When I test the filters on the mobile and desktop under my customization it does not let me select the the filters. Could it be because of the coding that was not added?

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

    Does it play well with tag based filtering urls? Thanks for the superb video.

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

      Not sure what you mean by 'play well'. These are new filters. Tag filters are still current.

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

    Hello Chris, I am new to this can you please tell me how can add different filter options under navigation filter, like you have brand, size, price, but i want to put there Material, Gender, Type etc, Can you help me with that please :)

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

      This page on the official documentation should help
      help.shopify.com/en/manual/online-store/themes/customizing-themes/storefront-filters

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

    Can we add a filter on any page on the dawn theme? I want to filter Globally.

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

      What do you mean by 'filter globally'?

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

      @@CodewithChristheFreelancer I want to filter on the home page when someone searches it. It will go to the
      collection page

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

      Ok. So you're asking if you can use filters on search in Shopify. Search is a completely different API and will land the user on a completely different page.
      shopify.dev/api/usage/search-syntax

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

    How do I upload my background to Shopify dawn theme?

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

      Your background? As in an image that you'd like to use as a background image on your website?

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

      @@CodewithChristheFreelancer yes I’ve been trying for a few days, but I think Shopify updated the theme code a few weeks ago so previous codes aren’t working .

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

      You can either upload the file to the 'files' section of your Shopify settings or store it in the assets folder of your theme.
      Then use the background-image property to show it on your web page
      www.w3schools.com/cssref/pr_background-image.asp

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

      @@CodewithChristheFreelancer can you make a video of the process cause I have tried everything already. As far as my knowledge just putting in the code at the bottom of the file just won’t work anymore.

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

    Hi
    Is it possible to hide search parameters from appending in URL

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

    Hi Chris:) I recently started looking into learning Shopify theme development after finishing a course on front end design and your videos have been a huge help, thank you for all the info!! I've seen a few designers selling Shopify themes/ templates on Etsy and I'm wondering if you know what platform they might be using to build them? I was going to try to build my designs on Webflow and convert them into themes from there using the Udesly app. Thanks again!!:)

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

      Hi Aimee. I'm not sure what you mean by 'platform used to build them'. Theme development is just a combination of HTML, CSS, JS and Liquid code. I write mine in an IDE called VS Code. If you're asking if there is an app like Webflow for Shopify Theme Development where you can use a UI to build your theme, then I don't know. Haven't heard about any tool like that except for Webflow itself.

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

      Ok awesome thank you for the reply. Would you be able to send a zip file of the theme you create in VS Code to someone via email and have them be able to customize it within shopify after uploading it? Just trying to figure out if I can create a theme in VS code and then sell the zip file on Etsy.

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

      Yes. That's exactly how it works.
      For a detailed look at how to set up the customiser settings, take a look at the lesson on JSON Schemas inside my Skillshare class
      skl.sh/2AETO9r

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

    my filters stop working once I hit 1,000 items, shopify tells me that is the most you can filter.

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

    Awesome tutorials.
    can we filter collection/search by both Tag And Metafields ??

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

      You can combine filtering via tags with the storefront filters and metafields is an option for storefront filtering so I would say so. Why don't you test it and find out?