How To Migrate Your Adobe Bc Website To Siteglide

With the ‘End of Life’ for Adobe BC approaching, businesses have started looking for the ideal alternative for their business website. If you are facing a similar situation and wish to migrate your Adobe BC website to Siteglide, you have come to the right place.

There is no doubt about the fact that Adobe BC has been one of the most reliable website building platforms for most businesses. It is, therefore, understandable if you are worried about undertaking this transition. However, rest assured that if you can identify the right alternative for your website, you will have no trouble in running and maintaining it.

End of life Adobe Announcement for Adobe BC
Source

Site Glide is a very popular alternative to Adobe Business Catalyst owing to the host of features that it offers. So, let’s get down to how you can migrate your existing Adobe BC website to Siteglide efficiently.

Understanding the Process of Migration

Migrating your website may seem like a cumbersome challenge; however, if you understand the process and the tools involved, it will become a lot easier for you to handle it. A website is made of many elements and components. Each component has to be migrated in order to ensure that your new website is fully functional and retains all the necessary features that belong to your existing website.

In this post, we will explore the following steps to help you migrate your website yourself:

  1. Tools used to migrate
  2. How to get your website data out of BC
  3. Getting Started with your SiteGlide Portal
  4. Migrating Data to the new Site Glide website
  5. Migrating WebApps
  6. Migrating Menus
  7. Migrating BC page templates
  8. Migrating Pages
  9. Migrating WebForms
  10. Migrating WebApp Layouts
  11. Migrating Blog Layouts

Please note that this may also be the right time to rethink how your website looks and feels. Discard any and all element s that make your website heavy and redundant while introducing features that can boost your business.

Siteglide has developed its own set of tools to help you migrate your website. Just with a click, you will be able to import the following elements to your new website:

  1. WebApp items: Import CSV files to populate the WebApp items of your BC website.
  2. Blog, FAQs, Testimonials, e-Commerce products: Import CSV files to populate your module items.
  3. URL Redirects: Import a CSV file to facilitate URL redirects.

How to Get Your Website’s Data out of BC?

To begin with, you will have to first create a backup and export all the current data that is there on your existing Adobe BC website. In order to do that seamlessly, you simply need to use the BC Exporter App. BC Exporter is partnered with Siteglide to ensure that the process of data back up and export is absolutely easy. Here’s a list of everything that gets exported with the help of this app.

Steps to Follow This Method:

  • Navigate to the BC Exporter
  • Sign Up for free by filling a simple Sign-Up Form.
  • After signing up, you can now Log in to your exporter account.
  • Once you have logged in, click on the “Export Website(s)” button to open a new window that connects to your Adobe BC partner portal.
  • You can select the website that you want to export after connecting your BC partner portal to the BC Exporter. Your selection will be added to the exporter list.
  • After this, you will have to select a payment option and checkout so that the website data can be downloaded. As soon as the payment is processed, the exported data is available for download to your own computer.

Also Read: How to Migrate Your Adobe BC Website to WordPress

Getting Started with Your Site Glide Portal

Your Siteglide portal will essentially give an instant overview of:

  1. All the websites that you have on Siteglide.
  2. Website Owner’s names (in case of different ownership and multiple websites).
  3. All the Users who have access to all your websites.

If you are an agency, this portal will also allow you to sign up your Agency name, add Users whenever needed and creating websites. This portal is also the place that will give you information on their Automated Client Billing systems (found under the Resources Menu).

Getting Familiar with the Siteglide Portal

1. Signing Up Your Agency

To Sign Up to Siteglide portal admin, you may fill this form. When you sign up, a request is submitted to the Siteglide team for security. Their team will manually verify your account before you can start using it. You will receive an email notification (on your registered email ID) to inform you if your account is ready to use.

2. Manage Your Portal

As mentioned earlier, the portal will allow you to view a list of all your websites, your different clients and their users. You will be able to control website subscriptions, module payments and other important features from right here. You can log in to your Siteglide portal and admin panel by using this link: https://admin.siteglide.com/

If you are already on the admin panel of any of your websites, you can access the portal by clicking on the ‘Portal’ option from the drop-down menu of your username at the top right corner of the screen.

siteglide admin panel

3. Create/Set-up a New Website

Siteglide allows you to create as many websites as you like whenever you want to once you have created your account and logged in. All you need to do is click on the “Create New Site” button located above your list of websites in the portal admin.

siteglide portal - create-set-up a new website

