tutorials
invest in your knowledge
Totally Codable was created with the purpose of having a central and trusted place to find invaluable Wix Code resources. Having the right resources is important to complete any website. The Code Queen has collectively created this website dedicated to the Wix Code Community. Code Queen Nayeli continues her commitment to provide the utmost knowledge and Wix Code resources. Check out these popular Wix Code tutorials on YouTube.
how to use repeaters
Repeater are elements that allow you to design a pattern one time and it will repeat down the page. This is the most efficient element ever created on Wix Code. This video will show you one of many possible ways to benefit from using a repeater element when designing a regular page or a dynamic page. There is no tutorial site for this video. Follow along in your own Wix Editor to recreate the Code Queen's tutorial video.
how to create a double collapsing effect There are many techniques and designs to create a collapsing effect on a page. The easiest to use is possibly the Wix FAQ app that allows you to create a list of items that expand and collapse when clicked on. There are times that you may desire a more custom design or effect. Watch this video to find out how to create your own animated list using Wix Code. To view the code on the tutorial site for this video: click here .
how to create conditional filtering with dropdowns Conditional filtering allows you to narrow down specific choices in a dropdown element based on the previous selection that the user has made. The Code Queen will give you 3 different dropdown examples on how you can implement this function on your website form. At the end of the tutorial video she will also give you some troubleshooting tips for this Wix Code example. To view the tutorial site: click here . Follow along in your own Wix Editor to recreate the Code Queen's tutorial video.
how to create an easy search code with redirect Learn how to create an easy search bar that searches multiple values at one time and then triggers the results to be displayed on a different page. This type of design works well on a home page, header or footer. A seconds search code example is given to search and display results on the same page. Follow the Code Queen in your Wix editor to recreate this function on your website. To view the code on the tutorial site for this video: click here .
tutorial videos on YouTube Just a quick hello from Code Queen Join this channel to get access to perks:
https://www.youtube.com/channel/UCy4ydlG0gU7cTUBDYTD2I_A/join
It's been a tough couple of years for me, but I am ready to smile and get back in front of a camera again.
----------------------------------------
Thank you to all of my supporters and friends!
----------------------------------------
Join Facebook Group: www.facebook.com/groups/wixcode
Official YouTube Website: www.totallycodable.com
Facebook Page: www.facebook.com/codequeen
Official Wix Corvid Forum: https://app.codequeen.co/code-queen-velo-forum-profile
--------------------
Totally Codable Logo by: https://www.mattlowedesign.co.uk
Code Queen logo by: https://www.wix.com/arena/wix-expert/sissi-wedgwood/portfolio
Video Intro by: Code Queen
How to customize Wix Stores Product Pages with extra video links and information Join this channel to get access to perks:
https://www.youtube.com/channel/UCy4ydlG0gU7cTUBDYTD2I_A/join
The standard Wix Stores Product Page is made up of one large widget. This widget is not codable. The widget labels and text can only be modified via the Wix Stores settings.
Currently, it is not possible to add audio files and document downloads via your Wix Product settings. You can upload Video files up to 50MB in size and this does count towards your allotted storage on Wix.
You cannot link existing Videos from Vimeo and YouTube. To bypass these limitations we can create an additional interface to the Wix Stores Product Page using Velo.
----------------------------------------
Links to code: https://forum.totallycodable.com/wiki/c891d4c4-2b09-4ac7-9067-a8132857968f
----------------------------------------
Join Facebook Group: www.facebook.com/groups/wixcode
Official YouTube Website: www.totallycodable.com
Facebook Page: www.facebook.com/codequeen
Contact Code Queen: booking.codequeen.co
Free Resources: www.partnerbytes.com
Official Wix Corvid Forum: https://app.codequeen.co/code-queen-velo-forum-profile
--------------------
Totally Codable Logo by: https://www.mattlowedesign.co.uk
Code Queen logo by: https://www.wix.com/arena/wix-expert/sissi-wedgwood/portfolio
Create product reviews for Wix Stores product page - Or display Approved by Admin content Velo 2022 (You can also follow this tutorial if you simply want to learn how to display content on your website that has already been "pre approved" or "verified" by the Admin of the website. Same concept, same code logic.)
Product reviews help clients get a clear idea of the product before purchasing it. Ratings are an essential part of an online store's branding and marketing. Consumer reviews are an invaluable source of feedback that help surface issues with products, shed light on new use cases and help improve customer trust and loyalty.
Currently Wix website owners add reviews to their website by :
Creating a dedicated Reviews page for all reviews
Creating a testimonials highlight reel on the home page
Adding a general comments or feedback section on the Wix Stores products page
Installing a 3rd party app from the Wix App Market
Embedding an external 3rd party app found on the web
Custom code a review section the Wix Stores product page
At the end of this tutorial you will learn how to:
Use a repeater on a Wix Stores product page to display collected reviews that have been approved by Admin
Filter reviews to display only relevant reviews for the current product
Create a form in a lightbox to collect reviews and an uploaded image
Create a notification to Admin when a new review has been received
We depend on simplicity of our tutorials to help the maximum audience possible. We know our audience expects transparency to make sure they are investing time on the right tutorial. Please know that this specific tutorial will not cover the topic of calculated ratings. A more advanced tutorial will be created about that topic in the future.
----------------------------------------
Links for this tutorial: https://www.totallycodable.com/post/create-filtered-product-reviews-for-wix-stores-product-page
----------------------------------------
Join Facebook Group: www.facebook.com/groups/wixcode
Official YouTube Website: www.totallycodable.com
Facebook Page: www.facebook.com/codequeen
Official Wix Corvid Forum: https://app.codequeen.co/code-queen-velo-forum-profile
--------------------
Totally Codable Logo by: https://www.mattlowedesign.co.uk
Code Queen logo by: https://www.wix.com/arena/wix-expert/sissi-wedgwood/portfolio
How to create Tabs on Wix using Multi State Box or Slideshow for Multi Interactions | Velo Tutorial Velo Tutorial | Wix Tutorial
The Multi-State Box vs Slide in Slideshow
If we are being politically correct, the multi-state box does not really have 'slides'. Wix actually calls these 'states'. After all, the reason why it is called the Multi-State Box because it has different 'states'. It would have been strange calling it the Multi Slide Box when Wix already has a Slideshow element.
The three biggest and most important differences that you need to know about the Multi-State Box and the Slideshow is that:
The Multi-State Box is Responsive and a Slideshow is not
The Slideshow has native navigation arrows and the Multi-State Box does not
Even when navigation arrows are 'hidden' users can still click or swipe to change slides
This does not mean you cannot use the multi-state box without coding, it just means you will have to change the state manually each time you want to display another state. Many users make the mistake of using a Slideshow because you are able to hide the navigation arrows and they assume this will prevent users from navigation through the slides. It is best to use a multi-state box instead if you want full control of navigation. Multi-state boxes are more code oriented uses than Slideshows are. Slideshows are great for basic navigation and for non-coders. Both elements are still codable.
----------------------------------------
Links for this tutorial:
https://www.totallycodable.com/post/how-to-create-tabs-on-wix-using-multi-state-box-or-slideshow-for-multi-interactions
https://codequeen.wixsite.com/tab-example
----------------------------------------
Join Facebook Group: www.facebook.com/groups/wixcode
Official YouTube Website: www.totallycodable.com
Facebook Page: www.facebook.com/codequeen
Contact Code Queen: booking.codequeen.co
Free Resources: www.partnerbytes.com
Official Wix Corvid Forum: https://app.codequeen.co/code-queen-velo-forum-profile
--------------------
Totally Codable Logo by: https://www.mattlowedesign.co.uk
Code Queen logo by: https://www.wix.com/arena/wix-expert/sissi-wedgwood/portfolio
Video Intro by: Code Queen
How to embed booking calendar on Wix - Book Like A Boss Embed Multiple Times on same page One of the best booking tools that we have found is an app called Book Like a Boss. It has multi day booking called Session Packs that allow clients to book multiple appointments at once. It has SMS reminders and a whole lot more!. The only thing they don't have is a way to embed their script code onto a Wix site. But we figured out a way! You are looking at the first Book Like a Boss Converter tool for iFrame integration. Without getting too technical on the matter, the short version of the story is when a script code for an iFrame needs DOM access it is not compatible with Wix because Wix does not allow DOM access. In this case, Book Like a Boss built their embed script in that way.ā
ā
On Wix there are two ways to embed content inside of an iFrame. One way is via compatible HTML code, the other way is by using a direct URL to the source. Easy peasy! Just get the source of the script code and paste it on the Wix iFrame settings, right?! Wrong! How can a Wix user paste a script code, get the source URL and paste it back into their Wix site? They can't! Because they cannot load the original script code in the first place! Using Velo, we crafted a URL generator that we now call Book Like a Boss Wix Instant Generator (or BLAB-WIG ) just for you (and the world)! We love you, too.
Get a Book Like A Boss account: https://app.codequeen.co/book-like-a-boss
----------------------------------------
Links for this tutorial: https://velo.totallycodable.com/example-book-like-a-boss-embed-wix
----------------------------------------
Join Facebook Group: www.facebook.com/groups/wixcode
Official YouTube Website: www.totallycodable.com
Official Wix Corvid Forum: https://app.codequeen.co/code-queen-velo-forum-profile
--------------------
Totally Codable Logo by: https://www.mattlowedesign.co.uk
Code Queen logo by: https://www.wix.com/arena/wix-expert/sissi-wedgwood/portfolio
Video Intro by: Code Queen
Create a Wishlist on Wix Stores with Add All to Cart via Reference Fields on Velo Wix recently created a Wishlist tutorial using heart icons to display if item is in the User's wishlist and using 'x' icon to remove item from wishlist. In our version of the Wishlist tutorial, we will use less steps to create the Wishlist and will use buttons to add or delete items from a Wishlist. As a bonus, we will also create an 'add to cart' button for single items and add the entire Wishlist to the cart in one click. Please be advised that this tutorial does NOT REQUIRE the Members Area pages but it does require for users to log into the site in order to come back and view the products they have saved.
0:00 Intro
1:07 Wishlist for Wix Stores Tutorial Code
2:14 Wix Stores Wishlist Example Tutorial Site
2:56 Wix Stores Product Logic
3:28 Wix Stores Member User Logic without extra Code for Wix Stores Product Details Page
4:13 Wix Stores Member with code on the Product Details Page
4:48 Step#1, Create Database for Wishlist of Wix Stores
5:00 How to create database for Wishlist of Wix Stores
5:28 Database permission settings for Wishlist of Wix Stores
5:51 Reference field for Products Collection settings
6:10 How to add member permissions for Method #1 configuration without code on Wix Stores Product Page
7:04 Step #1, Velo Code for Method #1 for Members Only Wix Stores Product Details Page
7:26 Where to paste Velo code in the Wix Editor for Wix Stores Product Details Page
7:47 Follow the notes on the Velo code lines to modify your Velo code
7:55 Velo Code for Method #2 for Public Wix Stores Product Details Page
8:40 Recap of Step #1 and Step #2, Add Database, Add buttons, Page Permissions, Velo Page Code
9:17 Step #3 Create regular page to display Wishlist of Wix Stores
9:35 Regular Page Wishlist Page set to Members Only
9:55 Which elements to add to the Wishlist Page
11:23 Dataset settings for Wishlist Page with filter
11:40 Connect elements to dataset, Do not connect Add to Cart button to dataset
12:03 Velo Code to Add to Cart to Wix Stores shopping cart
13:40 Example of what Wishlist page looks like
14:10 Velo example code for Bulk Add to Cart
15:08 Tutorial Site live view and testing the code
Note: Wix Stores released a native Wishlist function that requires zero code but installing the Members Area is mandatory
----------------------------------------
Links for this tutorial:
https://www.totallycodable.com/post/creating-a-wishlist-using-wix-stores-with-add-to-cart-function
----------------------------------------
Join Facebook Group: www.facebook.com/groups/wixcode
Official YouTube Website: www.totallycodable.com
Facebook Page: www.facebook.com/codequeen
Code Snippets: support.totallycodable.com/tutorials
Contact Code Queen: www.codequeen.co/
Official Wix Corvid Forum: https://www.wix.com/corvid/profile/code-queen/profile
--------------------
Totally Codable Logo by: https://www.mattlowedesign.co.uk
Code Queen logo by: https://www.wix.com/arena/wix-expert/sissi-wedgwood/portfolio
Video Intro by: Code Queen
Copy to clipboard from a regular wix page, wix dynamic pages and repeater | Corvid by Wix.com Wix released the Copy to Clipboard function. This function will allow a User to copy text onto their device's clipboard. This will give the user a functionality to save a piece of text and save it for later use by browsing through their clipboard (especially on a mobile device!). Our tutorial article will walk you through the steps on how to use 1 of 3 methods to: copy to clipboard from a regular page, wix dynamic pages and a repeater. Check out this video to see how each method works. Then head on over to the tutorial article to copy and paste the code that best suits your needs!
Remember to visit the Code Queen Facebook page see an exclusive mobile video that shows what the clipboard looks like as it saves each piece of text!
00:16 - Wix API Doc - copyToClipboard()
00:54 - Tutorial Site Example - Text on Regular Wix Page
01:54 - Example - Repeater on Regular Wix Page
02:58 - Example - Wix Dynamic Page
03:30 - Wix Editor - How the elements were connected
04:42 - How to get the example code
#corvidbywix #totallycodable #codequeen #wixdynamicpagse #wixpages #copytoclipboard
----------------------------------------
Links for this tutorial:
Tutorial Site: https://codequeen.wixsite.com/copy-to-clipboard
Link to Code: https://velo.totallycodable.com/post/copy-to-clipboard-from-a-regular-page-dynamic-page-and-repeater
Tutorial Article: https://velo.totallycodable.com/wix/corvid/copy-to-clipboard-from-a-regular-page-dynamic-page-and-repeater
----------------------------------------
Join Facebook Group: www.facebook.com/groups/wixcode
Official YouTube Website: www.totallycodable.com
Facebook Page: www.facebook.com/codequeen
Code Snippets: support.totallycodable.com/tutorials
Official Partners Page: www.totallycodable.com/code-queen-partners
Contact Code Queen: www.codequeen.co/contact
Official Wix Corvid Forum: https://www.wix.com/corvid/profile/code-queen/profile
--------------------
Totally Codable Logo by: https://www.mattlowedesign.co.uk
Code Queen logo by: https://www.wix.com/arena/wix-expert/sissi-wedgwood/portfolio
Video Intro by: Code Queen
Free Wix Corvid Examples that open in Wix Editor | Corvid by Wix Wix just revamped their FREE Corvid Examples page! Wix just released today, January 22, 2020, a beautiful searchable index of Corvid Examples. You can find Examples by Code Level: Beginner, Intermediate and Advanced. You will find links to the live example and even links to OPEN the example WITH THE ENTIRE CODE right in your WIX EDITOR!! Code Queen will walk you through where to find these examples, where to find the code and where to find other help and resources in case you need an extra hand. Enjoy the video and thanks for subscribing!
00:47 - Where to find Corvid Examples on Wix
01:00 - Search by Code Level
01:20 - How to search for Corvid Examples
02:00 - How to view a Corvid Example
02:38 - How to open up a Corvid Example from Forum Post
03:22 - How to open up a Corvid Example from Example Page
04:21 - Corvid Examples on Wix Support Help Center
04:53 - Code Forum to post help questions
#corvidbywix #totallycodable #codequeen #corvidexamples #corvidtutorials
----------------------------------------
Links for this tutorial:
Website: www.wix.com/corvid/examples
Wix Support: https://support.wix.com/en/corvid-by-wix/basics
Wix Corvid Forum: https://www.wix.com/corvid/forum
Wix Corvid Members: https://www.wix.com/corvid/members
Totally Codable: support.totallycodable.com
CQ Tutorials: www.totallycodable.com/tutorials
CQ Community: community.totallycodable.com
----------------------------------------
Join Facebook Group: www.facebook.com/groups/wixcode
Official YouTube Website: www.totallycodable.com
Facebook Page: www.facebook.com/codequeen
Code Snippets: support.totallycodable.com/tutorials
Official Partners Page: www.totallycodable.com/code-queen-partners
Contact Code Queen: www.codequeen.co/contact
Official Wix Corvid Forum: https://www.wix.com/corvid/profile/code-queen/profile
--------------------
Totally Codable Logo by: https://www.mattlowedesign.co.uk
Code Queen logo by: https://www.wix.com/arena/wix-expert/sissi-wedgwood/portfolio
Video Intro by: Code Queen
watched minutes on YouTube channel
{ live counter of fan views }