Optimize Page Layout for Mobile Devices Maintain Order of Elements WYSIWYG

After editing your Wix website, it is always useful to use the 'preview' option to see exactly what your users will see. Website designers generally use relatively large desktop screens for creating and editing their site. When switching to the 'preview' mode for desktop users, they are likely to experience the site precisely as it appeared within the 'editor' view. 

However, the 'preview' option for mobile devices can look alarmingly different. This is particularly true for cases in which you combine, alternate and overlap elements on single pages. For instance, if you create a 'Wix form' which allows for nothing other than response boxes, you may want to also create spaces among the response boxes to insert elements like text, images and media in a meaningful order. However, the default 'mobile' view is likely to change your desired order of all these different elements. For instance, it may group all of a single element type together. So, it may display the elements in clusters at a time of all of the response boxes, then all of the images, text boxes, media and so on. 

This post provides the steps to quickly format the page layout to display elements in the order you intent, for all users, ie regardless of their type of device, whether desktop or mobile.

These instructions assume that you are in the 'editor' and 'desktop' preview mode.

• Click 'Preview' (in top right corner of the page in the editing mode). This allows you to see what your site will appear to your site's visitors.
  
• Click 'Mobile' (to the left of the 'preview' option)
• Select 'Switch to Mobile'
• Click the 'Page Layout Optimizer' icon (that looks like a set screen split into frames from among the icon menu that appears next to the preview display. See image below)
  
• Scroll through the page. The elements should be distributed according to the way you have arranged them.
• Repeat this process for each page.

CONTENT RELATED TO OPTIMIZE A PAGE LAYOUT FOR A A WYSIWYG PAGE DISPLAY LAYOUT FOR MOBILE DEVICES IN WIX

 

How to get a Wix call back

Wix offers live telephone call support for persons building a Wix website, even free ones. Their contact center calls back clients during their business hours 5am - 5pm PST from Monday to Friday.

• Go to the Wix help center. It is quite comprehensive and organized into topics. Additionally, there is a keyword search window on the page.
• Select the topic in which you are interested. If the information does not suffice, scroll down to 'Did this answer your question?' and select 'no'.
• Click the contact us link in the field 'We're happy to assist you further. Click to Contact Us'
• Scroll through the new page titled 'what can we help you with?' (for further potential solutions) 
• Click 'Other' at the bottom of the page
• If you are doing these steps outside of business hours, you may open a trouble ticket. You will receive a response when the help center opens again.

CONTENT RELATED TO HOW ONE CAN GET A WIX CALL BACK CALL

• Wix help center 

Static Collection Pages in Wix

A collection refers to a group of products that share some noteworthy characteristic. This grouping often refers to single product lines, brands, manufacturers or even other types of products like 'best sellers', 'new arrivals' and so on. 

Some collections, like those for product lines and brands can benefit from being displayed on a static page. For instance, a product line may require some type of description. That description may include an image of all of the products together,  the line's unique value proposition, tentpole marketing promotions and so on. The following 2 main steps may be used to create a static page to display a collection. These steps are: 1 - to create a static page and then 2 - to add the collection's gallery (referred to as a 'store element' to that page).

STEP 1: Create a static page and page elements (like a paragraph, slide shows, etc).

• Go to the site menu
• Click 'Site menu' in the left vertical menu
• 'Add Page'. This will create a regular static page.

• To create paragraphs of information above the catalog (which you will soon add), click the '+' button for 'add', 'text' and then hold and drag a paragraph holder onto the static page. It may be ideal to keep it as short so that people could quickly advance to products.

STEP 2: Add the collection's gallery

• Click the 'My Store' icon (in the left menu as pictured below)

• Select 'add store elements'. This should take you to your store's dashboard
• Hold and drag 'Grid Product Gallery' onto the static page. 
• Hover over the gallery to see and click on 'Settings'

• As shown below, the 'collection' section should be highlighted. Notice the name of the gallery that is being displayed in the top right corner of the window. The default is 'all products'. You can select any collection at any time.

CONTENT RELATED TO CREATING STATIC PAGES FOR DISPLAYING PRODUCT COLLECTIONS IN WIX

• Create catalog filters in Wix.com. This is very useful if your store has numerous products.

