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.

Synchronization

To start the setup, you need to log in to the Tilda website.

1. Log in to the Tilda website by going to https://tilda.cc/login/;
2. Select an existing project or create a new one;
3. 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;
4. Go to the section "Site settings - Export - API integration" on the Tilda platform;
5. 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";





6. Click the "Save" button and open the "General" tab;
7. Select the menu item "Synchronization with Tilda.cc (Website)";
8. Click the "Update" button;
9. If synchronization is successful, you will see the following message;
10. The pages are now synced and ready to use.

Setting to display on entire page

To display a landing page on a page in CS-Cart, follow these steps:

1. Log in to the CS-Cart administrative panel and go to the "Website - Pages" section;
2. Select the desired page on which you want to place the landing page;
3. Go to the "Add-ons" tab;
4. In the "Tilda page ID" field, indicate the ID of the Tilda page that you want to display on this page in CS-Cart;
5. Click the "Save" button;
6. Refresh your cache and check the page to ensure that the landing page is successfully displayed on the selected 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:

1. Open the “Design” - “Templates” section;
2. Select the installed theme, in our case it is “abt__unitheme2”;
3. Open the “styles” - “data” folder;
4. 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”;
5. Paste the following style into the selected file:

#ms-tilda-container

{

padding-left: 0px! important;

padding-right: 0px! important;

padding-bottom: 0px! important;

margin:0;

}



6. Click “Save Changes”.

Setting for display in block

1. Open the "Design - Layouts" section;
2. Select the appropriate tab, for example, "Products";
3. Lower the window below to edit the layout;
4. In the "Content" container, add grid using the "+" button and selecting the required width;
5. In the created grid, add a new block "MS: Tilda Landings";
6. Enter the block name and select the page ID from the list;
7. Click the "Save" button;
8. Disable global display of these blocks;
9. Open the page on which the landing page will be displayed;
10. Go to the "Layout" section and enable display of the created "Tilda-page" block;
11. 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.

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:

1. Open the “Design” - “Layouts” section;
2. Select the page in the layout of which your block is located, in our case it is “Products”;
3. Go to the settings of the section where your block is located;
4. In the “AB: UniTheme2: Additional Settings” section, change the values of the “Full width” field to “On the full width”;
5. Save your changes.

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:

1. 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.
2. 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.