Category: Templates

As a partner, your responsibility includes the creation and customisation of websites, along with the testing of your plugins. You have the flexibility to design both e-commerce and web content platforms using the ‘create website’ feature available through the partner portal.

Creating a Website

To create a website, follow the steps given below:

• Click on the “Create Website” Button.
• Enter the Business Name, Client Email, First and Last Name, and Country Name of the client.

• Answer the question “Do you want to sell online?” with Yes or No. If the answer is Yes, an e-commerce site will be deployed. If the answer is No, a web content site will be deployed.
• If the website is deployed successfully, it will carry an “Active” status.

Managing a Website

Once a website is created, you can manage it by following the steps given below:

• Click on “Website” from the sidebar menu.
• You will see a list of websites that you have created.
• You can identify each website as E-commerce or WebContent.
• You can log in to each website to manage it.
• Access the details view page of a website by clicking on the corresponding tile or card.
• You can update the website’s information and upload images from the details view page.
• To delete a website, click on the delete button, and confirm it with the popup message.

Client Login Details

You can provide login details to your client by following the steps given below:

• Access the details view page of a website by clicking on the corresponding tile or card.
• To send login information to your client, click on the kebab menu or three-dot menu, and choose the “Send login info to client” option.
• A popup titled “Invite Client to Login” will appear, displaying the email subject and message that you can use to invite your client to log in.

• To share the login information with your client, click on the “Send invitation” button.

By following the steps mentioned above, you can create websites for your clients, manage them, and provide login details to your clients. In case you face any glitches or errors while creating or managing a website, you will see an error message screen. For any further assistance or queries, please contact our support team.

Joining the WebCommander Partner Program is a straightforward process. As a new partner, you can start the signup/registration process by providing your name, email address, and password. Once you have completed the signup process, you will be redirected to the Setup Wizard, where you can provide more information about your business and products.

Signup Process

• To create an account, go to the signup page: Partner Program
• In the signup page fill in your name, email, and password in the spaces provided.
• Your name should be your full name.
• Enter your email address in the next space. Make sure it’s a valid email address that you can access, as you’ll need it to log in later.
• Choose a password that’s both easy for you to remember and secure. It should be at least eight characters long and include a mix of upper and lower case letters and at least one number or symbol.
• Once you’ve filled in all the fields, click the “Sign up” button.
• The system will check your information to ensure everything is correct and secure. If there are any issues, you’ll be prompted to fix them.
• If everything is in order, you will be directed to the “Setup Wizard” to proceed further.

Setup Wizard

As a new partner in our program, it is necessary for you to set up your account by completing a setup wizard. This wizard has been designed to assist you in the process of account setup and ensure a seamless and efficient onboarding experience for you.

• From the setup wizard, which will begin with a greetings page.
• On the business details page of the wizard, you will be asked to enter information about your business, including your business name, email address, phone number, and Website URL.
• After you’ve filled in your business details, click the “Next” button to proceed to the address information page.
• On the address page, you will be prompted to enter your business address. This may include your street address, city, state/province, postal code, and country.
• Once you’ve filled in your address information, click the “Complete Setup” button.
• Congratulations! You’ve now signed up and completed the setup wizard for your account. You should now be able to access your account dashboard and begin using the platform.

To proceed with creating a template, the next step is to create a website. By following the instructions in Building a Website, you will be guided through the process of creating a website, which is a crucial step in the template creation process.

Access the WebCommander editor by choosing “Edit Content Section” via the kebab menu on the layout card within the “Layout” option of the “Webdesign” menu on your dashboard.

Within the editor’s “Settings” domain, pinpoint the grid earmarked for concealment in specific resolutions.

Unfold the “Layout” accordion and opt for “Hidden” from the dropdown menu.

Select the resolutions where grid concealment is desired.

Validate your choices with a click on the “Apply” button, ushering in the desired changes.

By carefully following these steps, you’ll unlock the potential of responsive design, creating flexible and versatile user experiences.

Begin your voyage by navigating to the “Layout” option within the “Webdesign” menu on your dashboard.

Invoke the kebab menu on the layout card you intend to edit. Opt for “Edit Content Section.”

Step into the WebCommander editor, where you can easily modify your content sections.

To fine-tune the responsive behaviour, opt for the “Settings” option in the editor.

Within the “Settings” domain, select the grid you wish to tailor for specific resolutions.

Unveil the “Layout” accordion and manipulate the grid border to adjust the layout width as required.

Access the layout configuration panel. Choose ‘Fluid’ for resolutions requiring flexible grids and customise as necessary.

Finalise by clicking the “Apply” button, making your grid fluid for the selected resolutions.

Embark on your journey by visiting the “Layout” option under the “Webdesign Tools” menu in your dashboard.

Engage with the kebab menu located on the layout card you wish to edit. Select either “Edit Header Section” or “Edit Footer Section” based on your modification target.

Dive into the WebCommander editor, where you can seamlessly sculpt changes within your header or footer section.

To fine-tune the responsive behaviour, opt for the “Settings” option in the editor.

Within the “Settings”, explore the “RESOLUTION” select box to access your previously defined media queries.

Choose the “Global” option for CSS rules application across the board, or select a specific media query for tailored CSS rules.

The layout editor’s toolkit also offers “SW” (Section Width) and “SH” (Section Height) options, allowing you to determine the dimensions of your header/footer. “SW” can be set to 0 for full width, and “SH” to 0 for zero height.

Adjust the width and height of your header/footer to accommodate diverse screen resolutions, achieving a harmonious responsive design.

