kzread.info/dash/bejne/daGMmdyqmdvUkZs.html Checkout updated Tutorial for tabbed content

🔷 Timestamps: 00:00 - Introduction 01:25 - Functionality of Product Tabs 04:40 - Adding the New Tab Section 08:30 - Adding the New Template for the Product Tab 10:30 - Creating Meta Field 13:25 - Conclusion

This is super helpful thank you!

@WebSensePro

5 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

We will add more functionality if we get 1000+ likes on this video. Upcoming functionality includes styling options, font, and padding options.

This video helped me a lot. Thank you

@WebSensePro

2 күн бұрын

You're welcome!

Amazing video sir you're awesome

@WebSensePro

23 күн бұрын

Thanks! 😊

Thank you so much

@WebSensePro

26 күн бұрын

You're welcome!

Thank you

@WebSensePro

2 ай бұрын

Your welcome

One advice. Purpose of the Tabs should be to pack information in compact way, without extending the page height and scroll length. Therefore, on mobile Tabs buttons should stay horizontally stacked, otherwise it is the same as collapsible rows element that we already had. Only one small benefit is that the currently opened tap closes, when the next one is tappet and extended. Which is something I'm sure could be fixed in the default collapsible row section. Also, instead of having to add Tab Title and Tab Content both from separate Metafield, it should be enabled to dynamically input both of those trough one met-field reference to meta object (containing both Tab Title and Tab Content) and being editable from one place for all the common info. That should also limit the need for extensive product page templates. Also, worth mentioning lack of styling options, like choosing theme colour scheme. I like your videos, and I'm thankful for the free code, so I really hope this will help you make code that solves actual problems. This one really ins't far from one we had.

@WebSensePro

8 ай бұрын

Normally it's not needed to create 2 different meta fields. You won't need to change Tab Title much just the Tab Description for every product. Horizontally stacked tabs for the mobile version will look very weird when you have long Tab Titles as they won't fit if you have more than 2 tabs

@ShoneTheGenije

8 ай бұрын

​@@WebSensePro Firstly, I might want to change Tab Title for various products, not sure how are you so sure I wont. Even if I won't, in case I want to change it globally for all the products it is applied to, meta object is a perfect way to do that at one place, rather than on all products separately. So, Tab Title and Tab Content should be able to dynamical connect to Meta Object trough meta field. Secondly, horizontally stacked Tabs could be scrollable and fulfil the purpose of reducing the page height and scroll length. Firsts example that comes to my mind is Printful. Go to any product page and see how much have they packed in Tabs sections, what type of content is on those sections as well as how did they solved it for the mobile. I know you are doing your best, and I know you are giving it for free, but without solving the real problems its hard to reach the real potential value. So I hope you understand I'm giving you thees advice from best intentions.

thank you

@WebSensePro

2 ай бұрын

You're welcome

Ok If I don’t see the add section on the customizу page. In place of this there is the inscription This page doesn't have any sections.

@WebSensePro

6 ай бұрын

Please clarify, not clear what you are referring here

Thank you - your video was very helpful and have a question. Is it possible to add style/format text for each tab? For example add bold/and add hyperlinks to website urls? I tried to add some basic html tags into the text block but it didn't work. I see your comment below "Upcoming functionality includes styling options, font, and padding options." Did that happen yet? THANK YOU!!

@WebSensePro

Ай бұрын

Yes, it happened. Checkout the updated video here kzread.info/dash/bejne/daGMmdyqmdvUkZs.html

Hi, how do you add Table Size to the description Tab you've just create? Seems like you can just add words to the Tab, and not Table with cm, Lenght, width size etc. 👈👀

@WebSensePro

4 ай бұрын

Will need extra code for that

Hello sir! Could you please make a video on How can we show product images on the my orders page

@WebSensePro

8 ай бұрын

On orders page?

Hey thanks for sharing, when i add the tab, i dont have the three tabs side by side, instead, i have bullet points. how can i fix that?

@WebSensePro

6 ай бұрын

