"Color picker in product list" - PrestaShop Module
PrestaShop has ability to select color in product description page but it's not possible to select color in products list and in home featured products list. Our module allows customers to select color in products list and home featured products list - this is the key feature of our module.
"Color picker" module uses colors created with standart PrestaShop admin tools so our module does not have many configuration options - it has only two radio buttons so it may seem confusing. It's not clear how to manage your product colors when you are in module configuration page. This manual will explain how to manage your product colors step by step.
Benefits for customers
Customers like related products module because it's easy for them to see all the available colors without entering the product info page.
Benefits for merchants
Your customers will stay longer in you web store if you provide for them better user experience and our module allows to select appropriate product faster and mor easily while seeing product colors in product list.
Module main features
The main feature is ability to display color picker in home featured block and products list.
Display all colors:
Home featured products:
Display colors in carrousel:
Home featured products:
Use texture for you color:
Steps to follow
You can go fast way or slow way. If you are experienced PrestaShop user read next steps otherwise go to "Slow but easy to understad way" part.
Fast way to understand how to mange colors:
- First of all you have to add image for every product color - this is the first step you should do. You can do it here: Back Office -> Catalog -> Your Product -> Images tab
- Next you have to create attributes group which is type of color group. This type of group may be already created so check it first. You can mange attribute groups here: Back Office -> Catalog -> Attributes and Groups -> Add attribute group. Do not forget to create it as "Color group".
- When you have your attribute group for colors then you can start adding all available colors. Atribute groups are global so you should add all the colors you have for you product. You can also crete multiple attribute groups for colors and then use different attribute groups for different products - it's up to you how you prefer todo - have one group for colors or multiple groups. So if you want to add color in your attribute group you should do it here: Back Office -> Catalog -> Attributes and Groups -> Add attribute -> Select attribute group. If you selected right attributes group you should see color picker or texture upload button. So here you can add all the available colors for your products.
- Now everything is ready and you can assign appropriate colors for your products. Go to: Back Office -> Catalog -> Your Product -> Combinations -> Add color group combination
- There is one important thing to check. Make sure, that your attribute group for colors is selected as color picker. Go to: Back Office -> Catalog -> Your Product -> Combinations -> Select your attributes group ind "Color picker" drop down at the bottom of the page.
- Now you can go to our module configuration zone and select the way you want to show color picker in product list. Go to: Back Office -> Modules -> Other modules -> Product color picker -> Configure
- That's it. Now you know all the needed steps to mange product colors.
Slow but easy to understand way:
If you are not experienced PrestaShop user, you should read this part of our user manual. Follow the steps described.
1) Login to your PrestaShop back office
2) Add images to your product for every color you want to show for your customers
Go to: Back Office -> Catalog -> Find your product -> Select "Images" tab
As you can see below, you can upload product images, change order, translate caption.
3) Create attributes group which is type of color group
Go to: Back Office -> Catalog -> Attributes and Groups
You can use created group for colors or create your own. We will create the new attributes group for colors to show all the steps needed.
First of all you should see the list of attribute groups:
As you can see in the picture above there is "Color" group. This group is created with default PrestaShop installation. We will create another group and call it "Color 2".
Click "Add attribute group" which is just after breadcrumbs and enter all the required information. Do not forget to select "Color group" radio button option:
Here we have our new attributes group "Color 2":
4) Add attributes to created "Color 2" group and call it "Blue"
Click "Add attribute" which is beneath "Add attribute group". Lets create attribute for the color "Blue". Enter color option title, choose color from color picker or choose texture file and click save.
5) Click on "Color 2" attributes group in groups list to see all the options
As you ca see here "Blue" color option is listed - we created it in the previous step. You can repeat previous step and as many colors as you need.
5) Now "Color 2" group attributes are ready and we can assign them to our products
Go to: Back Office -> Catalog -> Find your product -> Select "Combinations" tab
Steps to follow:
- Select your created group "Color 2"
- Select your created attribute e.g. "Blue"
- Click add
- Select image e.g. with blue color
- Click "Add this combination"
You have to select attributes group for product color picker ( look at the bottom of the image below). If you can not see your group for selection please make sure you assigned at least on attribute to the product from you attributes group.
6) That's it, lets check our color picker in our web store
Home featured products:
As you can see we have added only one color just to show you all the steps needed to add colors. You can add as many colors as you want.
7) We can also change the colors are displayed in "Color picker" module configuration area
Go to: Back Office -> Modules -> Other modules -> Product color picker -> Configure
Select one of the available options.
- true - display colors in single line in a carousel with "previous" and "next" button arrows
- false - display all colors in multiple lines
Check our other modules here:
www.invertus.lt/demo - CHECK OUR OTHER MODULES.