Store Experience

From Znode Knowledge Base
Jump to: navigation, search

The store experience corresponds to a Stores Theme and.CSHTML Pages containing Widgets. In this section, Administrators can customize Store-specific visuals and configure Widgets for their Stores.

Multifront uses a default Theme for Stores. The default Theme includes several Content Pages which can assist Administrators in establishing a Store. Administrators can download the default Theme, which can act as a template for a firm to create custom Themes, and can also add/modify Pages, CSS, or Widgets based on the Admins requirements. After a new theme has been created, Themes can be added to Multifront via CMS > Site Themes.


solid black circle

Store Experience tab details

General Settings Tab

Field Description
Website Title The input indicates the title of the website. The added input reflects in the page source of the webstore.
Website Description The input indicates the description of the website. The added input reflects in the page source of the webstore.
Website Logo The uploaded image gets displayed on the webstore as a Logo.
Favicon The uploaded image gets displayed on the webstore as a Favicon image.
Theme Admin user can select any available theme for the webstore.
CSS Admin user can select any available CSS associated with the selected theme for the webstore.
Dynamic Style The Dynamic Styles feature allows admin users to change the content styles displayed on the web store, from the Znode admin application.

Admin users can add the CSS code in the Dynamic Styles editor from the Manage Store Experience section. Once the added CSS code is saved and the store’s CMS Content is published, the application will dynamically change the content styles of the web store based on the styles described in the added CSS code.

WYSIWYG Editor Styles The WYSIWYG Editor Styles feature allows admin users to add new content formats in WYSIWYG editors of configuration widgets in CMS Pages

Admin users can add the CSS code in the WYSIWYG Editor Styles editor from the Manage Store Experience section. Once the added CSS code is saved, the CSS styles will then automatically become available as format(s) in the WYSIWYG Editors.

Important:

  • This editor does not have any error validation code written therefore it is important for the users to verify the code added in WYSIWYG Editor Styles editor before saving the same.
  • The code needs to be added in a specific format.

Please refer User Guide for Dynamic and WYSIWYG Styles

Image Setting Tab

Administrators can set the default Product Image and Auto Image Resize Settings. Ex: PDP uses Large Image and "Add to Cart" page uses Small Thumbnail Image. Note - After updating the image sizes for a store, if images are not manually generated then the web store will display only the image placeholders instead of actual images. Note - Whenever any new sizes are saved for a store then it becomes mandatory for the admn users to generate new sizes using the Generate image button otherwise the place holder images will get displayed on a webstore instead of actual images.

Product Page Tab

Administrators can set the Product Size based on the Product Type Detail. By default, Administrators can choose "Big", "Medium", and "Small".


Brand Products Tab

Brands landing page displays content to Customers using two non-configurable Widgets (Facets and Product List).


Product List Content Tab

Pages feature three nonconfigurable Widgets (Facet List, Category list, Product list).


Footer Content Tab

This section shows the view of the website footer.


Home Content Tab

Store Home Page contains four configurable Widgets (Slider, Advertisement Banner, New Arrival, and Home Page Special) and one nonconfigurable Widget (Recently Viewed Products--which updates based on Customers Store searches).


Widget Description
Slider Admin user can associate a banner slider through this widget so that it can appear on the home page of the webstore. In order to configure this widget admin user can perform the below steps.

Step 1 - Click Configure button
Step 2 - Enter the required information :
Select Slider - Admin user can select any banner slider from the available list of options.
Select Type - Admin user can select the type of width the banner slider should have when displayed on the webstore.
Select Navigation - Admin user can select the type of Navigation action which needs to be displayed to change the banner on the webstore.
Autoplay - Admin user can select whether the banner will automatically slide to the next banner on the webstore. Autoplay Timeout - Admin user can enter the autoplay timeout duration in this field.
Autoplay Hover Pause - Admin user can select whether the banner sliding will pause when hover.
Select Transition Style - Admin user can select the transition style of the banner slider.

Advertisment Banner Admin user can associate advertisment banner through this widget so that it can appear on the home page of the webstore. In order to configure this widget admin user can perform the below steps.

Step 1 - Click Configure button
Step 2 - Enter the required information :
Select Slider - Admin user can select any advertisment banner from the available list of options.
Autoplay - Admin user can select whether the advertisment banner will automatically slide to the next banner on the webstore.
Autoplay Timeout - Admin user can enter the autoplay timeout duration in this field.
Autoplay Hover Pause - Admin user can select whether the advertisment banner will pause when hover.

