top of page
topanchor

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

Create product reviews for Wix Stores product page - Or display Approved by Admin content Velo 2022

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

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

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

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

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

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 }

bottom of page