Rebuilding Nike Product Page with WooCommerce & Flatsome Theme Tutorial

[@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.

[@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!

[@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

[@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

[@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.

[@boxbiru]

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

[@Sebdelaweb]

Glad I could help!

[@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

[@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.

[@remiperie4817]

Really great, thanks for your job !

[@Sebdelaweb]

Glad you Loved it

[@Daniyalesire]

Please Add a Size Guide Popup button

[@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

[@bali_com]

Thanks Seb, very helpful

[@Sebdelaweb]

Happy to 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!

[@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).

[@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?

[@Balicom]

thanks. very helpful

[@Sebdelaweb]

Glad it helped!

[@ilya.zherdev]

Thanks a lot! Very useful!

[@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.

[@alexyuan4634]

I really learned a lot from your vids, thanks,

[@Sebdelaweb]

Great you are learning from it.

[@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)?

[@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.

[@awesomepiccolossj714]

broah i lovey u

[@Sebdelaweb]

Amigo :)

[@HaifengZhu-pn3uq]

hi, does flatsome have built-in email builder?

[@Sebdelaweb]

No , you might need to use 3rd party Plugins

[@thepuldarshana9056]

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

[@Samdang97]

Can you guide me to create another product link variant?

[@Sebdelaweb]

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

[@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.

[@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.

[@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 .

[@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

[@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

[@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 ;)

[@afgbeauty6745]

Thank you very helpful

[@Sebdelaweb]

Awesome! Glad you like it.