The7 Product Navigation

Fig. 1 The7 Product Navigation

The widget allows the creation of a product navigation that lets user browse through other products (also related)

 

Fig. 2 The7 Product Navigation Content Tab General Settings

Content Tab General settings

Here the user can set the Skin of the navigation:

  • Popup – the next/previous product pops up after hovering over the arrow
  • Normal – the next/previous product is visible all the time

Navigate Through:

  • All Products
  • The Same category as the current product
  • The Same Tag as the current product

 

Content Tab Content settings

Fig.3 The7 Product Navigation Content Tab Content Settings

In this section the user is able to set:

  • The size of product image
  • Appearance on different devices Desktop/Tablet/Mobile (Show/Hide)
  • The Alignment of the content
  • Title of the product (Show/Hide)
  • Title width (Normal – full title or limit below/Crop to one line)
  • Maximum number of words when the title’s width is set to Normal (Leave empty to show full title)
  • Price of the product (Show/Hide)
  • Featured image (Show/Hide)

 

Content Tab Navigation settings

Fig. 4 The7 Product Navigation Content Tab Navigation Settings

This section allows to set the following:

  • Position of the navigation (Left/Right/Center/Stretched)
  • Arrows (Show/Hide)
  • Next Arrow Icon (From media library, or icon collection)
  • Previous Arrow Icon (From media library, or icon collection)
  • Back Icon (Show/Hide)
  • Back icon graphic element (From media library, or icon collection)
  • Link – the URL where the back button should take the user

 

Style Tab

Fig. 5 The7 Product Navigation Style Tab Title Settings

Style Tab Title Settings gives the ability to set the title’s:

  • Typography
  • Color (Normal/Hover

 

Fig. 6 The7 Product Navigation Style Tab Price Settings

Style Tab Price Settings gives the ability to set the appearance of product price.

Normal Price:

  • Normal price typography
  • Normal price color

 

Sale Price – when the product is discounted:

  • Old price typography
  • Old price color
  • Old price line color
  • New price typography
  • New price color

And also the gap above the price

 

Fig. 7 The7 Product Navigation Style Tab Featured Image Settings

The Style Tab Featured Image Settings gives the ability to set the appearance of the featured image of the product.

  • Width of the image
  • Aspect ratio (Custom/Original)
  • Custom aspect ratio
  • Border radius
  • Space between the image and the content

 

Fig. 8 The7 Product Navigation Style Tab Arrows Settings

The Style Tab Arrows Settings gives the ability to set the appearance of the navigation arrows

  • Size of the arrows
  • Color (Normal/Hover)
  • Spacing

 

Fig. 9 The7-Product-Navigation-Style-Tab-Back-Settings.png

The Style Tab Back Icon Settings gives the ability to set the appearance of the back icon

  • Size of the icon
  • Color (Normal/Hover)

 

Fig. 10 The7 Product Navigation Style Tab Box Settings

The Style Tab Back Icon Settings gives the ability to set the appearance of the whole box

  • Padding
  • Minimum Height of the box
  • Width of the box
  • Background color
  • Border type
  • Border radius
  • Box shadow
  • Spacing