# Promotion pages # ![Screenshot_2020-04-29_at_19.12.41.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/15660353098012.png) Getting started Promotion pages are easy to make and maintain pages with a list of products, where customers are able to select the desired products and add them separately to the cart on the website. Promotion pages are usually created in order to hold categories of products that have discounts assigned in the [Products / list - browsing and managing products in altshop module.](https://tauceti.zendesk.com/hc/en-us/articles/5591686579228) ![info2.svg](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/15660353099420.png) **Remember**You can learn about the promotion module in the [Promotion module introduction](https://knowledge.tauceti-digital.com/books/e-commerce/page/promotion-module-introduction) article. ![info2.svg](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/15660353099420.png) **Remember**In order for the promotion page to be visible on the website, it needs to be activated in the desired altshops. You can find more about activating the promotion pages in the [Promotion pages / list - browsing and managing promotion pages in altshop module ](https://tauceti.zendesk.com/hc/en-us/articles/5572242379292) article

![POWERPNT_7CndCRysHV.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/6073666972444.png)

*Visualization of the promotion page (desktop view)*

![POWERPNT_LMNvFDedhV.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/6073671223964.png)

*Visualization of the promotion page (mobile view)*

To open the Promotion pages / list view, in the admin panel, navigate to: ***Promotions > Promotion pages / list.*** In the Actions / list view, we can find two tabs: **Filters (1)** and **Actions** **/ list (2)**

![POWERPNT_UZ7T5k2JuN.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/6073566092828.png)

*Visualization of the promotion pages / list section in the administrator panel*

