Unbranded Partner Site Customization Guide

Transcription

1 Unbranded Partner Site Customization Guide

2 Contents 3 Hi There! 4 Customization Checklist 5 Site Overview 8 What You Need 9 How to use Triangle 13 Site Structure 15 Customization 2

3 Hi There! Congratulations on joining the Business Catalyst Partner Program. Bundled with what you receive as a BC Partner is a free Unbranded Partner Site. By default, your site includes all the features that our most successful Partners use to grow their design businesses, built-in. You ll most likely want to customize it yourself, so in this guide we ll run you through how to completely rebrand the site to suit your business. We ve included 5 unique themes that you can easily switch between. All you have to do is rename a CSS file. Find out how under the Customization section of this guide. Let s get started. 3

4 Customization Checklist We ve put together a quick checklist of essential customizations you need make to your Partner Site: o Upload your Logo Upload your own logo, so it appears in the header of your Partner Site. See page 14 to find out how. o Update the Free Trial button links (Rebranding Partners Only) If you re a Rebranding Partner, it s important that you redirect the Free Trial buttons on the Home page and Pricing page to your rebranded Online Business Builder. o Change the pricing table to suit your design business You most likely have your own pricing structure that takes into consideration the value you add on top of the BC platform. Edit the Pricing page to suit what you charge your clients. o Change the address on the For Designers Page By default, the For Designers page (your way of signing up Resellers and making commissions) directs enquiries to a faux address. Replace this with the address you wish to be contacted at. o Change the name in Privacy Policy and Terms of Use You ll want to Find & Replace [Partner] in the included Privacy Policy and Terms of Use. o Change Address on Contact Us page Next to the Contact form on your Contact Us page, there is a false address that needs to be either replaced with your office address or removed. o Upload your own designs to your Portfolio Your Portfolio page uses a Web App to store site showcases. Find out how to upload your own designs on page 15. o Configure Customer Service Ticketing Your Support request form is already set up to use Customer Service Ticketing and directs to your support@ address. In order to take advantage of this functionality, you need to configure CST from your Admin Console. Find out how on page 16. 4

5 Site Overview Home This is the first page your existing and potential clients will see when they visit your site. By default, it includes: The Unbranded Online Business Video A Take a Free 30-Day Trial button as a call to action (only available to Rebranded Partners) Headline, Benefits & Main Features Tip: If you re a Rebranding Partner, using highly visible and clickable calls to action such as Free Trial buttons will help you push more prospects through your sales funnel. Overview This page contains a more detailed walkthrough of the features included in the All-In-One solution. By default, it follows this structure: Main Features Full Features Shipping Providers Payment Gateways Detailed Tour Portfolio We ve already set up a Portfolio page for you to showcases your designs. This page is linked to the Portfolio Web App in the backend of your Partner Site - so adding new designs is easy. Find out how under the Customization section of this guide. Tip: Showcasing your previous work is a great way to convince clients that you re worth paying for. Show them the level of customization you provide and list the range of features you ve implemented. 5

6 Pricing This page contains our standard monthly billing table, including the Mini ($39), Regular ($59), and the Super ($79), each with a Free Trial button below. By default, the page also includes a What you get section and what we charge for Extras such as extra disk space, newsletters and users. Tip: Change the pricing on this page to suit your individual pricing structure, taking in to consideration your value-adding design/copywriting/seo services. For Designers The For Designers page provides information for your fellow web designers and, by default, directs them to your partners@ address for more information. This is a great way to sign up designers as resellers and earn extra revenue in the form of commission. If you don t wish to resell the solution, simply disable the page and remove the menu item. Support This is the page your clients will navigate to for Support purposes. By default, the first tab they see directs them to helpful unbranded video tutorials and the Online Business Wiki. If they require support from you, we ve also included a ready made Support Request form that is already setup to use Customer Service Ticketing. All requests submitted using this form will, out of the box, direct to your support@ address. Find out more under the Customization section of this guide. Clients are also able to download the unbranded Dreamweaver Extension Triangle from the Support section. Client Portal Once you ve provided your clients with a username and password, they will be able to login to this Secure Zone. From here, they can view their Past Invoices and Past Support Cases. Tip: When you sign up a client, make sure that you assign a username and password to their primary address. All support cases they submit using that address will then appear as threaded conversations in their Client Portal. 6

7 About We ve intentionally left this page blank, so you can jump in and fill it with important information about your design business. Talk about your history, experience and areas you specialize in. Contact On this page, be sure to change the Address to your own. We ve built-in a working Contact Us form that will notify you and the users of your Partner Site every time an enquiry is submitted. Tems of Use & Privacy Policy We ve fitted out your site with standard, ready to go, Terms of Use and Privacy Policy pages. All you need to do is replace [Partner] (without quotation marks) with the name of your business. Tip: Use the Find & Replace option (available in most HTML/Text editors - CTRL + F in Dreamweaver) to quickly go through and replace the name. 7

