Shop By Look M2 USER MANUAL MAGEDELIGHT.COM E: SUPPORT@MAGEDELIGHT.COM
Introduction This extension helps Ecommerce Magento merchants to generate more revenue by up selling/group selling related complimentary products particularly fashion & apparels, furniture. Shop by look also helps customer to shop complete matching look. It reduces customer stress to match product and shop them individually. License Key After successfully installing the Shop by look extension on your Magento store, First of all you required to configure license key within the admin configuration section. You can set it from: Admin > Stores > Configuration > Mage Delight > Look N Buy > License Configuration. As shown in screenshot below, You would find two text-boxes, asking for Serial Key and Activation Key. You can find this in the email you obtained on the purchase of the extension. See the screenshot below:
Backend (Admin side) With admin menu you will find new option named Look N Buy. You can create different looks with different combination of products. As shown with above screenshots, you will find list of created looks. It shows basic information with grid like ID, image, look name, discount if applied and status of look.
How to create Look? Hit Add New Look button, that will take you to new interface of create look. All the information are divided within different tabs as below, General Look Title: Set the title of look you are creating. URL key: You can set SEO friendly URL of look page. Base Image: Upload main image of look, based on which you will be creating a look. Discount type: Here, you can define type of discount, if customer purchase whole look. This can be Fixed or Percentage. Discount: Discount amount based on discount type. If you have set discount type to percentage, discount will be applied on total cost of look else it will be fixed amount of discount. Status: You can disable a look here. Layout: It provides two type of layout for look, 1 column and 2 columns. You can select layout for your looks based on Base image of look.
If your design is horizontally broader, you can select 1 column layout. With this, image will be displayed horizontally covering full page size, following with products of look. If you set to two-column, look image will listed on left side where as all products will be listed on right hand size of the page. Description: You can describe the look you are creating. Meta Data Keyword: Here you can set Meta keywords for particular look detail page. Description: Set Meta description for look detail page. Products You can select products available/index to particular look. You can search product based and select to include with look. For selected product you can define product quantity to complete look. Once you done with product selection, you have to save the look. Once you salve look you will have access to next tab called Add Markers. This one is main part and important to create look. Here you can define mark point and represent the products. Add Markers
As you can see with above screenshot, the main image of look is on top and all assign/added products are listed below of images. The look image is covered with JS marker area. You only have to click the point where you need to add marker/tag product on look image. Once you add marked on look image, there would be two action buttons next to marker image. One is for selecting product for marker/tag and another is delete marker image. As show with below screenshot,
Configuration Options Look N Buy Page Configuration Enable on Frontend: This option will enable/disable, Look N Buy functionality from frontend. Show Look N Buy link on: It gives you two options to show link for look n buy with Top Links or Top Navigation menu. Link Title: Give title to link for look n buy page. Header Title: Page title of look n buy page. Look N Buy Page URL Key: Define DEO friendly URL key for page. Look N Buy Page URL Suffix: You can also define suffix for page if needed. Look N Buy Page Layout: You can select the page layout to for page. Look N Buy Discount Label: You can define label text for discount.
Markup and Tooltip Style Image: Upload tooltip marker image, if you wish to changes to fix with your theme/template. Width: Marker image width. Height: Markup image height. Font Color: You can set font color of toot tip text. Background Color: set background color of tool tip.
Frontend Once you configured the extension and create looks with different products as described above, all active looks will be listed with shop by look page. See below screenshot:
Extension provides you two different layouts options One-column and two-column layout. You can select it based on the look image you have. Two-column Look page would looks like below, At the left hand side you can find the main image of look, which is representing a complete look. At the right side, all products are listed included with particular look. Along with custom options if any, it also supports bundled and configurable products, bundled products, downloadable and virtual products too. So it would also supports product type specific options. If you look image is wider image, you can use one-column layout as shown with below image. It will show look image on top and all included products listed below to look image, Discount: If you allowed customer would able to get discount on purchasing complete look with all products and defined quantity of look.