Rebuilding Nike Product Page with WooCommerce & Flatsome Theme Tutorial

[@jingshin6129]

Hello! Can I ask if you could do a tutorial on how we can change the price display of variable products dynamically for free (eg. price changes with different options)? Additionally, what method do you reccomend for ecommerce add ons (eg. adding a box of chocolate, adding a photoprint etc?) Greatly appreciated!!

[@Sebdelaweb]

Thank you so much for reaching out and sharing your idea! We always love hearing from our community. While we can’t guarantee it will be implemented due to our small team is juggling many ongoing projects, your input means a lot to us. Please don’t hesitate to share more ideas in the future, and make sure you're subscribed to our KZbin channel to stay updated on our latest releases. Thanks again for your support!

[@Emanuel-jr2ii]

Woah, I was looking for these shortcodes! You have helped me so much. I have learned a lot about all the possibilities in Flatsome (with some help of plugins and snippets) by copying other webpages. Please keep doing this.

[@mhatem12]

Does lightbox description can be read by seo spiders?

[@Sebdelaweb]

Hi! Great question. No, usually, content inside a lightbox (like a description) isn’t directly picked up by SEO spiders. This is because lightbox content loads dynamically (typically with JavaScript) and isn’t part of the initial page load, which is what search engines mostly crawl. If the description is important for SEO, consider placing it in the main content of the page too. You can keep it hidden visually but still present in the HTML, so search engines can read it without affecting the user experience. Hope this helps! Let me know if anything’s still unclear! 😊

[@Abdery]

One of the few films that interested me. Thanks

[@Sebdelaweb]

Thank you for your comment! I'm glad to hear that. Cheers!

[@fab9727]

Thanks for your work! Helps me rebuilding my page

[@Daniyalesire]

Please Add a Size Guide Popup button

[@studio623]

I look forward seeing how you overcome the limitations at the last part of this video. I've been trying to figure it out for the past year as well: a centralized product theme with dynamic UX editable custom fields that is unique per product. Thanks Seb!

[@BrendanDowns]

Just add UX Blocks shortcode to ‘Product Layout’ or ‘Extras’ tab to add rich unique content to products detail page.

[@haykvarosyan-rx9ne]

great video thank you so much. Where can I find the continue of this video for making rounded add button, adding the video in product galery ...

[@Sebdelaweb]

To add a play video button to your product gallery you would need to add a video link in your product data. View screenshot: tppr.me/BCl5vj

[@spchacal]

Hey Seb, whats up! a solution on a dynamic product page (and blog page too) is the acf plugin. First you create additional custom fields with the acf on products. You can create from a wysiwyg editor to a picture, a video, simple text, download file, an accordion... whatever you want..you name it! Every element has a unique shortcode which you can call it later on the product page! Works smoothly and make a product page very globally dynamic with endless possibilities! Thank you Man for great vids!

[@Sebdelaweb]

Thanks again! I will make a tutorial about it

[@Knochenkotzer01]

Great video, thanks for taking the time making it👍

[@Sebdelaweb]

My pleasure! Amigo

[@aygunaytekin]

I really like Seb's videos and I'm learning a lot of good things from you. You can add custom fields much more easily with the "Advanced Custom Fields" plugin instead of the plugin you use here. I learned this yesterday! At the same time, data entry fields on the product page are much more beautiful and useful.

[@boxbiru]

Woah thank you.. I scared to try something new.. your tut's help me a lot!! Thanks bro!!

[@Sebdelaweb]

Glad I could help!

[@lucascamaramartins875]

Awesome video man! Thanks Do you know how can we make a video on product like Nike did? Auto-playing and no control buttons or sound on product gallery

[@Sebdelaweb]

Thank you for your kind words! I'm glad you enjoyed the video. If you want to create an auto-playing video without control buttons or sound for a product gallery, you can use the HTML5 tag. Set the attributes autoplay, muted, and loop to make sure the video plays automatically, without sound, and continuously. Also, add the playsinline attribute to ensure it plays within the page. Here's a simple example: Your browser does not support the video tag. This code snippet will embed your video seamlessly into your product gallery. Hope this helps!

[@russellperkin]

Great tutorial! Luckily I found this just after Flatsome released an update allowing you to have a 2 column stacked gallery, has anyone tried this with a 2 column stacked gallery yet? It looks gorgeous! Thanks for the tutorial & keep up the good work!!

[@Sebdelaweb]

Glad it helped!

[@bali_com]

Thanks Seb, very helpful

[@Sebdelaweb]

Happy to help!

[@remiperie4817]

Really great, thanks for your job !