New Arrivals Admin user can associate newly added products in this widget so that the added products can be displayed in the New Arrival section on the home page of the webstore by configuring this widget. Admin users can also dissociate products from this widget.
Home Page Specials Admin user can associate any products in this widget so that the added products can be displayed in the Home Page Specials section on the home page of the webstore by configuring this widget. Admin users can also dissociate products from this widget.
Category List Admin user can associate any categories in this widget so that the added categories can be displayed in the Category List section on the home page of the webstore by configuring this widget. Admin users can also dissociate products from this widget.
Brand list Admin user can associate any brands in this widget so that the added brands can be displayed in the Brands section on the home page of the webstore by configuring this widget. Admin users can also dissociate products from this widget.
Recently Viewed Products This is a non configurable widget displaying the Recently Viewed Products section which will display the customers recently viewed products on the home page of the webstore.

Product Extras

Pages feature two nonconfigurable Widgets (Link Products and Recently Viewed). The "Link Products" Widget is used for "You May Also Like" Products seen on the PDP.


ProductExtraslight

This section shows the view of the product widgets available on the home page.( recently viewed, link products).


Quick View Widget

PDP displays content to Customers using one nonconfigurable Widget. The Quick View Widget also allows Customers to add Products to Cart.


Layout

Contains two nonconfigurable Widgets for Header and Footer sections. Footer and Header sections are referenced by Layout. These sections are displayed on all Store Pages.

Footer Section

The Footer section contains six Widgets, four configurable Widgets (Social Media, Help Section, Store Info, and Payment Gateways) and two nonconfigurable (Newsletter and Customer Support).


Widget Description
Newsletter This is a non configurable Widget which indicates the section where the Newsletter form will appear in the footer of the web store.
Social Media Admin users can add/edit/remove the social media options (Inclusive of Image, Title, URL) to/from the footer of the webstore by configuring this widget.
Help Section Admin users can add/edit/remove pages (Inclusive of Image, Title, URL) to/from the footer of the webstore by configuring this widget.
Store Info Admin users can add/edit/remove pages (Inclusive of Image, Title, URL) to/from the footer of the webstore by configuring this widget.
Customer Support This is a non configurable widget which displays the customer support contact details on the footer of the webstore.
Payment Gateway Admin users can add/edit/remove payment options (Inclusive of Image, Title, URL) to/from the footer of the webstore by configuring this widget.


Header Section

The Header Section contains four non-configurable Widgets, Locales, Search Panel, Quick Order, and Top Level Navigation.


Dashboard

Pages feature nonconfigurable Widget.

Old table

General Tabs Description
Website Title Name of the Website
Website Description Description of the website
Website Logo Logo of the store
Favicon Admin user can add the Favicon image from here.
Theme Admin user can select and update the site theme from here.
CSS Admin user can select and update the site CSS from here.
Image setting Administrators can set the default Product Image and Auto Image Resize Settings. Ex: PDP uses Large Image and "Add to Cart" page uses Small Thumbnail Image.

Note - After updating the image sizes for a store, if images are not manually generated then the web store will display only the image placeholders instead of actual images.
Note - Whenever any new sizes are saved for a store then it becomes mandatory for the admn users to generate new sizes using the Generate image button otherwise the place holder images will get displayed on a webstore instead of actual images.

Product Page Administrators can set the Product Size based on the Product Type Detail. By default, Administrators can choose "Big", "Medium", and "Small".
Brand Product Brands landing page displays content to Customers using two non-configurable Widgets (Facets and Product List).
Product List Content Pages feature three nonconfigurable Widgets (Facet List, Category list, Product list).
Footer Content This section shows the view of the website footer.
Home Content Store Home Page contains four configurable Widgets (Slider, Advertisement Banner, New Arrival, and Home Page Special) and one nonconfigurable Widget (Recently Viewed Products--which updates based on Customers Store searches).
Product Extras Pages feature two nonconfigurable Widgets (Link Products and Recently Viewed). The "Link Products" Widget is used for "You May Also Like" Products seen on the PDP.
ProductExtraslight This section shows the view of the product widgets available on the home page.( recently viewed, link products).
Quick View Widget PDP displays content to Customers using one nonconfigurable Widget. The Quick View Widget also allows Customers to add Products to Cart.
Layout Contains two nonconfigurable Widgets for Header and Footer sections. Footer and Header sections are referenced by Layout. These sections are displayed on all Store Pages.
Footer Section The Footer section contains six Widgets, four configurable Widgets (Social Media, Help Section, Store Info, and Payment Gateways) and two nonconfigurable (Newsletter and Customer Support)
Header Section The Header Section contains four non-configurable Widgets, Locales, Search Panel, Quick Order, and Top Level Navigation.
Dashboard Pages feature nonconfigurable Widget.