8 What You Need In order to customize your unbranded partner site with ease, you ll need the following: Adobe Dreamweaver ( Triangle Extension ( FTP Client Login Details Server: your-site.com User Name: Port: 21 Check: Use passive mode for data transfers Firebug Add-on for Firefox Firebug is a web development add-on for Firefox that lets you: Inspect and edit HTML Tweak CSS instantly without updating the CSS file on the server Visualize CSS metrics Go to to learn more 8

9 How to use Triangle What is Triangle? Triangle is our Adobe Dreamweaver extension that lets you inject Online Business functionality into your HTML. Adding Triangle extension to Adobe Dreamweaver Simply double click on the TriangleExtension.mxp file and the extension will install itself. 9

10 Creating a new webpage Open Dreamweaver, click on Window (next to Help) and you should be able to find Triangle at the bottom of the dropdown menu. Click on Triangle: Enter your login details, then click Login Choose your Unbranded Partner website from the website list and click Load Click the Web Pages tab Click New In the document window, type The Page of Awesome In the Triangle panel select the folder you want the new webpage to be in ( / is the root folder) Tick Start Page if you want this page to be the start page of your website To save the work-in-progress page, without publishing it, click Save ; the page will be saved in the database as a Working Copy and you won t be able to access it via FTP. To publish the page and make it live, click Save and Publish WARNING: The content of the selected document window will be saved when you click Save or Save and Publish - so watch out if you have lots of document windows opened. Make sure Current Webpage in the Triangle Panel matches the selected document window. 10

11 Editing a Webpage Click on the webpage you d like to edit Click the Load Live button to load a published webpage / Click Load Working to load an unpublished webpage Removing a webpage Load the webpage, check Deleted and then click Save and Publish or simply delete the webpage via FTP. 11

12 Rolling back a webpage Older versions of a webpage are archived and kept in the database. To rollback a webpage, simply click on Archive and select the version you want to rollback. 12

13 Site Structure Site Map Unbranded Partner Site IA Home Overview Portfolio (web apps) Pricing For Designers Support (slider) About us Contact us (web form) Free Trial (online business builder) Client Portal (secure-zone) Main Features (slider) Content Management Website Showcases (lightbox) Wiki (external link) ecommerce Full Features Video Tutorials Marketing Shipping Providers Support Request (web form) CRM Payment Gateways Download Triangle (literature) Report and Analytics Detailed Tour Template and Pages All templates must have the {tag_pagecontent} tag; place {tag_ pagecontent} where you want the webpage content to sit in the template. 13

14 Template Web Page Header including logo Site Navigation Menu Web Page Content Footer Header including logo Site Navigation Menu Web Page Content Footer Final Page, what customers see. 14

15 Customization You ll notice that the site look better in Firefox & Safari. This is because we ve used the border-radius property in CSS3 which is not supported by IE8 or below. CSS Files / Themes Found in the StyleSheets folder screen.css - CSS for the look and feel of the templates ModuleStylesheets.css - CSS for modules e.g. Catalogs, Products, Announcements etc. ie.css - CSS for IE6 (based on Blueprint CSS Framework 0.8) theme.css - this style overwrites the color scheme of screen.css, remove this file to use the default colors theme-xxxx.css - there are 5 themes provided; to apply a theme, simply rename the desired theme-xxxx.css to theme.css Logo Class fixpng in <img> exists to make the 24-bit transparent PNG work in IE6 To change the position of the logo, edit the top property in a#logo selector in screen.css Color Scheme Customize the color scheme of the site easily by editing one of the themexxxx.css files and applying it, as shown above. Navigation - Dynamic Menus There are two dynamic menus: the Website Main Menu (global navigation), and the Overview Menu - both menus are present in the footer The menus are running in CSS-Only mode, so you can customize them 15

16 using CSS. Look for the #container-nav and.nav-side selectors in screen.css to customize them. Page Content Layout Changing the page content layout takes only a few seconds once you understand how the Blueprint CSS framework works. Check out and view the source code. Slider Coda Slider was used on the Overview page and Support page; to customize, read the instructions and how-to s at blog/2007/10/29/coda-slider-11/ Do not replace the jquery files with jquery 1.3, as the Coda Slider may not work Free Trial Buttons (Rebranding Partners only) By default, the Free Trial buttons on your Partner Site need to be linked manually to your Rebranded Online Business Builder From your Partner Portal, navigate to the Resources page and scroll down. On the right hand side of the page, under Integrated Sign-Up and Login on your Website, you ll see a link that looks like this: - Copy the URL and direct all new and existing Free Trial buttons to this address Direct clients to for logging in to their Online Business Console Web Apps A Web App is used for the Portfolio page so the website showcases can be managed easily To add new designs to your Portfolio, navigate to Modules > Web Apps > Portfolio. Click Create A New Web App Item and then fill out the design details, including the path of a large image and a thumbnail image (282x182px) of the site To edit the HTML layout of each Web App Item, open the Dreamweaver Triangle extension and go to the Custmization List by clicking on the small icon above Help. Scroll down and click on Web App Layouts, select Port- 16

17 folio > Portfolio List then click Load. If you re wondering where the <ul> is, it s inside the Portfolio page content Customer Service Ticketing (CST) The Support Request form uses built-in CST to direct all cases to your support@ address To add new Customer Service Representitives, modify the way cases are allocated, and set your availability, select Customer Service Ticketing under Admin in the back-end. Learn more about Customer Service Ticketing at: To change the workflow being triggered (in this case, CST), navigate to Modules > Web Forms > Support Request and under the Use Workflow? drop down menu, select the workflow you wish to be triggered 17