[@Sebdelaweb]

Glad you Loved it

[@rassulkz4486]

Superb, useful as usual

[@Sebdelaweb]

Thanks for your support Rassul!

[@aLx-gaming-official]

Insane Tutorial - really love the chill mood and the way how you show everything is done. Is there a way to Create a Grid (like on the Nike Page) for the product images? In the Video there are like 4 Product Images (of Product Gallery) on the left side and each image was displayed below the other. I would love to create a smaller one (with 2 images left/right and then going down to the next ones).

[@umairjawed2022]

You helped me a lot, now let me help you with one thing, that you don't need to create separate UX blocks for each product or don't need to add big images while making a product page, simple is while uploading a product you will see just above the title of product there is an option "UX Block" it means you can design each product separately

[@titanxfootwear1587]

Hello seb amazing work like always ... i would like to know how do you put video on Product gallery i was looking for a free plugin is it exist ?

[@Sebdelaweb]

At the moment you can add a video (Embed URL) on your product page, but this will only add play button on top of your gallery.

[@elmiroune]

Is it possible to create (with Flatsome) a product layout in which the gallery is like the Nike Gallery (every two images in one row)?

[@Samdang97]

Can you guide me to create another product link variant?

[@Sebdelaweb]

This might help you kzbin.info/www/bejne/hpLZf5msaJp3b5Y

[@ilya.zherdev]

Thanks a lot! Very useful!

[@HaifengZhu-pn3uq]

hi, does flatsome have built-in email builder?

[@Sebdelaweb]

No , you might need to use 3rd party Plugins

[@alexyuan4634]

I really learned a lot from your vids, thanks,

[@Sebdelaweb]

Great you are learning from it.

[@tutusik]

Thank you for video. I think you forgot to add how to make size guide. Please make it if possible :)

[@Sebdelaweb]

will make it

[@robertwilliam4368]

@@Sebdelaweb Is there a video about it?

[@woodhausinc.5132]

Hello from Canada is it possible that you mixed up two different things, attributes and custom fields? is the custom field output not only text? why not create a product layout for each single category if wanted? Keep up the awesome work, learned a lot in my late 50's

[@Sebdelaweb]

Thanks for your feedback. Yes your right... you could setup a product page layout for each product or category. But the whole idea is to create a single layout for all your products. This way it's easier to manage everything from one design.

[@Yasiji]

@@Sebdelaweb please how to set up product page layout for each product I need this info, if you can please share it with us.

[@thepuldarshana9056]

what about header, footer, hero section, body of the home page ?

[@MrAnesco1]

flat some theme slider not working and has stopped working, please, can anyone help me out?

[@Sebdelaweb]

It’s frustrating when the slider stops working! First, double-check that your theme and all plugins are up to date-outdated software is often the culprit. You can also try clearing your website cache or disabling any recently added plugins to see if there’s a conflict. If that doesn’t work, it’s a good idea to contact Flatsome’s support or look through their documentation for troubleshooting tips.

[@afgbeauty6745]

Thank you very helpful

[@Sebdelaweb]

Awesome! Glad you like it.

[@Samdang97]

Can you build me to login page nike

[@Sebdelaweb]

Please Mail us at [e-mail] or you can visit our website and chat directly .

[@patrickkwamebonsi4650]

There is something am facing. Thats your UX builder element is not the same as I have. Specifically shop elements, what should I do please.

[@Sebdelaweb]

Open the UX Builder on the product page (tppr.me/jH7YU). Do NOT open the UX Builder from the UX Blocks.

[@awesomepiccolossj714]

broah i lovey u

[@Sebdelaweb]

Amigo :)

[@Fidelw]

cool，how to add a video😮

[@Sebdelaweb]

You can use Element of UX Builder there is a section to sections and other area named Video , You can link them with Either KZbin or locally from your media

[@Simmuh2]

Nice vid, but honestly i dont like nikes webpage at all. Not the ux per se, but the Page is really broken most of the time. Especially the cart and checkout

[@Sebdelaweb]

Yes I understand your point! I liked the fact that it was covering some important elements I liked to explain to the people ;)

[@MikeProjects_MP]

Hello. Great video. Thanks so much. Regarding the dimension of the size boxes, to have the same size (or declare height and width) as it appears on the Nike website here the code, added in Custom CSS .ux-swatches--large .ux-swatch--label { min-height: 45px; max-height: 45px; min-width: 110px; max-width: 110px; padding: 0 10px; }

[@Sebdelaweb]

Yes, correct

[@Balicom]

thanks. very helpful

[@Sebdelaweb]

Glad it helped!