Redo it, you missed something

@ahmedhashim5783

5 ай бұрын

same problem

@ahmedhashim5783

5 ай бұрын

no resolving @@WebSensePro

@amandarodrigueztejeda8098

5 ай бұрын

same problem here@@WebSensePro

@nerissabalzary3461

4 ай бұрын

@@WebSensePro I have the same issue and redid it a few times, any tips? thanks

how do u change the size of the tabs? i woud like it to stretch across the whole bottom of the page

@WebSensePro

4 ай бұрын

Will need to add more code

i follow all step but when i open product page i am unable to add section in prestige theme.

@WebSensePro

3 ай бұрын

Yes, because this tutorial is not for prestige theme

how to do you customise the tab colours, background and font?

@WebSensePro

7 ай бұрын

By using CSS code

Hi - Thank you so much for this At the minute 6.34 - you say to hide the related products, and then you still have the dots and suddenly it changes to the tabs, but it doesnt say how it changes to the tabs. I currently have the dots and i think a lot of other people also had this issue. Please can you advise what the next step is, how do you change from the bullet point to the tabs? I am stuck. Thank you so much for the advise and for the amazing video

@WebSensePro

3 ай бұрын

Thats weird it should update styling on referesh

@simon-it5ru

3 ай бұрын

@@WebSensePro so do you save first and then refresh or do you just refresh??? You seem to skip out a step on the video !!

@TenKeep-qx9be

2 ай бұрын

@@simon-it5ru did you manage to solve this? I'm facing the same issue

@simon-it5ru

2 ай бұрын

@@TenKeep-qx9be Unfortunately not. Let me know if you work it out. Very annoying

On my device the tabs section is not available ,what should i do now

@WebSensePro

4 ай бұрын

Will have to check where is the issue

On page load when you click on another tab, the 1st active tab is always active. How do we disable the 1st active tab when we click on another tab please?

@WebSensePro

7 ай бұрын

Hmm... will need JS code for that

@chavelschenk

6 ай бұрын

@@WebSensePro I have the same issue. Othwerwise a very easy and clean way of adding tabs to your shop. Well done. Is it not possible to refer to the description text instead of having manually copy+paste. e.g. {{product.description}} and for the other tabs link to pages created e.g. Shipping?

@willridley-smith2387

5 ай бұрын

Hi, I managed to fix this. At start of the javascript section, there should be 2 lines which say: tabs= document.querySelectorAll('.custom-tab'); tabContents= document.querySelectorAll('.custom__tab-content'); Just add the following after these lines tabs[0].classList.add('active'); tabContents[0].classList.add('active'); By the way I am not very good at code/standard practices so this might noy be the cleanest implementation of this. Also just remove lines 32-34, these lines make the first tab change it's colour to appear active

I am not able to find tabs section in my shopify store

@WebSensePro

2 ай бұрын

Updated video releasing soon

Any plans to update for DAWN 13?

@WebSensePro

2 ай бұрын

Yes latest version is coming soon

It didn't work

@WebSensePro

8 ай бұрын

Whats the error?

@HxZD

8 ай бұрын

​@WebSensePro great video. The tab option doesn't show for me in the section

@nicoleau469

6 ай бұрын

same here. Can't find 'Tabs' option from Section

This makes no sense, what ecomm page has tab 1 tab 2, come on

@WebSensePro

9 күн бұрын

Check pinned comment. Tutorial has been updated

lol... you said pretty ugly... which is it...? Pretty or Ugly lol hhaha

@WebSensePro

3 ай бұрын

Hahahaha slip of tongue

Hello, Thank you for the video and the advices ! How can we do if we want to have tabs with the product description ? I can't add the liquid : {{ product.description }} on the tab section Best regards

@WebSensePro

7 ай бұрын

You should use metafields

Not working for me i have dots standing under each other! Pretty sure i copied the code correctly

@WebSensePro

5 ай бұрын

Make sure CSS is added properly

@WebSensePro

2 ай бұрын

Thanks