Imperial Theme Manual (English)


Languages:French 

 

 

Table Of Contents

Logo
Background
Header
Navigation
Breadcrumb/Sidebar
Footer
Colors
Button
Typography
Contact Details
Features
Images
Social Media
Homepage - Header
Homepage - About Us
Homepage - Grid
Homepage - lower Banner
Homepage - Top Reviews
Homepage - Tags
Homepage - Social Plugins
Setting Up Product Ads

 

Contemporary design, The Imperial by AdVision is one of the most 'modern' themes available for the SEO Shop/Lightpeed eCom platform and it is a fully responsive, for smaller mobile devices and expands to the full width of any desktop monitor.

 

'Bigger is Better' as The Imperial features significantly larger product images, beautiful roll over effects that incentivize your visitors interaction.

 

Features


All views Autocomplete search with product thumbnails

All views Sticky header

All views Mega Menu

All views Add to Cart animation

All views Live chat

Homepage Top Banner Supports Image Slides or Video

Homepage Social media feeds

Homepage/ Grid Product hover /quick view function

Grid/Category View mode switch

 

==================================================================

 

If you require any other ‘online’ customization services or hosting, outside of your SEOshop

E-commerce web store theme, please don’t hesitate to contact the AdVision eCommerce Developement Team.



Contact : info@advision-ecommerce.com

Website : advision-ecommerce.com

 

Telephone : 866 865 8783


AdVision eCommerce - Suite 1402 - Office 327, 347 Fifth Ave. New York NY 10016

Below you will find a list of options available in terms of the areas of the theme you have the capability to update per your preference.

==================================================================

Logo
  1. Logo
    Upload your logo (in PNG image format) to be shown in the header of the theme. Recommended size 260 x 60 pixels.

  2. Favicon
    Upload company favicon. The favicon is a small icon image shown at the top of the browser window/tab. See http://www.favicon.cc/ for more information on creating a favicon for your website 

 

 

 

Background
  1. Background Color
    Select the color for the website’s global background setting, specifically the body area (below the header and above the footer).

  2. Background Image
    If you’d like to show a background image, you upload that image here. It will show in the background of the body of the website (on top of the background color selected above). You can control the position and repeating of the background image using the following two settings…

  3. Background Position
    If using a background image, use this setting to determine where the image show show in the background.

  4. Background Repeat
    If using a background image, use this setting to determine if the image should repeat in the background (i.e. like a tile).


 

Header
  1. Background Color
    Select the background color to be used for the header (shows behind the semi-tranluscent topbar background).

  2. Topbar Background Color
    Select the background color be used for the top bar (show above the navigation bar, list promo element and small menu including Wishlist, Shopping Cart, Login, Create an Account and Language menu)

  3. Topbar Text/Link Color
    Select the color you’d like text and links to be in the topbar element

  4. Topbar Promo URL
    If you’d like to link the promo element somewhere, enter that URL here. If you don’t want it to link anywhere, you can simply enter #

  5. Topbar Promo Label
    Enter the label you’d like to show in promo (defaults to “Free Shipping”)

  6. Topbar Promo Description
    Enter the description you’d like to show in the promo (defualts to “On All Orders”)

 

 