To display announcements or offers on your website, you can utilise Docker as an independent container that remains fixed in its designated position. To add Docker, you can follow these steps:

Open the ‘Settings’ tab in your live preview.

In the ‘Settings’ tab, you’ll find a ‘Section’ dropdown. Next to the ‘Section’ dropdown, you’ll see a ‘Plus’ icon. Click on that to add a new Docker section.

You can drag and drop the desired widget from the content section into the newly created section.

You have the flexibility to customise the design of the docker from the settings tab. Look for the option called ‘Dock CSS’.

Within the ‘Position’ dropdown, you can choose how the docker behaves. If you select ‘Absolute’, the docker will move along with the page. On the other hand, if you choose ‘Fixed’, the docker will stay frozen on the screen.

Additionally, you can adjust the position of the docker by modifying the ‘Left’, ‘Top’, ‘Right’, and ‘Bottom’ options.

To further customise the design, you can also modify the width and height of the widget placeholder.

If you want to go even further, you can enhance the design by adding CSS properties.

Sometimes, the Adding docker might hide your header or footer. Depending on its position, you may need to modify the CSS for the header or footer.

To unhide go to the page properties section and create a new selector specifically for the header or footer.

Once you have created the selector, you just need to add padding as a CSS property.

Once you’re satisfied with your changes, don’t forget to save them!

To edit the content section in WebCommander, follow these steps:

Once again, access the ‘Kebab Menu’ (the three dots) and choose ‘Edit Content Section’ to start customising the content.

Head to the ‘Settings’ option. Within the layout section, you’ll find ‘Body Grid.’ Here, you can select one of the available splitting options that aligns with your vision for the content layout.

In the Content tab, you can add widgets and design elements to your content section. If you’re looking for a specific widget, you can use the search bar to find it. And if you have some favourites, you can save them using the star icon. To add a widget, simply drag it onto the live preview area.

You can also add multiple content sections using the ‘Plus’ icon. Each section can have its own set of widgets, allowing you to create a dynamic and engaging layout.

Once you’re satisfied with your changes, don’t forget to save them!

If you want to add a background image to your template, you can create a folder and place your images in it.

When writing the source path in your CSS file, you must follow the image file path convention.

The image file path should be in the following format:

/template/eightDigit/images/fileNameWithExtension

To add an image as a background, you need to follow these steps:

• Place the image file in the “images” folder of your project.
• Open the style.css or responsive.css file (depending on your needs) and write the CSS rules to set the image as the background. Here’s an example:

If you want to set a background image for a specific page section, you need to follow these steps:

• Place the image file in the “images” folder of your project.
• Open the style.css file and add the following CSS rules to set the background image for the desired page section:

{
    "webhooks": [
        {
            "sourceUrl": "https://yourapp.com/api/v1/cart/added-to-cart",
            "eventName": "added-to-cart",
            "renderScope": "",
            "accessType": "webhook"
        }
    ],
    "scriptTag": [
        {
            "sourceUrl": "https://yourapp.com/assets/js/script-tag.js",
            "renderScope": "All",
            "accessType": "scriptTag"
        }
    ],
    "customerProfileTabs": [
        {
            "customerProfileTabIdentifier": "myPluginTab",
            "customerProfileTabDisplayName": "My Plugin",
            "customerProfileTabSourceUrl": "https://yourapp.com/plugin/my-plugin"
        }
    ]
}

If you intend to incorporate embedded fonts into your template, you can begin by creating a folder and organising your font files within it. While there are no strict rules regarding the naming of files and folders, it is crucial to follow the appropriate file path convention when using the @font-face rule in your style.css file.

The file path should adhere to the following format: /template/eightDigit/folderName/fileNameWithExtension

We can add fonts to the WebCommander front-end in two different ways. The first method is to import fonts from a Content Delivery Network (CDN) such as Google Fonts. The second method is to embed the font directly into our own site.

To import a font from a CDN, we need to add an @import rule in the style.css file. Here’s an example:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap');

body {
  font-family: 'Roboto', sans-serif;
}

To embed a font in the WebCommander front-end, you need to follow these steps:

1. Place the font files (.ttf, .eot, .woff, .svg) in the “fonts” folder of your project.
2. Open the style.css file and add the @font-face rule. Here’s an example:

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroymedium/Gilroy-Medium.eot');
    src: url('../fonts/gilroymedium/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/gilroymedium/Gilroy-Medium.woff2') format('woff2'),
    url('../fonts/gilroymedium/Gilroy-Medium.woff') format('woff'),
    url('../fonts/gilroymedium/Gilroy-Medium.ttf') format('truetype'),
    url('../fonts/gilroymedium/Gilroy-Medium.svg#Gilroy-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

body {
  font-family: 'Gilroy';
}

This folder contains a single JavaScript file. It is important to adhere to the folder and file naming conventions strictly.

To add custom scripting to the template webpage, we need to add a file named config.js in this folder. We can write JavaScript code in this file to customise the webpage behaviour as per our requirements.

Here’s an example of using custom JS:

This is a ‘Go to Top’ button. We have created this button using an HTML widget and assigned it the class ‘.goToTop’. To implement its functionality, we need to add custom JavaScript code to the ‘config.js’ file. Below is the JavaScript code.

// GO TO TOP DESIGN
$(function(){
        $(".goToTop").click(function(){
            $('html, body').animate({
                scrollTop: $("body").offset().top
            }, 1000);
            return false;
        });
    }
});