Taylor Page | Web Dev + Shopify Expert

Taylor Page | Web Dev + Shopify Expert

Freelance web developer and Shopify Expert working with clients big and small on Shopify to bring better customer experiences through theme customizations.

My goal for this channel is to help provide helpful content for Shopify merchants and developers so we can all get better with Shopify.

I do business under The Pages Media.

Пікірлер

  • @iamspens
    @iamspens3 сағат бұрын

    You are a rockstar! Thank you so much!

  • @chubycheeks99
    @chubycheeks994 күн бұрын

    Can I add app blocks with this method?

  • @chubycheeks99
    @chubycheeks994 күн бұрын

    more specifically, can i add an app block for subscription? When i did this, I was able to add the app block but was hit with the same message: "Cart Error: cannot apply selling plan to variant" when i tried to check out

  • @JoaumPDR
    @JoaumPDR25 күн бұрын

    hey man, im trying to remove lazyload from my product page and when i delete the loading=lazy the image disapears. Do you have any clue what i can do?

  • @TRPage_dev
    @TRPage_dev21 күн бұрын

    A lot of this is going to depend on your theme and version. There are some themes now as well where there's an updated method for this based on a newly available Liquid property for section index (which would be the new way forward). It's possible your theme already has this implemented.

  • @JoaumPDR
    @JoaumPDR21 күн бұрын

    @@TRPage_dev im using a theme called warehouse, have you heard of? And about that updated method do you have any recommendations on where i can lean or search about? Any help would be great, my LCP (the image of the product) is super high and 50-70% of its loading time is delayed because of lazyloading

  • @MuhammadIhsan-wx2lo
    @MuhammadIhsan-wx2lo26 күн бұрын

    It easy to go with this type of error. If you still want to help people please go with the store which has store speed less than 30 and have error like "unused Css", "unused javascript"

  • @user-cu6zt3of4y
    @user-cu6zt3of4y27 күн бұрын

    Super helpful, thank you

  • @ShadyAnis
    @ShadyAnis2 ай бұрын

    Thanks, Taylor. That was very useful.

  • @memeuloveme8490
    @memeuloveme84902 ай бұрын

    Omg thank you! 😊

  • @marcelfullerton
    @marcelfullerton3 ай бұрын

    Have any idea how to have display variants metafields and have them dynamically change on choosing another variant?

  • @TRPage_dev
    @TRPage_dev3 ай бұрын

    You'll have to do this with Javascript and tie into the theme's function that fires whenever a variant changes to conditionally display.

  • @DriftingSquirrel
    @DriftingSquirrel3 ай бұрын

    Can we use this to have tables? Like size chart for clothing

  • @TRPage_dev
    @TRPage_dev3 ай бұрын

    Yep. One of the best use-cases for this and easier to manage than a lot of other options (like copying and pasting into single-line text fields)

  • @renek.6434
    @renek.64344 ай бұрын

    It’s nice they added that. However I can’t believe it still needs an extra app to create an automated collection based on Created Date (or for many other cases)

  • @TRPage_dev
    @TRPage_dev3 ай бұрын

    I'd look into Shopify Flow (also free) to do something like this from an automated standpoint. You could have a tag get added or something along those lines but yeah, I get how annoying it is when something isn't available you think should be. help.shopify.com/en/manual/shopify-flow/reference/triggers

  • @EdTLive
    @EdTLive4 ай бұрын

    This is gold! Page performance went from 40 to 58 immediately after applying this fix.

  • @user-we7tb9rc1d
    @user-we7tb9rc1d4 ай бұрын

    Thanks, you're great!

  • @assaadzouhairi8770
    @assaadzouhairi87705 ай бұрын

    Hi , i have some problem with lazy load image if you can help me to fix this please

  • @concept1000
    @concept10006 ай бұрын

    Hi Taylor, I am using Dawn 12.0.0 and am trying to replicae the process in your video. However when I go into my 'image-with-text.liquid' there is no reference to 'lazy'. Can you assit me at all please?

  • @TRPage_dev
    @TRPage_dev6 ай бұрын

    This is a good callout, as in the newest version of Dawn (12.0.0 as of today) this is an unnecessary change because it's utilizing the new Liquid property for section.index. It will natively not lazyload and this fix is no longer required. I need to do an updated video on sections not leveraging this instead. This sort of a fix is only necessary for earlier versions of Dawn (before 12.0.0).

  • @concept1000
    @concept10006 ай бұрын

    @@TRPage_dev Thanks for getting back to me. Do you think you feature in the video update, how to add lazy loading below the fold (if that is possible). Thanks again & great video!!

  • @TRPage_dev
    @TRPage_dev6 ай бұрын

    @@concept1000 native HTML lazyloading already is one of the best ways to go, but using the liquid tags also allow for loading attributes to indicate lazy vs eager. Great suggestions, I need to get back into doing these videos - just need to find the time!

  • @areaofeffect100
    @areaofeffect1007 ай бұрын

    Thank you so much, this video help me understand a lot of things that I couldn't on my own. I have zero knowledge on html, css, and liquid, yet i successfully created my first custom section because of this video. Thanks a lot!

  • @Swapnesh18
    @Swapnesh187 ай бұрын

    Thanks for the video. It does help newbie shopify dev like me😅 keep it up I'll love to see more from you

  • @idoxido
    @idoxido7 ай бұрын

    Why do I get "Invalid schema: setting with id="disable_lazy" default must be a boolean"?

  • @shopifydevs
    @shopifydevs8 ай бұрын

    Awesome demo Taylor! Thanks for sharing this!

  • @TRPage_dev
    @TRPage_dev8 ай бұрын

    Y'all keep making cool stuff and I'll keep sharing videos about it!

  • @yaolu4764
    @yaolu47648 ай бұрын

    thank you for your turorial!

  • @Ed-wc7fp
    @Ed-wc7fp8 ай бұрын

    Great tutorial works a treat. Good workaround for plain text values

  • @taylorpage8648
    @taylorpage86488 ай бұрын

    This still works just fine - use this regularly and no issues with this in active production. 9 times out of 10 the issue is you're trying to use an input field that isn't valid with multi-line text. Just tested in a store as well with new values. Check the input field, your JSON, and that your HTMl isn't broken. You should get some sort of an error message when you're not doing this properly in the customizer.

  • @Ed-wc7fp
    @Ed-wc7fp8 ай бұрын

    You’re totally right. I did not watch carefully enough. I’ve finished linking them all to unnecessary pages now lol. Ahh well. Great bud I’ll edit comment l

  • @TRPage_dev
    @TRPage_dev8 ай бұрын

    @@Ed-wc7fp Appreciate the follow-up and glad you got it working. It is pretty specific in how you have to implement.

  • @rushka1354
    @rushka13549 ай бұрын

    Hi Taylor. Thx for this video. I am new to Shopify and have purchased the Focal Theme. I have tried many things including your info but nothing seems to work for what I am trying to accomplish. Trying to add a 2 column by 11 row table to my measurement chart for a product. Does not seem to want to work. Can you shed any advice on this please. Tried added the json to the metafield. Did not work. I am really stumped and cannot move forward. Would greatly appreciate your advice. Thx much!

  • @TRPage_dev
    @TRPage_dev9 ай бұрын

    If it's not working, then either the JSON or the HTML is broken in how you're trying to use this and I couldn't speculate without actually looking at code. My advice would be to try and work backwards and also make sure you're trying to render this in a compatible field.

  • @mikestaebell2015
    @mikestaebell20159 ай бұрын

    You are a genius! Thank you sir, earned a sub :)

  • @TRPage_dev
    @TRPage_dev9 ай бұрын

    Glad this helped out in some way!

  • @victorbustos178
    @victorbustos1789 ай бұрын

    Nice video. I'd like to ask: what would you do if the problem is with the featured category? How can you apply the same solution to items loaded on the main page? I've tried to fix that but haven't found a solution yet."

  • @TRPage_dev
    @TRPage_dev9 ай бұрын

    This is just the simplest implementation I could showcase here - if you want to do this in a different section or category, you'd just need to find in the code where the image is loading and leverage this same sort of conditional split to serve content one way or another.

  • @shopifydevs
    @shopifydevs9 ай бұрын

    Great to see this!

  • @TRPage_dev
    @TRPage_dev9 ай бұрын

    Thanks for the support!

  • @carlocrighton
    @carlocrighton9 ай бұрын

    OK useful feature to highlight, thank you, but what is a good use case (because it looks to me as if it replicates what you can do with Tags and Automated Collections)?

  • @TRPage_dev
    @TRPage_dev9 ай бұрын

    The additional benefit of being able to create automated collections from metafields is we're often already creating metafields to leverage storefront filtering. This just allows you to do more with one clean step - customers already filtering by type? Creating an automated subcollection for that type to leverage as necessary since you're already updating that field.

  • @zayadhajhouji3608
    @zayadhajhouji36089 ай бұрын

    Bro, you are a beast thank you so much for this tutorial, God bless you

  • @CodingWithJan
    @CodingWithJan9 ай бұрын

    🔥🔥🔥

  • @TRPage_dev
    @TRPage_dev9 ай бұрын

    Trying to catch up to you creating great resources for the Shopify Dev community!

  • @chad.765
    @chad.7659 ай бұрын

    This is great, looking forward to it. Will watch for the link/announcement in the newsletter 🎉

  • @TRPage_dev
    @TRPage_dev9 ай бұрын

    Thank you! We'll be looking out for feedback and ideas

  • @akunpurku
    @akunpurku10 ай бұрын

    Does not seem to work anymore "Setting 'text' can't include Liquid syntax ('{{', '}}', '{%' or '%}') without valid dynamic sources."

  • @TRPage_dev
    @TRPage_dev10 ай бұрын

    Right, you can't use a multi-line metafield resource for a text setting input. Try using it in a richtext setting or a supported input like textarea.

  • @ammarahmad7963
    @ammarahmad796310 ай бұрын

    How will it work on the slideshow image? It is not working on the slideshow

  • @jennifervdz85
    @jennifervdz8510 ай бұрын

    very helpful, thank you so much!

  • @Vcastro1995
    @Vcastro199510 ай бұрын

    This really helped out, increased my mobile site speed

  • @jamesstevens2444
    @jamesstevens244411 ай бұрын

    Most helpful video. It turned out my site was lazy loading too. Got rid of the fade in too!

  • @darrenm3377
    @darrenm3377 Жыл бұрын

    Would it be possible to use custom section css to make a Shopify hosted, Portrait video not be so large? Using a "Video Section" on a page, if you upload a portrait video it fills the width so the top and bottom of the video are not seen unless you scroll up and down. It's huge.

  • @TRPage_dev
    @TRPage_dev Жыл бұрын

    Yeah for sure, but will depend on the section it's in. Likely what's happening is there's a defined aspect ratio it's trying to preserve (why a mobile video would get blown up and then cut off like that). You could probably run some CSS, but might need to modify the section itself in order to adjust that - all depends on how the video tag is being rendered.

  • @webmastercolin
    @webmastercolin Жыл бұрын

    Very helpful, thank you!

  • @madhurikadam2159
    @madhurikadam2159 Жыл бұрын

    Hey it's not working in my case. I'm trying to render a table from multiline text metafield and it's showing table html as a text on the web page.☹️

  • @user-45446
    @user-45446 Жыл бұрын

    Hi mate, it worked perfect. Rendered svg code for different product page icons.👍

  • @Fedgery007
    @Fedgery007 Жыл бұрын

    So helpful! Thank you!

  • @TRPage_dev
    @TRPage_dev Жыл бұрын

    Glad this was helpful for you!

  • @13111y
    @13111y Жыл бұрын

    Absolutely brilliant - thank you very much. <3 🤩

  • @TRPage_dev
    @TRPage_dev Жыл бұрын

    Glad you found it useful!

  • @Ravsin
    @Ravsin Жыл бұрын

    Awesome worked perfectly thank so much bro!

  • @TRPage_dev
    @TRPage_dev Жыл бұрын

    Glad you found it useful!

  • @adriancasillas8675
    @adriancasillas8675 Жыл бұрын

    Good one!

  • @ReneaHanks
    @ReneaHanks Жыл бұрын

    'schema' tag must not be nested inside other tags this is the error I keep getting.

  • @TRPage_dev
    @TRPage_dev Жыл бұрын

    If you're getting this error, it's very likely you've accidentally inserted an extra comma or forgot to close a parentheses when updating your schema - essentially "breaking" it. You may want to try and use a Shopify schema tag builder to compare, here's one a friend has recommended in the past: encircletechnologies.com/shopify-schema-builder-tool/

  • @Muhammadumair-tu7un
    @Muhammadumair-tu7un Жыл бұрын

    Can we show html in meta description, different for each product with the help of these setting?

  • @TRPage_dev
    @TRPage_dev9 ай бұрын

    meta description for products should be managed directly in the shopify admin (at the bottom where it says search engine listing click on the edit)

  • @originalbsmity
    @originalbsmity Жыл бұрын

    Thanks for the great information! When you make code changes to your theme, such as the base.css and the liquid files, how do you upgrade your theme when a new version of Dawn is released? Do you manually copy your code to the new version?

  • @TRPage_dev
    @TRPage_dev Жыл бұрын

    It really depends on how customizations are done. One of the easiest ways to do this would be to avoid updating your files like the base.css and instead create and load your own - custom-styles.css or whatever you want to call it - so you can get the new theme and then import. Otherwise for the most part you're looking at manual updates to including new versions of a theme. However, in many cases unless you're looking for some specific feature, there really isn't a reason to update a theme version. However, if it's just css, that would definitely be a benefit of using the Custom CSS option in the customizer - as it's written in as a setting and would be carried over in the automated update process.

  • @joseamiajres
    @joseamiajres Жыл бұрын

    Great content, keep up the good work, Shopify is only going to grow.

  • @TRPage_dev
    @TRPage_dev Жыл бұрын

    Thanks Jose! And 100% on Shopify continuing to grow. This is the way for commerce.

  • @sammiejojojo
    @sammiejojojo Жыл бұрын

    Thanks for this

  • @TRPage_dev
    @TRPage_dev Жыл бұрын

    For sure! Writing rules that were specific enough really tripped me up early on, particularly when you need to duplicate the theme, so I had hoped folks would find value here.

  • @user-45446
    @user-45446 Жыл бұрын

    Great video!

  • @TRPage_dev
    @TRPage_dev Жыл бұрын

    Thanks! Hope it was helpful to you.

  • @liamgriffin6897
    @liamgriffin6897 Жыл бұрын

    Some great techniques here! Thanks for sharing!

  • @TRPage_dev
    @TRPage_dev Жыл бұрын

    Thanks Liam!

  • @maigallary
    @maigallary Жыл бұрын

    I guess I will wait for the non dev version...😂

  • @TRPage_dev
    @TRPage_dev Жыл бұрын

    Ha! I aim to try and make my videos more merchant focused, but thought I'd try a more developer-focused video. This is good feedback though - I had thought about providing the code but hadn't had the chance to review for it being optimized. I'll go back and do that so that someone using this same version of Dawn can just copy and paste into the existing video section (provided it's not otherwise customized). I imagine future versions of Dawn will leverage this input setting instead.

  • @TRPage_dev
    @TRPage_dev Жыл бұрын

    Here's a gist to the code so you can copy and paste (always try something like this on a backup theme and not live theme). Tested in v8.0.0 and no issues. You'd need to locate your Sections file (Edit Code > Sections > video.liquid) and then paste the contents into that file and you'll get this functionality. gist.github.com/tpage99/ef44e9500751e005ff0b92be6a69ecac

  • @cancapture7204
    @cancapture7204 Жыл бұрын

    Hello, I tried that several times with one line and multi line and it didnt work. Im using this code: {{collection.metafields.custom.1_frage.value} i always get errors

  • @TRPage_dev
    @TRPage_dev Жыл бұрын

    I just tested this out today without any issues - but there's some other issue going on as single line metafields support HTML natively without appending ".value" and have for some time. I'd make sure you're calling the right resource there as that might be part of the issue potentially.

  • @bullymaguire4214
    @bullymaguire4214 Жыл бұрын

    You forgot one « } »