Rebuilding Nike Product Page with WooCommerce & Flatsome Theme Tutorial
ฝัง
- เผยแพร่เมื่อ 14 ต.ค. 2024
- In this Flatsome Theme tutorial I rebuild the product page of Nike with UX Builder and UX Blocks. Covering: Variations Swatches, Custom Product Layouts, Custom Fields, Popups, Galleries.
------------------------------------
🔥 Website: www.sebdelaweb...
📷 Instagram: / sebdelaweb
Flatsome support:
👨💻 uxthemes.com/s...
📖 docs.uxthemes....
💬 / flatsome
One of the few films that interested me. Thanks
Thank you for your comment! I'm glad to hear that. Cheers!
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.
Thanks for your work! Helps me rebuilding my page
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!!
Glad it helped!
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!
Just add UX Blocks shortcode to ‘Product Layout’ or ‘Extras’ tab to add rich unique content to products detail page.
Woah thank you.. I scared to try something new.. your tut's help me a lot!! Thanks bro!!
Glad I could help!
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.
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!
Thanks again! I will make a tutorial about it
Great video, thanks for taking the time making it👍
My pleasure! Amigo
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
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!
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 ...
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
Really great, thanks for your job !
Glad you Loved it
Thanks Seb, very helpful
Happy to help!
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).
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
Thank you for video. I think you forgot to add how to make size guide. Please make it if possible :)
will make it
@@Sebdelaweb Is there a video about it?
Superb, useful as usual
Thanks for your support Rassul!
Thanks a lot! Very useful!
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 ?
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.
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
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.
@@Sebdelaweb please how to set up product page layout for each product I need this info, if you can please share it with us.
Please Add a Size Guide Popup button
I really learned a lot from your vids, thanks,
Great you are learning from it.
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)?
thanks. very helpful
Glad it helped!
hi, does flatsome have built-in email builder?
No , you might need to use 3rd party Plugins
what about header, footer, hero section, body of the home page ?
Can you guide me to create another product link variant?
This might help you th-cam.com/video/PavNfv35D94/w-d-xo.html
broah i lovey u
Amigo :)
flat some theme slider not working and has stopped working, please, can anyone help me out?
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.
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.
Open the UX Builder on the product page (tppr.me/jH7YU). Do NOT open the UX Builder from the UX Blocks.
Can you build me to login page nike
Please Mail us at support@sebdelaweb.com or you can visit our website and chat directly .
cool，how to add a video😮
You can use Element of UX Builder there is a section to sections and other area named Video , You can link them with Either TH-cam or locally from your media
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
Yes I understand your point! I liked the fact that it was covering some important elements I liked to explain to the people ;)
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;
}
Yes, correct
Thank you very helpful
Awesome! Glad you like it.