Demo
![](https://guid.arrowtheme.com/magento/gemmart/images/deals_demo.jpg)
The Deal Products element helps to show deal products with different view options (grid, list, slider, category tabs).
CONFIG DEAL PRODUCT
- In backend, go to
PRODUCTS → Catalog
. Edit product you want to set as deal product.
![](https://docs.arrowtheme.com/wp-content/uploads/2023/09/image-754-1024x200.png)
- In the basic settings panel, Click
Advanced Pricing.
![](https://docs.arrowtheme.com/wp-content/uploads/2023/09/image-755-1024x400.png)
- In Advanced Pricing panel:
- Enter the number of the
Special Price
. - You must assign the active time including
Special Price From Date
andSpecial Price To Date
. You can type manually or click onCalendar
icon to choose the relevant date. - Click Done button to close panel.
- Enter the number of the
- Click Save button to save product.
![](https://docs.arrowtheme.com/wp-content/uploads/2023/09/image-756-1024x245.png)
DEALS PRODUCT
- On CMS Builder, click Add New Block button.
![](https://docs.arrowtheme.com/wp-content/uploads/2023/09/image-757-1024x146.png)
- On popup list blocks, click “Deals” item.
![](https://docs.arrowtheme.com/wp-content/uploads/2023/09/image-758.png)
CONFIG BLOCK
Product Config Tab
![](https://guid.arrowtheme.com/magento/gemmart/images/deal_product_block_2.jpg)
- Number of product to display: Limit the number of products shown.
- Item per row: Limit the number of items in a row on default resolution.
- Item per row (tablet): Limit the number of items in a row on tablet.
- Item per row (mobile): Limit the number of items in a row on mobile.
- View Mode:
Grid Mode:
![](https://docs.arrowtheme.com/wp-content/uploads/2023/09/image-759-1024x981.png)
List Mode:
![](https://docs.arrowtheme.com/wp-content/uploads/2023/09/image-760.png)
- Hide Product Name: Choose Yes to let the product name disappear.
- Hide Review: Choose Yes to let the product review disappear.
- Hide Price: Choose Yes to hide the product price.
- Hide Add to Cart: Choose Yes to hide the Add to Cart button.
- Hide Add to Wishlist: Choose Yes to hide the Add to Wishlist button.
- Hide Add to Compare: Choose Yes to hide the Add to Compare button.
- Use Slider: Choose Yes to add Carousel Slider for block product.If you use slider, you can see more config to owl slider:
- Number of row: The number of rows displayed in slider.
- Auto play: Choose Yes to let the slide play automatically.
- Stop autoplay on mouse hover: Choose Yes to stop the slide from playing when hover mouse.
- Loop: Choose Yes to let the slide play in loop.
- Display navigation: Choose Yes to display the navigation icons on the slide.
- Display pagination: Choose Yes to display the pagination indicator on the slide.
- Navigation slide by: Limit the number of items will be shown after each time you click on the navigation.
Category Config Tab
![](https://docs.arrowtheme.com/wp-content/uploads/2023/09/image-761.png)
- Click plus icon button to show sub categories.
![](https://docs.arrowtheme.com/wp-content/uploads/2023/09/image-762.png)
- Choose categories to filter product by selecting categories.
![](https://docs.arrowtheme.com/wp-content/uploads/2023/09/image-763.png)
- If you want show product with tab. Change Use Category Tabs to Yes
![](https://docs.arrowtheme.com/wp-content/uploads/2023/09/image-764.png)
- There you can see more settings for tab slide:
- Tab Style: Choose one of the 7+ style in the list. You can see the demo below.
- Font Bold, font Italic, Uppercase: Choose Yes to let the text in bold, in italic or in uppercase.
- Align: Choose among Left, Center or Right for text align.
- Font Size: Enter the value of font size (in px unit).
- Primary Color, Secondary Color and Third Color: Choose the 3 main color for your category tab. You can enter the hex code color directly in the blank or use color picker tool at the right.
Deal Config Tab
![](https://docs.arrowtheme.com/wp-content/uploads/2023/09/image-765.png)
- Hide Countdown Time: Choose Yes to hide the countdown timer. Otherwise, some related settings will be shown:
- Time Text: Default values are Days, Hours, Mins and Secs.
- Width: Set width value for timer countdown block.
- Background color: Set background for timer countdown block.
- Number font size and Text font size: Set font size value for number and text in timer countdown block.
- Number font color and Text font color: Set font color value for number and text in timer countdown block.
![](https://docs.arrowtheme.com/wp-content/uploads/2023/09/image-768.png)
- Hide Discount Percent: Choose Yes to hide the discount percent. Otherwise, some related settings will be shown:
- Width: Set width value for discount percent element.
- Font size: Set font size value for number and percent.
- Text color: Set color value for number and percent in timer countdown block.
- Background color: Set background for discount percent element.
![](https://docs.arrowtheme.com/wp-content/uploads/2023/09/image-769.png)
- Hide Saved Price: Choose Yes to hide the saved price. Otherwise, some related settings will be shown:
- Text: Insert the text for discount percent element.
- Text font size and Price font size: Set font size value for text and price.
- Text color and Price color: Set color value for text and price.
![](https://docs.arrowtheme.com/wp-content/uploads/2023/09/image-770.png)