Landing pages Tilda

The add-on allows you to import Tilda pages or blocks into the CS-Cart platform
Please enter a valid addres(es) of the shop where you are going to use the add-on.
3 000 
Latest module version 1.4.1 Updated: 01.09.2023
Have questions about the module? Write to us: HelpDesk
30 days for return
If you are not satisfied with the operation of the module, we will return your money with bonus points in your Personal Account
Bonus for review
We will give 1000 bonus points in your Personal Account for a review after purchasing the module
Multi-display
One price regardless of the number of display cases, no need to pay extra
Support
Free consultation and support on the module, assistance with installation
Discount for revision
We will give a discount of up to 50% on improvements to any functionality when purchasing a module from us

The "Tilda Landing Pages" add-on solves the problem of laborious and time-consuming landing page creation on the CS-Cart platform, especially if you already have ready-made pages on Tilda. Instead of spending time on repetitive development and layout, you can easily import your existing Tilda pages and blocks into CS-Cart, preserving their structure, design, and functionality. This allows you to quickly use your ready-made landing pages on a new platform, saving time, effort, and resources.

Image
Image

Add-on features:

  • One-click synchronization;
  • Support for multiple languages;
  • Ability to change entire pages;
  • Ability to embed landings into separate blocks.

Product:
  • Store Builder
  • Store Builder Ultimate
  • Multi-Vendor
  • Multi-Vendor Plus
  • Multi-Vendor Ultimate
Recipient:
  • Owners
  • Vendors
Development
:
  • Frontend
Localization:
  • English
  • Русский
Compatible versions:
  • 4.17.X
  • 4.16.X
  • 4.15.X
  • 4.14.X
  • 4.13.X
  • 4.12.X

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

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;
    1. Image
  4. Go to the section "Site settings - Export - API integration" on the Tilda platform;
    1. Image
  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";
    1. Image
      Image
  6. Click the "Save" button and open the "General" tab;
    1. Image
  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;
    1. Image
  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;
    1. Image
  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:
    1. #ms-tilda-container

      {

      padding-left: 0px! important;

      padding-right: 0px! important;

      padding-bottom: 0px! important;

      margin:0;

      }

      Image
  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";
    1. Image
  6. Enter the block name and select the page ID from the list;
    1. Image
  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.
    1. Image

    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.

v1.4.1 as of 01.09.2023

[+] Add-on standardization

v1.4.0 as of 04.08.2023

[+] Changed the sync, now individual directories are created for each page with styles, images, and scripts

v1.3.1 as of 03.08.2023

[*] Changed short tags to regular

v1.3.0 as of 24.07.2023

[*] Updated language variables

v1.2.10 as of 09.07.2023

[+] Add-on standardization

v1.2.9 as of 24.06.2023

[!] Fixed some js scripts not loading if they did not have duplicates in the form of beta

v1.2.8 as of 26.12.2022

[+] Add-on standardization

v1.2.7 as of 05.10.2022

[+] Add-on standardization

v1.2.5 as of 18.05.2022

[!] The jquery script is not duplicated

v1.2.4 as of 16.05.2022

[+] Scripts are not duplicated when the landing page is loaded

v1.2.3 as of 13.05.2022

[*] CHANGELOG.md has been changed

v1.2.2 as of 01.01.2021

[+] Multilingualism

v1.2.1 as of 01.01.2020

[+] Support for .gif images

v1.2.0 as of 01.01.2020

[+] Support for .jpeg images

v1.0.0 as of 01.03.2022

[+] First edition

Отзывы

Here you can share your opinion and evaluate our work.

Your feedback helps us become better and offer you even better service.

Похожие модули