Fill in the name of your new website in the “Site Name” field in the modal window. You will also find “Install Design System” and “Install Starter Site” check-boxes there which install the readymade template and the default designs of Siteglide. However, please note that you do NOT need to select these checkboxes if you are migrating your website from Adobe BC to Siteglide.

siteglide option at the starting of creating a site

Just by clicking the ‘Create Site’ button, Siteglide will generate a new Website URL for you.

create site button on siteglide

After you click the “Create Site” button, the existing web page will refresh and your new site will be ready. This process may take a few minutes, so don’t worry. Once your website is ready to use, you will receive an email notification.

4. Website Edit

Clicking on the name of the website from the list of your websites will bring you to the Website Edit section. This page has 4 different tabs. Let us take a look at them.

Tab 1: Site Details

This tab will show you all the details of the website including:

  • Website name
  • URL
  • Status
  • Company
  • Created day
  • API

site details on siteglide portal

Tab 2: Usage Stats

This tab will show you the usage stats of your website including:

  • Modules
  • WebApps
  • Pages
  • Web forms
  • Admin users
  • Contacts in CRM

site usage details on siteglide portal

Tab 3: Users

This tab is to allow you to see all the Users who have access to your websites. This tab also provides a button that allows you to invite an existing user to the website.

Tab 4: Modules

SiteGlide has a list of pre-built modules that is visible on clicking this tab. This tab will also allow you to install/update any new module that you require.

siteglide pre-built modules

5. Manage Users

To manage the users of your website, you will have to navigate to the “All Users” sections. Here, you will find the list of users added in your portal. To see the user details, you can click on a particular username. This will show you two tabs:

Tab 1: User Details

This tab shows:

  • User ID
  • Name
  • Email Address
  • Company
  • User Level

Tab 2: Sites

This tab will show which user has access to which of your websites.

Migrating Data to New Site Glide Website

Migrating Assets – CSS, JS, Images and Other Files

Siteglide always recommends importing asset files right in the beginning, just as you create your new website. This means that when you import your WebApps, blogs, and testimonials, the CSS and JS along with the images can be easily mapped. Here’s how you should go about it:

1. Prepare Your Assets Folder:

Before you import anything to the Siteglide platform, it is important to tidy up the data of your website. IT is possible that the existing website has CSS, JS, and images stored in a scattered way. Take this time to organize and sort these items.

Siteglide automatically creates four folders for you:

  • Images
  • Documents
  • CSS
  • JS

To access this, select the File Manager option within CMS in the admin panel.

Ensure that you keep all the images in the ‘Images’ folder, JS in the ‘JS’ folder, and CSS in the ‘CSS’ folder. You must also make sure that you keep all the documents (PDFs, zip files) through the website in the ‘Documents’ folder.

2. Uploading Assets

Since File Manager allows you to upload 100 files at a time, you can create folders of your assets and upload them in bulk as you go. These assets are stored and accessed in a different way as compared to Adobe BC so it might take a while in getting used to it.

Migrating WebApps to New Site Glide Website

You can import your WebApps, WebApp Items, and Categories all at once in just a click of a button. All Categories and data sources will remain the same as they are in your existing BC website.

To begin the process of import, click the “+ Create a WebApp” button within the “WebApps” tab on the left-side menu. Next, click on the “Import WebApp” tab and upload your zipped folder. The entire process of importing works in the background. You will receive an email notification once your files are completely imported. This process usually takes a few minutes; however, larger imports (heavier files) may take longer.

There are three types of WebApps and the process to import each is slightly different.

1. WebApps Without Categories

You will find a folder called “WebApps” in your BC Export. All you need to do is, zip this folder up and import the zipped version.

2. WebApps With Categories

You will find a file called “categories.json” in your BC Export. You will have to move this file into the WebApps folder, zip it and import the zipped version.

3. CSV Import/Export

Since you’ve already moved all the images to the ‘Images’ folder in File Manager, it is possible that you find that your image paths don’t match up with your assets. If you feel the need to edit them, you can do it in bulk by exporting all items of a WebApp, editing the file and re-importing your updated .csv file. Please note that File Paths on Siteglide are also case sensitive.

If you wish to export all the items of a WebApp, simply click on it on the left side menu. This will show you a list of all the items. You will find an ‘Export’ button on top of this list. Click on it to export everything in that WebApp.

