User Guide

USER GUIDE

Having an attractive ecommerce theme is one of the foremost necessities of being an ecommerce success. With Atractivo, you have got this covered.

Install Theme

Once you have bought the theme from the Odoo Apps store, you will notice that you have got two folders. The first one is ‘atractivo_base’ and the second one is ‘theme_atractivo’.

You will be required to add these two folders into your addons directory, followed by updating your App List.

Once this is done, go to:

Website Configuration Settings

Under the Settings options, you can select the Website in which you wish to install your new amazing buy, Theme Atractivo.

Click on “Choose A Theme” button and you will be shown a list of theme available, select Theme Atractivo and install it in your website.

Now, once installed, you can start by customizing your theme as per your requirement.

Customize Theme-Header Style

Starting from the beginning, let’s start by customizing your theme from the header.
In order to do the same, go to the Web page and click on the ‘Customize’ option.

From the list of options displayed, proceed by clicking on the ‘Customize Theme’ option. You will see a list of headers styles shown to you to choose according to your taste.

Custom Header 1
Custom Header 2
Custom Header 3
Custom Header 4
Custom Header 5

Customize Theme-Font Selection

You can customize the font of your theme from the four preloaded fonts we’re providing right now.

Customize Theme-Color Selection

You can customize the color of your theme as per your requirement.

Mega Menu

Menus are important in your website for a smooth navigation for your customers. That’s why, Atractivo provides you with the option to configure your own Menus and Mega Menus.

In order to enable your Mega Menu, you need to click on the menu Website Configuration Menus

NOTE: While setting the Mega Menus, ensure your DEVELOPER MODE is ON.

Once you click on menu, you can create a New Menu as per your choice by filling the options that you wish to have in your Menu.

If you wish to make a Menu as a Mega Menu, check the checkbox “Is Mega Menu”.

While making a Megu Menu, it is also important to choose a Parent Menu under which you wish to display that particular Mega Menu you have created.

Once you check that checkbox, you would witness that a subform appears in the bottom providing you with three main options through which you can customize your Mega Menu.

The first menu named Mega Menu Setup allows you to choose what you wish to display in your Mega Menu i.e All Products, Categories or Brands.

If you wish to add some specific products, you can do the same by proceeding with filling the required information asked. Same goes for when choosing to display categories and brands in Mega Menu.

This is how Mega Menu looks with Categories:

The next tab for customization is named Mega Menu Advance. Using the options in this menu, you can customize the Background Image of your Mega Menu and even set its Font Color.

The third option is named Mega Menu Slider. It provides you with an option to set a slider of either products, category or brands as your Mega Menu options.

This is how your Mega Menu looks when you enable to showcase a slider for products along with normal Mega Menu Categories display of products.

Website Configuration

Once you install our theme, you get an Atractivo Theme Configuration in the Website Menu in the header for carrying out backend configurations for our theme.

Customize Product Category

You can also create any Product category as per your requirement. In order to make a product category go to Configuration→ eCommerce Categories Once you have chosen eCommerce Categories, you will see a list view opens with a list of all eCommerce Categories you have created. In order to create a new one, click on create button.

Once you click on create button, you will see a formview opens asking you to fill in the features you wish to add in your category. If you wish to include that particular product category as a Trendy Style Snippet in your website, check the Trendy checkbox.

Customize Shop

You can customize your Shop view as per your requirement using the Customize menu in the Website.

Shop List View
Shop Grid View
Attractive Product Tile buttons Provided

Custom Snippet Builder

In addition to providing 40+ snippets, we also provide you with an option to build your own snippets. Just code your own requirements and use it with our theme. If you need our help in the same, please get in touch with us at sales@ksolves.com

Custom Snippet Builder Backend View
Custom Snippet Builder Frontend View

Products Variants, Brand and Price Filters

As different products of yours could have different variants, Atractivo comes loaded with product variants feature, which you can activate and customize as per your requirement.

Go to Sales Configuration Attributes

