View
7
Download
0
Category
Preview:
Citation preview
Contents 1. Getting started 3
1.1. BSS Themes Introduction 3
1.2. About THINNK Theme 3
2. System requirement 4
2.1. Magento version 4
2.2. System requirement 4
3. Installation guide 4
3.1. Magento Installation 4
3.2. Theme Installation 4
3.2.1. Prepare Installation 4
3.2.2. Manual Installation 4
3.2.3. Import Sample Data 4
4. Basic Configuration 5
4.1. Enable theme 5
4.2. Theme basic configuration 6
4.2.1. Logo 6
4.2.2. Design 7
4.2.3. Enable Mega menu 9
5. Theme elements (incl. Design + Configs) 9
5.1. Header 9
5.1.1. Header CMS blocks 9
5.1.2. Mega menu 11
5.2. Footer 12
5.3. Homepage 13
5.3.1. Homepage banner slider 13
5.3.2. Promo block 15
5.3.3. Best seller widget 16
5.3.4. Our Product tabs 18
5.3.5. Hot deal widget 19
5.3.6. Our collections block 21
5.3.7. Brand block 22
5.3.8. Top selling and New Arrival 22
5.3.8. Latest news 24
5.4. Category page 24
5.4.1. Category page layout 24
5.4.2. Category view 25
5.4.2.1. Category grid view 25
5.4.2.2. Category list view 26
5.4.3. Layered navigation 26
5.4.4. Category page CMS blocks 26
5.5. Product page 27
5.5.1. Product labels 27
5.5.2. Product Main Images slider 28
5.6. Blog page 29
5.6.1. Blog collection page: 29
5.6.2. Blog category 30
5.6.3. Blog post page 31
5.7. Other pages 31
5.7.1. About us 31
5.7.2. Contact us 33
6. Help & Support 35
6.1. Reference 35
6.2. Support 35
6.2.1. Policy 35
6.2.2. Contact us 35
BSS Theme User guide 2
1. Getting started
1.1. BSS Themes Introduction
Welcome to BSS Themes!
We are a team of amazing people including Magento experts, qualified developers, creative designers and so on. We work and learn together to bring the best success
solution for our customers.
Our vision is ”Provide the best web design for your Ecommerce store”
Our story
We have been developing with a journey for 6 YEARS and beyond. Our services include:
● Magento Consultant
● Magento Customization
● Magento Optimization
● Magento Extension Development
● Magento Maintenance
We are glad to have:
1500+ Happy Customers with BSS Geek
Magento development agency who will offer you optimal solution for all problems you have.
100+ Ways to optimization your e-commerce website with 100+ Magento extensions in Bss Commerce with the top Magento extensions which are highly rated by
the customers
Our products
High-quality themes focus on:
UX FIRST
We promise to bring the best user experience to our clients! Our themes are 100% responsive. They are also easy to use with easily accessible admin configuration that
the shop owner can learn to use in just a blink of an eye
OPTIMIZED FOR E-COMMERCE
With more than 6 years experience in building e-commerce websites, we know what features are necessary. Not only optimized for website speed, our themes also give
the shop owner the best space to show your incredible products, to attract the customers to click more, buy more.
UPDATE & SUPPORT
We will continuously upgrade our products, include more amazing features to improve their quality. Also, we are happy to give you any advise and customization needed
for your website.
1.2. About THINNK Theme
THINNK is a qualified Magento theme which is extremely customizable, 100% responsive and fully optimized for website speed. It is suitable for every type of stores and
make great impression with users by its flexibility and ability to customize with the nice clean code.
BSS Theme User guide 3
2. System requirement
2.1. Magento version
Our THINNK theme is compatible with Magento version 2.0.x, 2.1.x and 2.2.x
2.2. System requirement
Our theme doesn’t have any requirement rather than Magento’s system requirement (see more at 3.1. Magento Installation)
3. Installation guide
3.1. Magento Installation
- System requirements
Magento 2.0: http://devdocs.magento.com/guides/v2.0/install-gde/system-requirements2.html
Magento 2.1: http://devdocs.magento.com/guides/v2.1/install-gde/system-requirements2.html
Magento 2.2: http://devdocs.magento.com/guides/v2.2/install-gde/system-requirements2.html
- Magento Installation
You can see Magento Installation guide in the link below:
http://devdocs.magento.com/guides/v2.1/install-gde/prereq/zip_install.html
3.2. Theme Installation
3.2.1. Prepare Installation
Please remember to backup your website’s code and database before installing our themes to make sure we have things to revert in case any conflict happens
3.2.2. Manual Installation
- Install theme via FTP:
1. Log into your hosting space via a FTP software. ie FileZilla
2. Unzip Package > Theme Files > theme_v2.1.x.zip (or theme_v2.2.x.zip if you use Magento version 2.2.x) and upload all directories(there are 2 directories - app,
pub) to Magento 2 root directory.
- Install theme via Cpanel:
1. Log into your CPanel(Control Panel) by your hosting account or cpanel user information.
2. Upload Package > Theme Files >theme_v2.1.x.zip(or theme_v2.2.x.zip if you use Magento version 2.2.x) to your magento root directory and unzip its content.
3.2.3. Import Sample Data
Thinnk theme provides extremely easy - one click demo installation. In order to do demo installation, you should import static Blocks and CMS pages in BSS Theme -
Settings Theme > Import Data
BSS Theme User guide 4
Then choose Theme : Bss/Thinnk (1)
- Tick on CMS Pages (2): This will import CMS pages (About Us, Contact, 404...) created as on our demo website
- Tick on CMS Blocks (3): This will import static blocks (promo, collection, footer columns...) created as on our demo website
Then click on “Import” button, all sample data will be imported to your website.
4. Basic Configuration
4.1. Enable theme
Thinnk Theme is equipped with the dedicated administrative module which offers a variety of additional settings. To enable it, go to Content > Design > Configuration >
BSS Thinnk section to configure theme's main settings. Visual experience settings can also be changed in this configuration link as well.
BSS Theme User guide 5
Then, click Edit on the your selected theme language and choose Bss Thinnk
Choose Save Configuration.
4.2. Theme basic configuration
4.2.1. Logo
To change Logo (in Header), go to Content > Configuration > Design > Edit Theme, choose Store view > Edit
Select Edit > Header tab
BSS Theme User guide 6
In Logo Image, choose Upload and select logo image.
Note: Logo image’s width and height should be as default.
4.2.2. Design
Configs can be changed in Stores > Configuration > BSS Theme configs > Design theme
● You will see the template information, you can enter your own style variables
● Once you are done with editing the values, save the configuration. ● After this, a css file will be generated and you can visit the frontend of your Magento store and see the new look.
There are 2 parts in Design configuration: Body and Font
Body - Basic Color and Product Labels
○ Text Color: click Color wheel icon on the right to change color of the text
○ Link Color: click Color wheel icon on the right to change color of the link
○ Link Hover Color: click Color wheel icon on the right to change color of the link when hovering
○ Button Background Color: click Color wheel icon on the right to change color of the button background
○ Button Text Color: click Color wheel icon on the right to change color of the button text
○ Button Hover Background Color: click Color wheel icon on the right to change color of the button background when hovering
○ Button Hover Text Color: click Color wheel icon on the right to change color of the button text when hovering
BSS Theme User guide 7
● Product Labels:
Configurations are:
○ Label “New” Background Color: click Color wheel icon on the right to change color of the label “New” background
○ Label “New” Text Color: click Color wheel icon on the right to change color of the label “New” text
○ Label “Sale” Background Color: click Color wheel icon on the right to change color of the label “Sale” background
○ Label “Sale” Text Color: click Color wheel icon on the right to change color of the label “Sale” text
Note: after saving the configuration, we must run flush cache and deploy command for frontend to update the changes
Font
● Basic Font Size: click at the value in drop down list to choose basic font size. This is the size of regular text. Most of the other elements’ font size will be calculated
relative to this value.
● Heading Font Family: select predefined font stack in drop down list to choose heading font family.
● Font Family from Google font: type in your custom font from google font.
Note: Only add Google font.
● Font Family Custom Name: type in your font family custom.
Note: Do not add trailing semicolon.
● Font Weight: specify the weight of the font. You can only use numeric font weights which are available for the CSS property font-weight.
Note: normal weight is 400, bold is 700. Leave empty to use default weight.
BSS Theme User guide 8
Product Customs > Images
● Keep Image Aspect Ratio: Set Yes, to keep aspect ratio of the product image (height of the image will be calculated automatically based on width). If set to No,
Magento will automatically transform each image into square.
● Image Width: Input the width value (pixel) of product image. If width is not specified, default width will be used as 295 pixels.
4.2.3. Enable Mega menu
Configurations can be changed in BSS Themes > Mega Menu > Configurations
For more configurations with Mega menu, see more at 5.1.2. Mega menu
● Enabled MegaMenu: choose Yes to enable Mega menu, or No to disable it.
● Enabled Link Home: choose Yes to enable Home item in Mega menu, or No to disable it.
5. Theme elements (incl. Design + Configs)
5.1. Header
5.1.1. Header CMS blocks
Top Header
The following block identifiers can be used to display blocks in the top header section of the store:
BSS Theme User guide 9
● bss_block_top_header: shipping info at the top of the header, floating left.
Block name: Bss Block Top Header
Content:
<div class="col-xs-4 col-md-4 top-header-block row"><span class="shipping-icon"></span>
<p>Free Shipping</p>
</div>
● bss_block_call_us: help/contact info at the top of the header, floating right.
Block name: Bss Block Call Us
Content:
<div class="col-xs-6 col-md-6 call_us text-right row"><span class="glyphicon glyphicon-earphone"></span> <span
class="text">Call us toll free: (+84) 123 456 88</span></div>
To change the content of these blocks, go to their Content input field in Content > Blocks, Choose block name > Select > Edit.
Main header
The main header section of the store includes these blocks:
1. Logo
2. Language
3. Currency
4. Shopping cart
5. Menu (Mega menu)
Sticky header configuration:
Configuration can be changed in Stores > Configuration > BSS Theme Configs > General Settings > Header
● Sticky Header: choose Enable to enable Sticky header, or Disable to disable it.
BSS Theme User guide 10
5.1.2. Mega menu
Configuration
To choose Mega menu items, go to BSS Themes > Mega Menu > Manage Menu Items
With each of the category and sub-category on the left, there are config for Mega menu as follows:
● Enable: choose Yes to display that category/sub-category in Mega menu, or No to hide it.
● Menu Content Type: choose the content type of the menu among Classic, Category Listing and Content
● Block Content: choose CMS block to display on the Mega menu (these blocks are also listed in Magento CMS blocks)
● Menu Url Type: choose between Category Link and Custom Link
○ Custom Link: If Custom Link is chosen in Menu Url Type field, then fill in the link in the text box.
○ Category Link: If Category Link is chosen in Menu Url Type field, then select the Category
● Menu Width Type: choose between Full Width and Classic
● Label Type: choose which Label type to display on Mega menu among New, Hot, Sale
● Static Block Top: choose which Static block to display on the top of the Mega menu
● Static Block Right: choose which Static block to display on the right of the Mega menu
● Static Block Bottom: choose which Static block to display at the bottom of the Mega menu
● Static Block Left: choose which Static block to display on the left of the Mega menu
BSS Theme User guide 11
5.2. Footer
The following block identifiers can be used to display blocks in the top header section of the store:
● bss_logo_footer_block: company logo
Block name: Bss Logo Footer Block
Content:
<div class="col-xs-12 col-sm-4 col-md-12 footer-logo"><a href="{{store url='/'}}"><img src="{{media
url="wysiwyg/footer/logo_1.png"}}" alt="" /></a></div>
● bss_footer_store_info: info about company, phone number, address etc.
Block name: Bss Footer Store Info
Content:
<div>
<ul class="list-unstyled address-list margin-bottom-20 icons">
<li class="col-xs-12 col-sm-4 col-md-12"><i class="glyphicon glyphicon-map-marker"></i><address><strong>Address:
</strong>109 Sky Tower, Street name, AZ District, New York City, USA</address></li>
<li class="col-xs-12 col-sm-4 col-md-12"><i class="glyphicon glyphicon-envelope"></i><address><strong>Email:
</strong>info@anybiz.co</address></li>
<li class="col-xs-12 col-sm-4 col-md-12"><i class="glyphicon glyphicon-phone-alt"></i><address><strong>Phone:
</strong>800 123 3456</address></li>
</ul>
</div>
● bss_footer_links_our_company: info about your company
Block name: Bss Footer Links Our Company
Content:
<h3 class="thumb-headline">Our Company</h3>
<ul class="list-unstyled simple-list links">
<li><a href="{{store url='about-us'}}">About Us</a></li>
<li><a href="{{store url='blog'}}">Blog</a></li>
</ul>
● bss_footer_terms_privacy: info about terms and privacy
Block name: Bss Footer Terms and Privacy
Content:
<h3 class="thumb-headline">Terms and Privacy</h3>
<ul class="list-unstyled simple-list links">
<li><a href="privacy-policy-cookie-restriction-mode/">Privacy and Cookie Policy</a></li>
<li><a href="search/term/popular/">Search Terms</a></li>
BSS Theme User guide 12
<li><a href="sales/guest/form/">Orders and Returns</a></li>
</ul>
● bss_footer_support_links: info about customer support
Block name: Bss Footer Support Links
Content:
<h3 class="thumb-headline">Support</h3>
<ul class="list-unstyled simple-list links">
<li><a href="contact/">Contact Us</a></li>
<li><a href="catalogsearch/advanced/" data-action="advanced-search">Advanced Search</a></li>
</ul>
● bss_social_icons_block: social services links.
Block name: Bss Social Icons Block
Content:
<div class="social-icons-block">
<ul class="list-inline shop-social">
<li><a href="#"><i class="bt-icon-social-facebook"></i>facebook</a></li>
<li><a href="#"><i class="bt-icon-social-linkin"></i>linkin</a></li>
<li><a href="#"><i class="bt-icon-social-pinterest"></i>pinterest</a></li>
<li><a href="#"><i class="bt-icon-social-youtube"></i>youtube</a></li>
<li><a href="#"><i class="bt-icon-social-twiter"></i>twitter</a></li>
</ul>
</div>
● bss_block_bottom_footer: info about payments method
Block Name: Bss Block Bottom Footer
Content:
<div class="icon-payment-method"><img src="{{media url="wysiwyg/footer/payment-icons.png"}}" alt="" /></div>
To change the content of these blocks, go to their Content input fields in Content > Blocks, Choose block name > Select > Edit.
5.3. Homepage
5.3.1. Homepage banner slider
This element display on homepage with the position as below:
BSS Theme User guide 13
Configurations can be changed in
1. Stores > Configuration > BSS Theme Configs > Banner Slider > General Options
● Enabled Banner Slider: choose Yes to enable Banner slider, or No to disable it.
● Auto Slide: choose Yes to enable auto slide, or No to disable it.
● Enabled LazyLoad: choose Yes to enable Lazy load, or No to disable it.
● Speed: If choosing Yes in Enabled LazyLoad, input speed of slide (shown in mili-second), eg. type: 300, 500 or 1000… If left bank, default speed 500 is used.
● Hide on mobile: choose Yes to show Banner slider on mobile, or No to hide it.
2. BSS THEMES > Banner Slider > Manager Slider Item > Add New Slider Item
Choose the banner slider in the list > Select > Edit
● Title: Name of the banner
● Show Title: choose Yes to show title, or No to hide it.
BSS Theme User guide 14
● URL: Input URL link to be redirected to when clicking the banner
● Description: Description of the banner, display on the banner.
● Position: optional (input number), this configuration allows you to set the display position of the banner (in ascending order)
● Status: choose Enable to enable the banner, or Disable to disable it.
● Banner image: Click Choose File to select banner image, tick Delete Image to delete the current image, untick to remain it.
● Animation Effect: choose effect for the banner, among FadeIn, Fadeout, bounceIn, bounceInDown, bounceInUp
● Width: optional, choose the banner’s width
● Height: optional, choose the banner’s height
5.3.2. Promo block
This is a CMS block that shows promotion information on your website. It will be added to your store if you choose to import our sample data (see more at 3.2.4. Import
Sample Data)
Identifier: bss_promo_block
Block name: Bss Promo Block
Content:
<div class="col-md-3 col-sm-3 promo-item clearfix">
<div class="thinnk-icon-promo">
<div class="icon"><span class="bt bt-icon-shipping">Free shipping</span></div>
</div>
<div class="info-promo">
<h3>Free shipping</h3>
<p>Usu ad vero accusata mediocritatem. Molestie consulatu sententiae ad vim.</p>
</div>
</div>
<div class="col-md-3 col-sm-3 promo-item clearfix">
<div class="thinnk-icon-promo">
<div class="icon"><span class="bt bt-icon-message">Free support</span></div>
</div>
<div class="info-promo">
<h3>Free support</h3>
<p>Usu ad vero accusata mediocritatem. Molestie consulatu sententiae ad vim.</p>
</div>
</div>
<div class="col-md-3 col-sm-3 promo-item clearfix">
<div class="thinnk-icon-promo">
<div class="icon"><span class="bt bt-icon-open">Always open</span></div>
</div>
<div class="info-promo">
<h3>Always open</h3>
BSS Theme User guide 15
<p>Usu ad vero accusata mediocritatem. Molestie consulatu sententiae ad vim.</p>
</div>
</div>
<div class="col-md-3 col-sm-3 promo-item clearfix">
<div class="thinnk-icon-promo">
<div class="icon"><span class="bt bt-icon-payment">Easy payment</span></div>
</div>
<div class="info-promo">
<h3>Easy payment</h3>
<p>Usu ad vero accusata mediocritatem. Molestie consulatu sententiae ad vim.</p>
</div>
</div>
5.3.3. Best seller widget
This section will show your products based on the conditions that are configured in admin panel. Configurations can be changed in:
i. Content > Widgets > Create new widget named Bestseller Block
BSS Theme User guide 16
● Widget Title: input the title of the widget.
● Assign to Store Views: choose which store views to display.
● Sort Order: Sort Order of widget instances in the same container.
● Layout Updates:
○ Display on: choose the page to display in the drop down list
○ The 5th part in the pic above depends on which page is selected in Display on field. There are 2 templates to choose: “Products Template (Bss
CatalogWidget)” (show products without a slider) and “Products Template with Slider (Bss CatalogWidget)” (show products using slider)
Widget Options
● Title: input the widget name
BSS Theme User guide 17
● Product logic type: Select type of product in the drop down list, among Show product by SKUs, Show product by category ID, Show Bestseller Products.
● List SKUs: depends on "Product logic type" (input a comma separated list of product SKUs)
● Category ID: depends on "Product logic type". (input a Category ID, Ex: 3)
● Number of Products to Display: input the number of products to display on this widget.
● CSS Class: input custom CSS, optional for advanced users.
5.3.4. Our Product tabs
This section will show featured products or products in your chosen categories
Configurations can be changed in Stores > Configuration > BSS Theme Configs > Product Tabs > General Options
● Enabled Product Tabs: choose Yes to enable Product tabs, or No to disable it.
● List Options: choose options to display for tabs among Disable Tab options, Bestseller, Newest and Featured. If choose Disable Tab options, there is no sub-tab
in Our Products tab.
● Category in tabs: choose categories to display in tabs among all Categories in your website (eg. Women, Men, Clothing…).
BSS Theme User guide 18
5.3.5. Hot deal widget
This section will show 1 product that has special price.
Configurations can be changed in:
i. Products > Catalog, choose product name > Action > Edit
Choose Special price: In product admin page, Price > Advanced Pricing, type Special Price and choose Special Price From [date] to [date]
Choose Hot deal product: In product admin page
Is Hot deal product?: choose Yes to show this product in Hot deal, or No to hide it.
ii. Content > Widgets > Create Hot Deal widget
Storefront Properties
BSS Theme User guide 19
● Widget Title: input the title of the widget.
● Assign to Store Views: choose which store views to display.
● Sort Order: Sort Order of widget instances in the same container.
● Layout Updates:
○ Display on: choose the page to display in the drop down list
○ The 5th part in the pic above depends on which page is selected in Display on field.
Widget Options
● Hot deal Title: input the widget name
● CSS Class: input custom CSS, optional for advanced users.
● Product: select products to display in widget
BSS Theme User guide 20
5.3.6. Our collections block
This is CMS block that shows promotion for your new collection. It will be added to your store if you choose to import our sample data (see more at 3.2.4. Import Sample
Data)
Identifier: bss_our_collections_block
Block name: Bss Our Collections Block
Content:
<div class="block-title bss-block-title">
<h3><span>Our Collections</span></h3>
</div>
<div class="cd-gallery">
<div class="items clearfix">
<div class="col-md-4 cd-item-wrapper">
<div class="cd-item-info"><span class="title-background">Spring<label>Collections</label></span>
<p class="desc">Vitae populo nam eu, at dicta habemus tacimates eos. Eam ut nisl alia laboramus. Eum et facete
delenit, eos an alii munere, sumo altera nonumes</p>
</div>
</div>
<div class="col-md-8 slider-image">
<ul class="cd-item-wrapper img-wrapper">
<li class="move-left" data-title=" Lorem ipsum dolor sit amet, no oratio rationibus "><img src="{{media url="wysiwyg/bsscollection/img1.jpg"}}" alt="" /></li>
<li class="selected" data-title=" Lorem ipsum dolor sit amet, no oratio rationibus 2 "><img src="{{media url="wysiwyg/bsscollection/img1.jpg"}}" alt="" /></li>
<li class="move-right" data-title=" Lorem ipsum dolor sit amet, no oratio rationibus 3 "><img src="{{media url="wysiwyg/bsscollection/img3.jpg"}}" alt="" /></li>
</ul>
</div>
</div>
</div>
Note: text in red are the titles on frontend
BSS Theme User guide 21
5.3.7. Brand block
This section is a CMS block that shows the brands that you work with. It will be added to your store if you choose to import our sample data (see more at 3.2.4. Import
Sample Data)
Identifier: bss_brands
Block name: Bss Brands
Content:
<div class="item brand-item"><a href="#"><img class="img-responsive" src="{{media
url="wysiwyg/bssbrands/brand1.png"}}" alt="" /></a></div>
<div class="item brand-item"><a href="#"><img class="img-responsive" src="{{media
url="wysiwyg/bssbrands/brand2.png"}}" alt="" /></a></div>
<div class="item brand-item"><a href="#"><img class="img-responsive" src="{{media
url="wysiwyg/bssbrands/brand3.png"}}" alt="" /></a></div>
<div class="item brand-item"><a href="#"><img class="img-responsive" src="{{media
url="wysiwyg/bssbrands/brand4.png"}}" alt="" /></a></div>
<div class="item brand-item"><a href="#"><img class="img-responsive" src="{{media
url="wysiwyg/bssbrands/brand5.png"}}" alt="" /></a></div>
<div class="item brand-item"><a href="#"><img class="img-responsive" src="{{media
url="wysiwyg/bssbrands/brand6.png"}}" alt="" /></a></div>
5.3.8. Top selling and New Arrival
This section will show your best selling (in latest month) and newly added products
This block configurations can be changed in Stores > Settings > Configuration > BSS Theme Configs > Feature Block > General
● Enable TopSelling: choose Enable to enable Top Selling block, or Disable to disable it.
BSS Theme User guide 22
● Enable NewArrival: choose Enable to enable New Arrival block, or Disable to disable it.
New arrival section only shows product which is set the date in Products > Catalog > choose product > Set product as new from…
5.3.8. Latest news
This section will show your 4 latest blog posts (see more about blog features in 6.6. Blog page)
Block name: Lastest News Block
Identifier: latest_news
Then go to CONTENT > Pages > Select "Home page" to add this block to homepage
Content:
<referenceBlock name="breadcrumbs" remove="true" />
<referenceContainer name="main.content">
<container name="bss.lastest.news.container" as="bss_lastest_news_container" label="Bss Lastest Block"
htmlTag="section" htmlClass="lastest-news-block clearfix" after="-" >
<block class="Bss\Blog\Block\Post\Latest" name="latest_news" template="post/latest_news.phtml"
/>
</container>
</referenceContainer>
BSS Theme User guide 23
5.4. Category page
5.4.1. Category page layout
In Magento you can select category page layout - the number of columns: one, two, or three columns. To do this, go to Products > Categories, select the category >
choose Design field, select layout type in the drop down list in Layout (1 column, 2 columns with left bar, 2 columns with right bar and 3 columns) and click Save Page
button
5.4.2. Category view
In this tab, you can set options related to the category view. Category view presents the list of products from the selected category.
Configurations can be changed in Stores > Configuration > BSS Theme Configs > General Settings
Category View > Product configs
● Product Hover Effect: allows product information (name, price…) to show only when customers hover on product image, choose Enable to enable the effect, or
Disable to disable it.
● Disable Hover Effect in mobile: choose Enable to enable the effect in mobile, or Disable to disable it.
Note: Product Hover Effect will be disabled if width of the browser viewport is below 768px.
● Align Center: Align center elements of the grid item: product name, price, button etc., choose Yes to enable alignment, or No to disable it.
● Display Name in Single Line: choose Yes to display in single line, or No to disable it.
Note: When setting Yes: if product name is too long to be displayed in a single line, it will be clipped and an ellipsis ('…')
● Price: choose among Hide, Show and Show On Hover
BSS Theme User guide 24
● Ratings: choose among Hide, Show and Show On Hover
5.4.2.1. Category grid view
In this tab, you can set options related to the grid mode of the category view.
On Frontend, to display category in grid view, click Grid view icon on the right of the screen.
Configs can be changed in Stores > Configuration > BSS Theme Configs > General Settings > Category View (Grid mode) > Number of Columns
● Number of Columns: number of products displayed in a single row
● Number of Columns Below 992px: number of products displayed in a single row with 992px screen width (tablet view)
● Number of Columns Below 768px: number of products displayed in a single row with 768px screen width (mobile view)
5.4.2.2. Category list view
On Frontend, to display category in grid view, click List view icon on the right of the screen.
5.4.3. Layered navigation
Layered navigation is a feature function in Thinnk theme. It helps customers to find products based on category, price range, or any other available attributes and plays a
role as a filter. Layered navigation usually appears in the left column of search results and category pages and sometimes on the home page.
Configs can be changed in Stores > Configuration > BSS Commerce > Layered Navigation Lite > Layered Navigation Configuration
● Enable: choose Yes to enable Layered Navigation, or No to disable it.
● Use Ajax: choose Yes to enable Ajax, or No to disable it.
● Expand/Collapse: If choosing Expand, all attribute blocks in the Layered Navigation will be expanded, or collapsed if setting to Collapse.
● Show More/Less: Please fill in a number (X) in the field. If the number of attribute options is bigger than X, the Show More/Show Less buttons will be displayed.
Enter 0 if you want to disable the Show More/Show Less buttons
● Enable Price Slider: choose Yes to enable Price slider, or No to disable it.
5.4.4. Category page CMS blocks
This block will be added to your store if you choose to import our sample data (see more at 3.2.4. Import Sample Data)
BSS Theme User guide 25
Block ID: bss_banner_sidebar
Block name: Bss Banner Sidebar
Configurations can be configured in Content > Blocks > Choose bss_banner_sidebar > Select > Edit
Content:
<div class="banner-sidebar"><img src="{{media url="wysiwyg/banners/static-block-min.jpg"}}" alt="" /></div>
5.5. Product page
5.5.1. Product labels
Product label in product page will display as below:
BSS Theme User guide 26
Configs can be configured in Stores > Configuration > BSS Theme Configs > General Settings > Product Labels
● Show "New" Label: choose Yes to enable New label, or No to disable it.
● Show "Sale" Label: choose Yes to enable Sale label, or No to disable it.
Note:
● Products must have special price and have attribute “Sale” = Yes to have “Sale” label enabled
● Products must have attribute “New” = Yes with the date being set to have “New” label enabled (see more about this configuration in 5.3.8. Top selling and New
Arrival)
5.5.2. Product slider
Product Sliders in product page will display as below:
Configs can be changed in Stores > Configuration > BSS Theme Configs > General Settings > Product Sliders
BSS Theme User guide 27
● Speed: Input duration (in milliseconds) of scrolling animation (minimum = 500).
● Pause on Hover: If Enable, when the slider is mouseovered then the automatic scrolling will pause. Choose Disable to disable this function.
● Loop: If Enable, scrolling will loop, or choose Disable to disable it.
● Lazy Loading: Delays loading of images and optimal for website speed. If Enable, images outside of viewport will not be loaded before user scrolls to them.
Choose Disable to disable it.
5.6. Blog page
5.6.1. Blog collection page:
URL: [your_website_url]/blog/
Configurations for this page include:
i. Stores > Settings > Configuration > BSS Theme Configs > Bss Blog
BSS Theme User guide 28
General
● Base URL: input base url of blog collection page
● Blog Name: input name of your blog collection
● URL Suffix for Posts: input suffix in url for posts (the end of permalink for posts)
● URL Suffix for Categories: input suffix in url for categories (the end of permalink for categories)
5.6.2. Blog category
You can create and manage blog categories in BSS Themes > Bss Blog > Category
To edit a category, please choose Category > Action > Edit > General
BSS Theme User guide 29
5.6.3. Blog post page
You can create and manage blog posts in BSS Themes > Bss Blog > Posts
To manage content in Post: Post > Post Manager, choose Post title > Action > Edit > General
About managing Comment: Comment > Comment Manager > choose Category > Action > Edit > General
BSS Theme User guide 30
5.7. Other pages
Other pages supported by our theme includes About us page and Contact us page. These pages will be added to your store if you choose to import our sample data (see
more at 3.2.4. Import Sample Data)
5.7.1. About us
URL: [your_website_URL]/about-us
This page can be redirected to by the About us link at on Footer.
BSS Theme User guide 31
To change the content of About us page, go to Content > Pages, choose About us > Select > Edit > Content
5.7.2. Contact us
URL: [your_website_URL]/contact/
This page can be redirected to by the Contact us link at Support block on Footer.
BSS Theme User guide 32
To change the content of Contact us page, go to Content > Blocks, choose Bss Content Contact (content_contact) > Select > Edit
For advanced edit, select Show/Hide editor.
Choose Save Block.
6. Help & Support
6.1. Reference
You may find these sites useful while installing and configuring your Magento store:
Magento installation
● Magento FAQ:
http://www.magentocommerce.com/product/faq
● System Requirements:
http://www.magentocommerce.com/system-requirements/
● Installation Guide:
http://www.magentocommerce.com/knowledge-base/entry/magento-installationguide
BSS Theme User guide 33
Online Magento guide:
● Magento user guide:
http://docs.magento.com/m2/ee/user_guide/getting-started.html
● Magento Wiki:
http://www.magentocommerce.com/wiki/
● Magento Forum:
http://www.magentocommerce.com/boards/
● stackoverflow.com
http://stackoverflow.com/questions/tagged/magento
● Magento Answers Stack Exchange
http://magento.stackexchange.com/
6.2. Support
6.2.1. Policy
We only provide support for issues related strictly to the theme. We do not provide support for Magento configuration, installation, maintenance etc. If you have
questions about Magento (for example: about managing categories and products, creating attributes, installing extensions etc.), please refer to Magento Forum. Almost
every detail of Magento configuration is described there so you will find answers for all your questions. You will also find many helpful tutorials.
The best place to start searching is the online Magento guide. You can find there all the basic configuration information.
If you find any bugs (so far there were only a few, all fixed immediately), please contact us through the contact form on our profile page on http://bssthemes.com/.
6.2.2. Contact us
Any questions or concern about us, feel free to contact:
● Website: http://bssthemes.com/
● Support: support@bssthemes.com
BSS Theme Support team is always ready to aid you with any issue referring to our products. Additionally, we also give you Website development and Administration
Support
BSS Theme User guide 34
Recommended