P.S: Do NOT reorder or rename any column while editing your CSV export. Ensure that you only update the item ID if you wish to create a duplicate item. After completing all the edits that you need to make, just export the file as a .csv file. In case you want to re-import it, navigate back to the WebApp and click on the ‘Import button above the list of items. From here, click on the “Start Import” tab and upload your CSV import file.

Migrating Menus to New Siteglide Website

To ensure that you have a fully functional website on SiteGlide as well you will have to create a new menu in the SiteGlide Admin. Ensure that you copy the structure of the menu from your existing Adobe BC website.

How to Build a New Menu?

  1. Go to Modules and click on the ‘Menu Builder’ option seen in the left-side menu of admin.
  2. Now, click on the “Add Menu” button.
  3. On doing this, you will see two columns in the Menu area. You can also see a list of the pages of your website on the left-side.
  4. You can click on them to add them in the Menu. This will appear in the right-side column. To reorder or to create submenus, simply “drag and drop” items.
  5. Clicking on the menu items will allow you to edit them. You may edit items like:
    • Name
    • Slug
    • Target
    • Class
  6. Ensure that you copy the Layouts menu from your Adobe BC website to Siteglide.

While Adobe BC used three Layouts for menus, Siteglide uses just two.

Adobe BC Layouts:

  1. container.html
  2. group.html
  3. childitem.html

Siteglide Layouts:

  1. wrapper.liquid – In reference to your Adobe BC menu, this file should essentially contain your BC website container.html and group.html layouts. You will have to combine and paste these two layouts in this layout of Siteglide.
  2. item.liquid – This file should contain the code from your BC website childitem.html Layout.

If you wish to get detailed information on customizing layouts and Menu Builders, Siteglide offers it right here.

Migrating Adobe BC Page Templates to Site Glide Page Templates

Just like you would in Adobe BC, you will have to set up the smaller elements first and then put them together right at the end. This will help you manage items globally site-wide.

Step by step directions to creating page templates:

1. Create Code Snippets – to store snippets of header and footer scripts so you can keep them tidy.

To create code snippets of header or footer scripts, just go to the Site Manager and click on Code Snippet. Here’s an example for you to understand this better.

  • You can create a code snippet called “Head Scripts” and place the code in this file to display between <head></head> tag.
  • You can create a code snippet called “Footer Scripts” and place the code in this file to display before </body> tag.

2. Create Headers

To create Headers, go to the Site Manager, then, click on ‘Headers’ in the admin panel. This option will typically include the logo and the main navigation menu.

3. Create Footers

If you wish to create Footer, you can do so by clicking on the Footer option in the Site Manager. This will usually include all footer items such as quick links, social media icons, copyrights, etc.

4. Include The Individual Code Snippet Files In A Template

If you wish to create a new Page Template, you can do so by clicking on the ‘Templates’ option in the admin panel. Typically, this includes a head, header, and footer along with some basic HTML to wrap your page content. Here’s an example for your understanding:

<html>
<head>
{%- include ‘code_snippet’, id: ‘1’, name: ‘header_script’ -%}
</head>
<body>
{%- include ‘header’, id: ‘1’, name: ‘Header’ -%}
{{ content_for_layout }}
{%- include ‘header’, id: ‘1’, name: ‘Footer’ -%}
{%- include ‘footer’, id: ‘1’, name: ‘footer_script’ -%}
</body>
</html>

Migrating Your Adobe BC Pages to Siteglide

Unfortunately, Siteglide doesn’t offer any import tool for your website pages. This is why you will have to create new pages and then copy and paste content from your existing Adobe BC website. To do this, you must navigate to CMS in admin and then click on Pages. Here, you will find a “Create Page” button. Click on it to see the following tabs.

Tab 1: Page Details

This tab will allow you to:

a) Add the basic details of the page including:

  • Page name
  • Slug
  • Set as the Home page
  • hide this page

b) Choose the particular page template for the page.

c) Add SEO data (title and meta description) in the SEO settings section in this tab.

Tab 2: Page Builder

You may use this tab to copy all the content within the <body> tag when moving over the pages from Adobe BC to Siteglide. The template you had set (as described earlier), will automatically include the head, header, and footer for that page.

Tab 3: Visual Editor

This tab will allow you to edit the content texts and images directly without any code from this tab. This tab is still in its beta version as Siteglide is working on improving its user interface in order to make it more user-friendly.

Migrating Web Forms to Siteglide

1. Create A New Web Form

Creating new web forms on Siteglide is very simple. All you need to do is navigate to the admin and find Forms in CMS. There, just click on the ‘Add New Form” button. After this follow the given steps:

– Fill the Form Name field with a suitable form name.

– Add a redirect page URL (e.g thank-you) to redirect the user after successful form submission.

P.S: You may use the same names for the form fields as you did for your Adobe BC website. You may also set up an auto-responder along with workflow notification just like in your Adobe BC website.

Creating a Form will automatically generate a default Layout. To view this layout, go to the Code Editor option in Site Manager. However, note that you will be locked out of editing. This is to ensure that editing can only be done by the admin itself by adding new fields in the Form itself.

create a new web form siteglide

Ensure that you create a custom layout for the Form. This has to be over the default layout. You can create a custom layout by right-clicking the folder with the name/ ID of your form. After all of this is done, simply copy the HTML content of your Form layout from your existing Adobe BC website and paste it into your custom form Layout in the Code Editor of site glide.

If you wish to automatically output the liquid for each field, use the ‘Insert Field” drop-down at the top of the Code Editor.

2. Migrating WebApp Layouts

Since you have already imported the WebApp data, it is now time to import the layouts.

Start by navigating to the Site Manager in the left-hand side of the admin. Here, go to ‘Code Editor’ and select ‘Layouts’. Now, click on ‘WebApps’.

import the layouts using custom layout in siteglide

This will show you a default Detail Layout which is stored within: layouts/webapps/webapp name/detail/default.liquid

You must create new custom detail layouts for the WebApps. After this, just right click the detail folder and you will be able to create a new custom WebApp detail layout. It should look like this:

layouts/webapps/webapp name/detail/custom_layout.liquid

Once you have done this, you must copy the WebApp detail layout HTML code from Adobe BC and paste it in to the Siteglide custom layout. Remember to follow the Siteglide structure.

Although this process seems a little intimidating at first, you will only have to follow the same process to migrate the WebApps listing layout.

3. Migrating Blog Layouts

We’ve already gone over importing the data from your blog posts. Now all that remains is to import the layouts for your blogs that are similar to your existing Adobe BC website. To do this, find the Site Manager from the left side of the Admin panel. Here, find ‘Code Editor’ and ‘Layouts’ within it. Now, go to modules. This will show you a list of blog layouts. You will also see default blog layouts as mentioned below:

Listing Layouts

  • layouts/module(Blog)/default/list/item.liquid
  • layouts/module(Blog)/default/list/wrapper.liquid

Detail Layouts

  • layouts/module(Blog)/default/detail/item.liquid
  • layouts/module(Blog)/default/detail/wrapper.liquid

You will be required to create new custom blog layouts to overwrite the default layouts. Now, simply right click the ‘Module’ (blog) folder to create new custom blog layouts. It should look as follows:

Custom Listing Layouts

  • layouts/module(Blog)/custom_blog/list/item.liquid
  • layouts/module(Blog)/custom_blog/list/wrapper.liquid

Custom Detail Layouts

  • layouts/module(Blog)/custom_blog/detail/item.liquid
  • layouts/module(Blog)/custom_blog/detail/wrapper.liquid

All that remains to be done now is to copy the blog layout HTML code from your Adobe BC website and paste it into the Siteglide custom layout according to the Siteglide structures. Ensure that you follow the same process for the rest of the modules like FAQs, Testimonials, etc.

Migration Last Steps

With the help of this blog post, you should be able to migrate your Adobe BC website into the Siteglide platform. However, since it is quite a herculean task, it is only natural that you might need assistance from time to time. Siteglide offers great support to help you make a website live. We’ve tried to cover all the points in this post, but in case you have any other doubts, please feel free to contact us for website migration and we’ll try to get back to you with the answers.  All the best!

  • Priyank is Senior Web Designer at E2M with 6 years of experience in this field. His work involves creating and maintaining functional, attractive, and responsive websites. He has worked on more than 100 WordPress and Adobe BC Projects. Priyank has worked on over 50 Adobe BC site migration projects in different technologies such as Webflow, DUDA, Treepl CMS, and Siteglide. He has superior understanding of modern technologies and designing best practices.
  • Hiren is Project Manager at E2M. He has over 12 years of experience in Website Designing and Development, which makes him an expert in this field. He has managed over 500 WordPress projects and over 100 Adobe BC site migration projects in different technologies such as Webflow, DUDA, Treepl CMS, and Siteglide. Hiren's strength lies in his communication and client service skills, which enhance E2M’s performance-driven management philosophy.
4 Shares
Buffer
Share
Tweet4
Share
Pin