Start by filling the Attributes form with the required information that you wish to configure. For example, in the below screenshot, we’re configuring the color attribute for an ecommerce website using our theme.

Once you have created the attributes, you need to activate the same.

Go to Sales Settings Product Catalog Check the checkbox for Variants and Options

Using our theme, you can also add filters to your attributes, categories, brands and price. For the same, go to Website Customize Under Products options , activate the Atractivo Attribute's, Brand's and Price's Filters.

Shop View with Filter Button

After selecting any filter, you get the filter button on shop page.

Filter View

On selecting the filter button, you get filter menu options where you can choose and apply any filter as required.

Customize Product Views

You can customize your products views as per your requirement.

Go to Website Customize Select option under product as per your requirement
Detail Page of a Product- Horizontal
Multi-image View Product- Vertical
Special Feature: Slider View for Alternative and Accessories Products

Dynamic Snippets

Your ecommerce website is your brand’s identity, so provide your website that X-Factor using our specially designed dynamic snippets.

Product Grid

Using this snippet, you can display the products on your website in the form of a grid.

Go to Atractivo Theme Configuration Product Grid

Once you click the Product Grid option, you will see a list view opens where you can create multiple snippets for product grid and use them in your website

You can add as many products you want in your grid as per your requirement.

Product Grid Frontend View

Multi Product Slider

You can also create multiple sliders for your products as per your need.

Go to Atractivo Theme Configuration Multi Product Slider

Once you choose the same, you see a Product Slider creation list view. The list view shows a list of all products sliders that you have created.

Select Create option to create a new Multi Product Slider.

Once you select the create option, a form view opens. Fill in all the information that you require in your product slider and configure it according to your requirement.

This is how the Multi Product Slider looks:

Main Slider

Accentuate the look of your website by creating your own main sliders for products, categories, brands or offers etc. that you wish to highlight.

Go to Atractivo Theme Configuration Main Slider

The list view displayed shows you the list of sliders you have created. In order to create a new main slider, choose the create option.

Once you choose create option, a form view opens asking you to choose the slider banner image, the name of the slider and the link which you wish to hyperlink.

This is how the Main Slider Looks

Category Snippet

Using this snippet, you can highlight categories as the most Trending Styles.

This is how it looks like

Trendy Category Slider

Using this snippet, you can make category wise sliders for your products.

Go to Atractivo Theme Configuration Trendy Category Slider

Once you click on Trendy Category Slider, you will see a ListView opens where you can create and configure your trendy style slider which is based on ecommerce category

Fill the information for the slider you wish to make and configure the Trendy Category Slider as per your requirement. Decide the name and Trending categories you wish to include.

This is how the Category Slider Frontend Looks

Brand Snippet

Only Brands

Using this snippet, you can highlight the Top Brands on your website.

Go to Atractivo Theme Configuration Brand Snippet

Fill in the desired information asked in the form and save to create your very own customized snippet.

Note: If you wish to display a particular Brand in the Brand Snippet, remember to check the Published checkbox.

This is how the Brand Kanban looks

Brands with Products
Go to Atractivo Theme Configuration Brands with Products

If you’re making a number of products at one go, you can save time by not allotting them their respective Brands during the product creation process.

Once you have made all your products under one Brand, you can then drag and drop a particular product under their respective Brand by the simple drag and drop feature we’re providing with the theme. You can create multiple Brands in one go using this feature, drag and drop their respective products and end up saving a lot of time.

This is how the Brands Snippet looks on the frontend

Blogs Snippet

Using this snippet, you can display your Latest 3 Blogs on your website. You just need to drag this snippet from the frontend and drop where you wish to display the snippet on your website.

Blogs Slider

Using this snippet, you can make a slider for your blogs on your website and showcase as many blogs as you want.

Go to Atractivo Theme Configuration Blogs Slider

You can create different blogs sliders, give them appropriate names and manage the number of blogs you wish to include in each slider.

The Blogs Slider list viewshows the number of Blogs Sliders you have created.

This is how the Blogs Slider Looks on the Frontend