Navigation
  1. Background Color
    Select the background color you’d like to use for the main navigation element (contains search box, logo, social icons, my cart summary and main menu)

  2. Text/Link Color
    Select the color for text and links within the navigation element (effects social icons, my cart summary; does not effect main menu links which are controlled separately)

  3. Link Hover Color
    Same as above setting, but this color will be used when hovering over links within the navigation bar.

  4. Menu Link Color
    Select the color to use for root links in the main menu (root links are those tabs displayed in the navigation bar)

  5. Menu Link Color
    Select color to use for root links when hovered over with cursor

  6. Menu Link Bg Hover Color
    Select background color for root links when hovered over with cursor

  7. Menu/Search Suggestion - Dropdown Background Color
    When you hover over a root menu link that has a submenu to display (like “Products”), a dropdown will show. This setting allows you to control the background color of that dropdown element. This is also used for the background color of the search suggestion dropdown.

  8. Menu/Search Suggestion - Dropdown Link Color
    Select the color of links show in dropdown menu (also affects links in search suggestion dropdown).

  9. Menu/Search Suggestion - Dropdown Link Hover Color
    Like the setting above, select the color to show for said links when hovered over by the cursor

  10. Menu/Search Suggestion - Dropdown Link Hover Background Color
    Like the setting above, select the background color to show for said links when hovered over by cursor.

  11. Search Suggestion - Dropdown Border Color
    Used for the search suggestion dropdown, you can set the border color of the dropdown element.

  12. Link 1
    The main menu in navigation will show Products (with dropdown listing categories) along with four optional links (that you set here), followed by a link to your SEOShop blog (if being used) and a link to your Brands page. With the following settings (Link 1-4) you can add up to 4 links to show between Products and Blog in the main menu.

    The format to be used for these settings is the following: Label=Link

    So for example, if I want this link to be to our about us page, I could enter About Us=/service/about/ This would then show “About Us” as a root link the main menu, and if the user clicked on it would send them to “/service/about/” on your SEOShop.

    You can also enter external/absolute links as well. For example, I could link to google using the following: Google=http://google.com This would show a root link “Google” and if clicked on would send the user to google.com.

    If you don’t want this link to show, simple empty this setting’s value (i.e. delete the text)

  13. Link 2
    Like “Link 1” setting, but will show after Link 1 in the main menu. If you don’t want this link to show, simple empty this setting’s value (i.e. delete the text).

  14. Link 3
    Like the link settings above, but will show after Link 2 in the main menu. If you don’t want this link to show, simple empty this setting’s value (i.e. delete the text).

  15. Link 4
    Like the link settings above, but will show after Link 3 in the main menu. If you don’t want this link to show, simple empty this setting’s value (i.e. delete the text).

  16. Dropdown Ad 1 Image
    When a user hovers over the “Products” root link in the main menu, a drop down will appear to show your catalog’s categories menu, best selling products and four image ads. Using the following “Dropdown Ad” settings, you can control those image ads.

    Select the image you’d like to load for Ad 1 (in JPG image format), recommended size 270 x 160 pixels.

  17. Dropdown Ad 1 Link
    If you want Ad 1 to link somewhere, enter that link here. You can enter either a relative (/service/about/) or absolute (http://google.com) URL.

  18. Dropdown Ad 2 Image
    Select the image you’d like to load for Ad 2 (in JPG image format), recommended size 270 x 160 pixels.

  19. Dropdown Ad 2 Link
    If you want Ad 2 to link somewhere, enter that link here. You can enter either a relative (/service/about/) or absolute (http://google.com) URL.

  20. Dropdown Ad 3 Image
    Select the image you’d like to load for Ad 3 (in JPG image format), recommended size 270 x 160 pixels.

  21. Dropdown Ad 3 Link
    If you want Ad 3 to link somewhere, enter that link here. You can enter either a relative (/service/about/) or absolute (http://google.com) URL.

  22. Dropdown Ad 4 Image
    Select the image you’d like to load for Ad 4 (in JPG image format), recommended size 270 x 160 pixels.

  23. Dropdown Ad 4 Link
    If you want Ad 4 to link somewhere, enter that link here. You can enter either a relative (/service/about/) or absolute (http://google.com) URL.

 

 

Breadcrumb/Sidebar
  1. Text Color
    Select the color to use for text/links in the breadcrumb navigation and sidebar menus

  2. Background Color
    Select the background color to use for breadcrumb navigation and sidebar menus

  3. Hightlight Colors
    Select the color to use for highlighting active links in the breadcrumb navigation and sidebar menus

 

Footer
  1. Logo
    Upload image (in PNG image format) to use for the footer logo in the copyright bar of footer (lower left corner). Recommended size 220 x 30 pixels. Also recommended that the PNG you upload use a transparent background.

  2. Background Color
    Set the background color of the footer element. Footer includes the newsletter, social icons and footer navigation menus.

  3. Label Color
    Set the color to use for labels in the footer element. Labels include Customer Service, Products, My Account, Get in Touch and Sign Up For Our Newsletter

  4. Text/Link Color
    Set the color to use for text and links in the footer element.

  5. Livechat License No.
    If you’d like to use Livechat on your SEOShop website, sign up for an account at https://www.livechatinc.com/, then simply enter your License No. here.

Colors
  1. Body Text Color
    Select color to use for standard text within body area (between header/footer)

  2. Highlight Color
    Select a highlight color to be used on miscellaneous elements throughout the site to draw attention

  3. Link Color
    Global link color setting. Select the color you’d like to use for links throughout the site (more specific link color settings will override this)

  4. Link (Hover) Color
    Select the color to use when user hovers over link with cursor (more specific link hover color settings will override this)

 

Button
  1. Button - Text Color
    Select the color to use for text in standard button

  2. Button (Hover) - Text Color
    Select the color to use for text in standard button when user hovers over button with cursor

  3. Button - Background Color
    Select the background color to use for standard buttons throughout the site

  4. Button (Hover) - Background Color
    Select the background color to use for standard buttons when user hovers over button with cursor

  5. Highlight Button - Text Color
    Select the color to use for text in highlight button

  6. Highlight Button (Hover) - Text Color
    Select the color to use for text in highlight button when user hovers over button with cursor

  7. Highlight Button - Background Color
    Select the background color to use for highlight buttons throughout the site

  8. Highlight Button (Hover) - Background Color
    Select the background color to use for highlight buttons when user hovers over button with cursor

Typography
  1. Headings (Google Web Fonts)
    Select the font you’d like to use for headings in the site (see https://www.google.com/fonts to preview font families)

  2. Standard (Google Web Fonts)
    Select font you’d like to use for standard text throughout site.

  3. Button (Google Web Fonts)
    Select font you’d like to use for buttons throughout site.


 

Contact Details
    1. Name
      Company name for use in theme

    2. Address
      Company address, used in “Visit us at” section, just above footer

    3. Phone number
      Company phone number, used in “Reach us by phone” section, just above footer

    4. Email
      Company email, used in “Email inquiries to” section, just above footer


 

Features
    1. Reviews
      Turn on to show product reviews

    2. Newsletter
      Show newsletter form in footer

    3. Brands
      Show brands link in main menu

    4. Tags homepage
      Show tags on homepage

    5. Products in category
      Show amount of products in the category

    6. Kiyoh
      Shop ID to activate widget

    7. Feedback Company
      Widget ID to activate

    8. Show stock level
      Activate to display stock levels on product page

    9. Show fulltitle
      Displays full title of product

    10. Show Product Ad
      Activate to use theme’s product ads feature (see Setting Up Product Ads below)

    11. # of Thumbnails Per Row
      Set to show the number of thumbnails to show per row for product thumbnails grid view


 

 

Images
  1. Product image fit

  2. Category image fit

  3. Brand image fit

  4. Product Detail Image Width
    Width (in pixels) you'd like your product images to display on the product details page

  5. Product Detail Image Height
    Height (in pixels) you'd like your product images to display on the product details page

Social Media
  1. Facebook
    Add your Facebook URL to display the Facebook icon in the header/footer

  2. Twitter
    Add your Twitter URL to display the Twitter icon in the header/footer

  3. Google+
    Add your Google+ URL to display the Google+ icon in the header/footer

  4. Pinterest
    Add your Pinterest URL to display the Pinterest icon in the header/footer

  5. Youtube
    Add your YouTube URL to display the YouTube icon in the header/ footer

  6. Tumblr
    Add your Tumblr URL to display the Tumblr icon in the header/footer

  7. Instagram
    Add your Instagram URL to display the Instagram icon in the header/footer

Homepage - Header

Settings to control the main (top of page, above navigation bar) banner sliders on the homepage.

  1. Slide (1,2,3) - Label
    Enter the label (first piece of text showing on top of slide) to show with slide (e.g. “GuitarCenter”)

  2. Slide (1,2,3) - Description
    Enter description (shows just below label; e.g. “We make intelligent projects…”)

  3. Slide (1,2,3) - Link
    If you’d like the slide to link somewhere, you can enter the relative or absolute URL here. Leave empty to not link anywhere.

  4. Slide (1,2,3) - Image
    Upload the larger image (in JPG image format) to use for slide (size 1800 x 847 pixels). This larger image will be used in larger screen environments (768px and wider)

  5. Slide (1,2,3) - Mobile Image
    Upload smaller image (in JPG image format) to use for slide (size 767 x 361 pixels). This smaller image will be used in smaller screen environments (767px or less, mobile).


 

Homepage - About Us

Control the about us section on homepage (displays just below navigation bar)

 

  1. Title
    Enter text to show for title of about us section (e.g. “A Little About Us”)

  2. Description
    Enter text to show below about us title (e.g. “Guitar Center is the world’s …”)

  3. Link
    Enter link to send user to when they click on “Read More” link

Homepage - Grid

Conrol the grid of images shown below the “Our Latest Products” section on the homepage.

 

  1. Space (1,2,3,4,5,6) - Image
    Upload image to use in the space of grid. Images sizes for spaces are as follows:
    1 - 945 x 496 pixels
    2 - 470 x 496
    3 - 463 x 496
    4 - 443 x 1004
    5 - 449 x 496
    6 - 449 x 496

  2. Space (1,2,3,4,5,6) - Use Hover Image
    Activate if you’d like to show a hover image when user hovers over this space

  3. Space (1,2,3,4,5,6) - Link
    If you’d like to link this space somewhere, enter the relative or absolute URL to send user to on click

 
Homepage - Lower Banner

Control lower banner slider on homepage, just below Homepage Grid.

 

  1. Slide (1,2,3)
    Upload larger image (1800px wide) as banner for this slide. This version will be used for screens larger than or equal to 768px wide.

  2. Slide (1,2,3) - Mobile
    Upload smaller image (767px wide) as banner for this slide. This version will be used for screens smaller than 768px wide.

  3. Slide (1,2,3) - Link
    Enter URL to link user to when slide is clicked on. If you don’t want to link anywhere, just enter #. If this field is left empty, slide will not be shown

 
Homepage - Top Reviews

Control top reviews section of homepage

 

  1. Video URL
    Enter the full embed URL for the video on youtube (e.g. https://www.youtube.com/embed/TTzdcOcpyuE)

  2. Video Size
    Enter the width and height of your video (i.e. widthxheigh, no spaces; e.g. 400x350)

  3. Title
    Enter text for title, first piece of text to show just below video

  4. Subtitle 1
    Enter text for subtitle, shows just below title

  5. Subtitle 2
    Enter text for second subtitle, shows just after first subtitle

  6. Show Banner after Top Reviews
    Activate if you’d like to show a banner after the top reviews video section

  7. Banner Image after Top Reviews
    If showing banner, upload the image (in JPG image format) you’d like to use here for larger screens (image size 1800px wide). This version will be used for screens larger than or equal to 768px wide

  8. After Top Reviews Banner Mobile Image
    If showing banner, upload a smaller image (in JPG image format) you’d like to use here for mobile screens (image size 1800px wide). This version will be used for screens smaller than 768px wide

Homepage - Tags

Control settings for tags section on homepage

 

  1. Background Color
    Select the background color for section

  2. Label Color
    Select the color of the label “Tags” in section

 

 

Homepage - Social Plugins

Control the social plugins displayed at the bottom of homepage

 

  1. Google Plus User ID
    Enter user ID for your google plus account to show recent activities. Leave empty if you don’t want to display this plugin

  2. Facebook URL
    URL to your facebook page to load facebook plugin on homepage. Leave empty if you don’t want to display this plugin

  3. Twitter Timeline URL
    Your twitter URL page for timeline plugin to be displayed on homepage. Leave empty if you don’t want to display this plugin.

  4. Twitter Timeline Widget ID
    Widget ID from your twitter account's timeline widget, loads timeline on homepage social plugin section.

  5. Twitter Username
    Username for your twitter account, loads with plugin on homepage. This displays at the bottom of the plugin

  6. Blog Logo (Mini)
    Display at the bottom of blog plugin. Recommend PNG format with transparent background, size 120 x 30 pixels.

 



Setting Up Product Ads

 

On the product view page of your webstore, the Palisade theme allows you to show a product ad image (below main product image, to left of description). To use this feature, you’ll need to a) activate the setting “Show Product Page Ad” and b) setup and assign product ad tags using the below instructions.

 

To use this product page ad feature, you need to setup product page ad tags. Each tag you setup is a separate ad which includes the image filename and link to send the user to if they click on said ad.

 

To create a new product page ad, start by uploading the image file for the ad by going to SEOShop admin>>Tools>>Files. Click Upload Files and select the image you want to use for the ad. It needs to be a valid web image format (PNG, JPG or GIF), recommended size for image is 370 x 370 pixels. Once you’ve uploaded the file, click on the URL text in that new files row and copy the URL value (CTL+C or mouse right-click>>copy).

 

Now that you’ve provided an image file for the ad and have the URL to that image file, the next step is to setup the tag for this product ad. In SEOShop admin, go to Products>>Tags, click Add a tag. For the tag to be used for the product page ad feature, the title of the tag needs to be formatted in exactly the following format: ProductAd:image_filename=link. So, for your new tag your title would start with “ProductAd:” followed by the URL of the image file you just uploaded (CTL+V or mouse right-click>>paste to paste the URL you previously copied). After filename, you need to type “=”, after which you can enter the relative or absolute URL you’d like the ad to link to.

 

For example, let’s say I want a product ad so I upload the image file and get the URL to another product on my site that I want it to link to, so I’m going to use the following...

 

Image filename = //static.webshopapp.com/shops/132178/files/062965058/product-ad.jpg

Link URL = /taylor-polytune-2-poly-chromatic-tuner.html

 

...with that information, my product tag’s title would be ProductAd://static.webshopapp.com/shops/132178/files/062965058/product-ad.jpg=taylor-polytune-2-poly-chromatic-tuner.html



Finally for your new product tag, set Visibility to Visible (so the tag will be available on the webstore), then click Save to create the new tag.

 

Now that you’ve setup a product ad tag, You can assign it to any product you want to use that particular ad. You can do this via SEOShop admin>>Catalog>>Products>>select Product>>Tags>>Apply the product ad tag you want to use. Only one product ad can be used per product, so if you assign multiple product ad tags to a product, the theme will only use the first one listed.

 

Note that these special product ad tags, if setup correctly as instructed above, will not display in the “Tags” listing of the product view page in your webstore (as they are not meant to be view by users).



Last update:
2017-06-21 00:02
Author:
John
Revision:
1.1
Average rating:0 (0 Votes)

You cannot comment on this entry

Chuck Norris has counted to infinity. Twice.