1.4.1
Table of contents
- Installation
- Synchronization
- Setting to display on entire page
- If you are using UniTheme and want to remove padding to display the page at full width, you need to add styles in the template of the theme you are using:
- Setting for display in block
- If you are using UniTheme and want to remove padding to display the block in full width, you need to change the display parameter in the section settings:
- Solving a problem with displaying some interactive elements
Landing pages Tilda
Installation
After downloading the add-on , it is installed using the standard CS-Cart tools on the page Admin Panel → Add-ons→ Manage Add-ons→ Upload and Install Add-on(+).
For CS-Cart version 4.13.1 and later, go to Admin Panel → Add-ons→ Manage Add-ons→ Gear Button → Manual Installation.
![Image](images/ms_notion/ms_tilda_plugin/en_inst_(1).png)
Synchronization
To start the setup, you need to log in to the Tilda website.
- Log in to the Tilda website by going to https://tilda.cc/login/;
- Select an existing project or create a new one;
- Copy the identifier (ID) from the address bar and paste it into the "Tilda project ID" field on the add-on settings page in CS-Cart;
- Go to the section "Site settings - Export - API integration" on the Tilda platform;
- Copy the values of the "Public key" and "Secret key" fields and paste them, respectively, into the add-on settings fields "Public key" and "Security key";
- Click the "Save" button and open the "General" tab;
- Select the menu item "Synchronization with Tilda.cc (Website)";
- Click the "Update" button;
- If synchronization is successful, you will see the following message;
- The pages are now synced and ready to use.
![Image](images/ms_notion/ms_tilda_plugin/en_inst_(2).png)
![Image](images/ms_notion/ms_tilda_plugin/en_inst_(3).png)
![Image](images/ms_notion/ms_tilda_plugin/en_inst_(4).png)
![Image](images/ms_notion/ms_tilda_plugin/en_inst_(5).png)
![Image](images/ms_notion/ms_tilda_plugin/en_inst_(6).png)
![Image](images/ms_notion/ms_tilda_plugin/ru_inst_(7).png)
Setting to display on entire page
To display a landing page on a page in CS-Cart, follow these steps:
- Log in to the CS-Cart administrative panel and go to the "Website - Pages" section;
- Select the desired page on which you want to place the landing page;
- Go to the "Add-ons" tab;
- In the "Tilda page ID" field, indicate the ID of the Tilda page that you want to display on this page in CS-Cart;
- Click the "Save" button;
- Refresh your cache and check the page to ensure that the landing page is successfully displayed on the selected page.
![Image](images/ms_notion/ms_tilda_plugin/en_inst_(8).png)
If you are using UniTheme and want to remove padding to display the page at full width, you need to add styles in the template of the theme you are using:
- Open the “Design” - “Templates” section;
- Select the installed theme, in our case it is “abt__unitheme2”;
- Open the “styles” - “data” folder;
- Select a file with the name of the color scheme you are using and with the extension “.css”, in our case it is “Black.css”;
- Paste the following style into the selected file:
- Click “Save Changes”.
#ms-tilda-container
{
padding-left: 0px! important;
padding-right: 0px! important;
padding-bottom: 0px! important;
margin:0;
}
![Image](images/ms_notion/ms_tilda_plugin/en_inst_(9).png)
Setting for display in block
- Open the "Design - Layouts" section;
- Select the appropriate tab, for example, "Products";
- Lower the window below to edit the layout;
- In the "Content" container, add grid using the "+" button and selecting the required width;
- In the created grid, add a new block "MS: Tilda Landings";
- Enter the block name and select the page ID from the list;
- Click the "Save" button;
- Disable global display of these blocks;
- Open the page on which the landing page will be displayed;
- Go to the "Layout" section and enable display of the created "Tilda-page" block;
- You may need to update your cache. To do this, in the site’s administrative panel, add “&cc” to the end of the address bar and open the resulting address.
![Image](images/ms_notion/ms_tilda_plugin/en_inst_(10).png)
![Image](images/ms_notion/ms_tilda_plugin/en_inst_(11).png)
If you are using UniTheme and want to remove padding to display the block in full width, you need to change the display parameter in the section settings:
- Open the “Design” - “Layouts” section;
- Select the page in the layout of which your block is located, in our case it is “Products”;
- Go to the settings of the section where your block is located;
- In the “AB: UniTheme2: Additional Settings” section, change the values of the “Full width” field to “On the full width”;
- Save your changes.
![Image](images/ms_notion/ms_tilda_plugin/en_inst_(12).png)
Solving a problem with displaying some interactive elements
The intersection of css styles between Tilda and CS-Cart causes problems in displaying some interactive elements. The problem appears when the styles that Tilda uses are similar to those used in CS-Cart in your template.
It is not possible to solve this problem on the add-on side, since the styles are interrupted by the CS-Cart platform itself. Her styles take precedence over Tilda's styles.
The following solutions are possible:
- Pass this information to your developers so that they can make the necessary changes to the styles on the CS-Cart side for the correct display of interactive elements.
- Make changes to styles (in text fonts and headings) on the Tilda side. Or contact Tilda's support team for tips on making changes to page styles on their platform.