Catalog Filters in Wix by Linking Products to Collections

If you choose a Wix.com website template whose descriptive name included the word 'store', that template is likely to offer catalog filters as an option. The convenience offered by catalog filters enhances ecommerce customer experience when numerous products and variants are involved. This article illustrates how to create such filters.

Unlike Shopify tags which allow filtering in some templates, Wix requires you to link a product to as many 'collections' as you like so that those selected collections will become filter options. In the example pictured above, some or all of the displayed products are linked to the collections circled to the left (Mas vendidos, Cara and Locion). To link a product to collections, do the following.

• Log in and go to the site editor.
• Click the 'My Store' icon (in the left menu as pictured below)

• Select 'store manager' and then 'manage your store'. This should take you to your store's dashboard
• Select 'Store Products'. This should show a list of all of your products
• Click on the name of a product to review its page. As shown below, ensure that the visibility option is on. Then select each collection.
  

CONTENT RELATED TO CREATING CATALOG FILTERS BY CONNECTING PRODUCT PAGES TO COLLECTIONS IN WIX.COM

• The convenience offered by catalog filters enhances ecommerce customer experience when numerous products and variants are involved. 
• Create static pages onto which product collections can be displayed in Wix.com

Wix Product Pages

Wix provides a WYSIWYG product page template that replicates formatting (like element positioning) and some elements (like tabs for store-wide policies) on all product pages. Needless to say, elements like images, prices and product description are unique to individual products and their pages.

However, you may override the store-wide template for individual product pages by editing a specific element within that product's unique 'product page'. For instance, a product may require a unique set of terms for shipping. Consequently, you will want to override the otherwise store-wide shipping policy on only that product's product page. Unlike the 'description' field in the product page which is always unique to each individual product, the 'additional info section' would not require you to make changes unless you are making unique changes to the template.

This article shows how to 1) create the store-wide template and then 2) override the master template to create unique content in a single product.

To create the store-wide template 

This allows you to establish the design issues like where buttons and other elements will be placed on all product pages. This does NOT allow you to change content within the tabs that are provided in some product page templates.

• Click the 'My Store' icon (which looks like a shopping bag on the vertical menu on the left of the screen).
• Store Pages
• Product Page. Upon clicking this option, the product page template should appear behind the menu (which you may need to close) 

To create content unique on a Wix product page

• As shown below, select 'My Store' (like a shopping bag icon)
• Store Manager
• Manage Your Store (to get to your store's dashboard)

• Select 'Store Products' for a list of all of your products. 
• Select the individual product that you wish to edit.

• Select the section to make it unique. You can even change the names of the tabs. For instance, rather than 'product information', the tab may be called 'Unique Features'.

Product Page Visuals to Motivate Sales

Since research shows that up to 92% of consumers said visuals are the top motivating factor affecting a purchase decision, improving your store's product page images is a worthwhile priority.

The key is to give potential buyers an experience that is as virtual as possible to what they would have experienced had they reviewing products in a physical store. As much as possible, you must make it as easy as possible for potential buyers to engage their 5 senses. To do this, images should give as much information as possible to minimize uncertainty, a major deal breaker at the purchase decision point. Here are checklist guidelines.

• High resolution images on a white background. The size and style of the images should be uniform across the website, or at least product lines.
• Allow the zoom-in function.
• Show different angles: left, right, back, front and, if useful, above and below.
• Show the entire product in all variant forms, like color, size and so on. 
• Show the entire product in all variant effects. Some products like concealer makeup may have variants that cover scars differently. 
• Use one image to display the single product in different ways. For instance, one image position the same product, let's say a chocolate packaged, (next to another that is) un-boxed and next to other un-boxed ones in useful angles.
• Contextual imagery. Allow different segments of your target market to visualize themselves using the product. This is especially the case for very personal products like jewelry, clothing and so on. For instance, sun glasses may be displayed on people from different ethnicities, with different facial structures and so on. 
• Illustrate dimension, especially for unique products. For instance, a tiny torch light can be placed next to or inside of a commonly known object like a purse, book, coins and so on.
• Show features that sell the product's competitive advantage and unique selling proposition. 
• Use visual reviews. Evangelism is a powerful motivator. If possible, get customers to create photo or video reviews.