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.
Пікірлер
You are a rockstar! Thank you so much!
Can I add app blocks with this method?
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
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?
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.
@@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
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"
Super helpful, thank you
Thanks, Taylor. That was very useful.
Omg thank you! 😊
Have any idea how to have display variants metafields and have them dynamically change on choosing another variant?
You'll have to do this with Javascript and tie into the theme's function that fires whenever a variant changes to conditionally display.
Can we use this to have tables? Like size chart for clothing
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)
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)
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
This is gold! Page performance went from 40 to 58 immediately after applying this fix.
Thanks, you're great!
Hi , i have some problem with lazy load image if you can help me to fix this please
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?
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).
@@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!!
@@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!
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!
Thanks for the video. It does help newbie shopify dev like me😅 keep it up I'll love to see more from you
Why do I get "Invalid schema: setting with id="disable_lazy" default must be a boolean"?
Awesome demo Taylor! Thanks for sharing this!
Y'all keep making cool stuff and I'll keep sharing videos about it!
thank you for your turorial!
Great tutorial works a treat. Good workaround for plain text values
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.
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
@@Ed-wc7fp Appreciate the follow-up and glad you got it working. It is pretty specific in how you have to implement.
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!
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.
You are a genius! Thank you sir, earned a sub :)
Glad this helped out in some way!
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."
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.
Great to see this!
Thanks for the support!
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)?
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.
Bro, you are a beast thank you so much for this tutorial, God bless you
🔥🔥🔥
Trying to catch up to you creating great resources for the Shopify Dev community!
This is great, looking forward to it. Will watch for the link/announcement in the newsletter 🎉
Thank you! We'll be looking out for feedback and ideas
Does not seem to work anymore "Setting 'text' can't include Liquid syntax ('{{', '}}', '{%' or '%}') without valid dynamic sources."
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.
How will it work on the slideshow image? It is not working on the slideshow
very helpful, thank you so much!
This really helped out, increased my mobile site speed
Most helpful video. It turned out my site was lazy loading too. Got rid of the fade in too!
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.
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.
Very helpful, thank you!
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.☹️
Hi mate, it worked perfect. Rendered svg code for different product page icons.👍
So helpful! Thank you!
Glad this was helpful for you!
Absolutely brilliant - thank you very much. <3 🤩
Glad you found it useful!
Awesome worked perfectly thank so much bro!
Glad you found it useful!
Good one!
'schema' tag must not be nested inside other tags this is the error I keep getting.
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/
Can we show html in meta description, different for each product with the help of these setting?
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)
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?
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.
Great content, keep up the good work, Shopify is only going to grow.
Thanks Jose! And 100% on Shopify continuing to grow. This is the way for commerce.
Thanks for this
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.
Great video!
Thanks! Hope it was helpful to you.
Some great techniques here! Thanks for sharing!
Thanks Liam!
I guess I will wait for the non dev version...😂
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.
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
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
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.
You forgot one « } »