Table of contents: 1. [ Filters section](#bkmrk-filters-section) 2. [ Promotion pages / list section](#bkmrk-promotion-pages-%2F-li) 3. [Adding a new promotion page](#bkmrk-adding-a-new-promoti) 4. [Editing of a promotion page](#bkmrk-editing-of-a-promoti) 5. [Assigning the CMS block to the promotion page](#bkmrk-assigning-the-cms-bl) --- # ![Screenshot_2020-04-29_at_19.12.41.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/15660353098012.png) Filters section The **Filters** section allows sorting promotion pages by using the available filters.

![POWERPNT_JPFmhxyuZU.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/6073570519708.png)

*Visualization of the filters section in the promotion pages / list.*

- **Is active?** - Filters by the "**is active?**" status of the promotion page. After defining the above filters, select the **Apply Filters** button to get a list of pages according to the applied filters. --- # ![Screenshot_2020-04-29_at_19.12.41.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/15660353098012.png) Promotion pages / list section The **Promotion pages / list** section allows organizing the filtered pages, edit them, and add the new ones. Below you will find a description of all possible actions you can perform in the promotion pages / list section.

![POWERPNT_E2i8xVLVzy.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/6073565953308.png)

*Visualization of the promotion pages / list section in the promotions pages / list*

- Select the **Show X entries** **(1)** field to set the number of promotion pages, displayed on one page (min 10 / max 100). - The names of the columns **(2)** that contain information about a target promotion page. Each column is susceptible to sorting. To sort the records, click on the title of the column. - **ID** - An internal ID of the promotion page. - **Name** - The name of the promotion page. The value is displayed on the e-commerce platform for the customer in the breadcrumb. - **Is active?** - Promotion page activity status. - **Start date** - date from which the promotion page will be visible on the e-commerce platform for the customers. - **End date** - date from which the promotion page will not be visible on the e-commerce platform for the customers. - **Actions** - List of buttons with possible actions that can be done to the desired page: - **Edit** - Edit desired promotion page. Editing allows editing the promotion page parameters and changing the products visible on the promotion page. You can find more about editing the promotion page in the [ Editing of a promotion page](#bkmrk-editing-of-a-promoti) chapter. - **View** - Allows to view the content of the promotion page without the ability to edit it. - **Delete** - Deletes the promotion page without the ability to restore it. - Select the **Add (3)** button to go to the adding the new promotion page. You can learn more about adding of the CMS blocks in the [ Adding a new promotion page](#bkmrk-adding-a-new-promoti) chapter. - **Search box** **(4)** where you can search for desired promotion page by using their name. - **Page buttons** **(5)**, which allows user to change the page of the promotion pages list. --- # ![Screenshot_2020-04-29_at_19.12.41.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/15660353098012.png) Adding a new promotion page Add button allows users to create a new promotion page. While creating a new promotion page, you can only set key features about the promotion page, without the ability to add or remove products. In order to add or remove products to the promotion page, you have to edit the promotion page. More about editing of the promotion pages can be found in the [ Editing of a promotion page](#bkmrk-editing-of-a-promoti) chapter. Below, you will find a description of all possible fields that can be edited while creating a new promotion page.

![POWERPNT_cP53DfMpvx.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/6073570444572.png)

*Visualization of the promotion page creation.*

- **Name** - The name of the promotion page. The value is displayed on the e-commerce platform for the customer in the breadcrumb. - **Friendly URL** - URL address where the promotion page is located. - **Is active?** - Promotion page activity status. - **Start date** - date from which the promotion page will be visible on the e-commerce platform. - **End date** - date from which promotion page will not be visible on the e-commerce platform. - **Short description** - No longer supported field, as the CMS blocks have replaced it. You can find more about adding the CMS blocks to the promotion pages in the [ Assigning the CMS block to the promotion page](#bkmrk-assigning-the-cms-bl) chapter. - **Display colors as separate products** - A switch that decides if the products with multiple colors should be displayed separately or not. This switch can only be set when creating a promotion page, and cannot be changed later. - **Default product sort order** - Default sort order of the products in the list. You can select: - **Newest** - Products will be sorted by their add date. - **Customer order** - Products will be sorted by their sort order in the products field. You can read more about products field in the [editing of a promotion page](#bkmrk-editing-of-a-promoti) chapter. - **Meta title** - Title of the page used in the metadata. - **Meta keywords** - Keywords for a specific promotion page used in the metadata. - **Meta Description** - Description of the page used in the metadata - **Description** - No longer supported field, as the CMS blocks have replaced it. You can find more about adding the CMS blocks to the promotion pages in the [ Assigning the CMS block to the promotion page](#bkmrk-assigning-the-cms-bl) chapter. With filled necessary fields, users can save the changes using the **save** button to save the changes and go back to the pages list, or **save and continue** button which will save the changes and redirect the user to the [editing of a promotion page](#bkmrk-editing-of-a-promoti). --- # ![Screenshot_2020-04-29_at_19.12.41.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/15660353098012.png) Editing of a promotion page As products cannot be added during the creation of the promotion page they have to be configured using the edit functionality. Below, you will find a description of all possible fields.

![POWERPNT_uHjNNpMPGG.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/6073671320476.png)

*Visualization of the additional edit actions*

- **Add product** - in this tab, you can search for a single product by its SKU and add it to the promotion pages product list. - **Add many products** - In this tab you can add multiple products to the promotion page product list by typing their SKUs separated by comma (for example 12345,54321,55443) - **Remove many products** - In this tab you can remove multiple products to the promotion page product list by typing their SKUs separated by comma (for example 12345,54321,55443) - **Products** - A list of products that are currently assigned to the promotion page. They can be moved by using the "**Drag and drop**" functionality, and their order will be visible on the website when the "**customer order**" sort order is selected. Products that are out of stock or inactive will have corresponding information next to their name. You are able to remove the products using the **remove** button. In order to save the changes, press the **Save** button above the add product tab. --- # ![Screenshot_2020-04-29_at_19.12.41.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/15660353098012.png) Assigning the CMS block to the promotion page Promotion pages by default do not have banners - they have to be added by assigning the CMS block into a promotion page. In order for a CMS block to be visible on a promotion page, you have to set it's title to "**promotion banner {ID}**" where ID is a promotion's page internal ID. For example, correctly assigned CMS blocks have names: - promotion banner 1 - promotion banner 552 - promotion banner 1066 As with every CMS page and CMS block, these CMS blocks contain code for both desktop and mobile banners using the responsive web design. It is possible to add a dedicated category navigation, that is generated on all available categories from added products. Category Navigation CMS block has to be named in the following format: promotion category navigation {ID} Where ID is a promotion page's internal ID. For example, correctly assigned CMS blocks have names: - promotion category navigation 1 - promotion category navigation 552 - promotion category navigation 1066 You can find an example code used in promotion category navigation at the bottom of this article ![info2.svg](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/15660353099420.png) **Remember**You can learn about the CMS blocks and their creation in the [CMS blocks](https://tauceti.zendesk.com/hc/en-us/articles/5767855763612) article. Example promotion category navigation {ID} code:

<link href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css"   
rel="stylesheet" />
<style type="text/css">.selected {
 color: \#ffffff !important;
 background-color: \#8b9620 !important;
 }
 .tns-outer \[aria-controls\],
 .tns-outer \[data-action\] {
 display: none;
 }
 .onglet-slider a:hover {
 color: \#8c951e;
 border-color: \#8c951e;
 }
 .onglet-slider a {
 box-sizing: border-box;
 text-transform: uppercase;
 text-decoration: none;
 color: \#000000;
 padding: 7px 10px;
 border-radius: 25px;
 margin: 5px;
 text-align: center;
 font-size: 12px;
 line-height: 12px;
 margin: 1px 10px 0 0;
 box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
 border: solid 1px \#868686;
 background-color: \#ffffff;
 justify-content: center;
 align-items: center;
 display: flex;
 width: 100%;
 font-weight: bold;
 height: 40px;
 }
 @media (min-width: 780px) {
 .onglet-slider {
 width: 100% !important;
 }
 }
 .onglet-slider {
 display: flex;
 gap: 10px;
 margin: 10px 0px;
 }
 .onglet {
 min-width: 100px;
 }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js">  
</script><script>
 var slider = tns({
 container: '.onglet-slider',
 navAsThumbnails: false,
 "edgePadding": 15,
 "swipeAngle": false,
 slideBy: 1,
 "mouseDrag": true,
 autoplay: false,
 gutter: 1,
 nav: true,
 items: 3,
 center: false,
 loop: false,
 responsive: {
 480:{
 items: 5,
 loop: true
 },
 640:{
 "edgePadding": 25,
 loop: true
 },
 780:{
 items: 7
 },
 1024:{
 items: 10
 }
 }
 });
</script>