Configurable Widgets

Multifront comes standard with several configurable and nonconfigurable Widgets for Stores. Widgets are configurable reusable code that is configurable by Administrators to Developers can create/develop new Widgets based off the defaults. Widgets can be used multiple times throughout a Store, each with a different configuration.

Ex: A single Widget, such as "Home Page Special" is configurable and will display any Products the Widget is associated with. A Developer could create a "Best Sellers" Widget based on "Home Page Special" which could then be used throughout a Store.


Slider Details

CMS > "Store Experience" > Manage Experience > Home Content tab > Slider Widget "Configure" button
Detail Description
Select Slider Select existing Banner Sliders from drop-down to display with Slider Widget.
Select Type Select Slider type
Select Navigation Select Navigation element for Slider
Auto Play "Yes/No" toggle to enable/disable Slider autoplay
Auto Play Timeout Time (in msec)
Autoplay Hover Pause "Yes/No" toggle to enable/disable Slider pause on Customer mouse hover
Select Transition Style Select Transition Style from drop-down list

Configure Slider

CMS > "Store Experience" > Manage Experience > Home Content tab > "Configure" action
  1. Add Widget Details
  2. Save progress using "Save" button. The Page will reload with action confirmation.
  3. Slider Widget is now configured.

Configure Advertisement Banner

CMS > "Store Experience" > Manage Experience > Advertisement Banner Widget > "Configure" action
  1. Add Widget Details
  2. Save progress using "Save" button. The Page will reload with action confirmation.
  3. Advertisement Banner is now configured.

Associate New Arrivals

CMS > "Store Experience" > Manage Experience > New Arrivals Widget "Configure" button
  1. Select Products to associate with New Arrivals Widget
  2. Set display order of the associated products
  3. Save progress using the "Save" button. The page will reload with action confirmation
  4. New Arrivals have now been associated.

Associate Home Page Specials

CMS > "Store Experience" > Manage Experience > Home Page Specials Widget "Configure" button
  1. Select Products to associate with Home Page Specials Widget
  2. Set display order of the associated products.
  3. Save progress using the "Save" button. Page will reload with action confirmation
  4. Home Page Specials have now been associated.

Associate Category List

CMS > "Store Experience" > Manage Experience > Category List Widget "Configure" button
  1. Select Category(ies) to associate with Category List Widget
  2. Save progress using the "Save" button. Page will reload with action confirmation
  3. Category List have now been associated.

Associate Brand List

CMS > "Store Experience" > Manage Experience > Brand List Widget "Configure" button
  1. Select Brand(s) to associate with Brands List Widget
  2. Set display order of the associated products
  3. Save progress using the "Save" button. Page will reload with action confirmation
  4. Brands List have now been associated.

Add Social Media

CMS > "Store Experience" > Footer Section Tab > Social Media Widget "Configure" button
  1. Add Social Media Details
  2. Save progress using the "Save" action. The page will reload with action confirmation.
  3. Social Media has now been added.

Add Store Info

Stores > "Display Settings" action > Store Info "Configure" button
  1. Add Store Info Details
  2. Save progress using the "Save" action. The page will reload with action confirmation.
  3. Store Info has now been added.

Add Help Section

Stores > "Display Settings" action > Help Section Widget > "Configure" action > "Add New" button
  1. Add Help Section Details
  2. Save progress using the "Save" action. Page will reload with action confirmation.
  3. Help Section has now been added.

Add Payment Gateway

Stores > "Display Settings" action > Payment Gateway Widget > "Configure" action > "Add New" button
  1. Add Payment Gateway Details
  2. Save progress using the "Save" action. Page will reload with action confirmation.
  3. Payment Gateways has now been added.