CPS Theme Builder: the complete guide

CPS Theme Builder and CPS eMart start with a 7 day free trial with every feature of that plan switched on. You do not need a card to start. CPS Custom has no free trial: it is billed from the first day, so after you sign up Plan & Billing opens for the first payment.

1. 1Step 1: Go to the sign up page and type your name, your email and a password of at least 10 characters. You can also sign up with Google.
2. 2Step 2: Type your site or brand name. The site address fills itself in from the name; change it if you like. A green tick means it is free.
3. 3Step 3: Choose your plan. CPS Theme Builder is the website with every feature except the shop. Choose CPS eMart if you want to sell online.
4. 4Step 4: Pick where to start: Store, Services business, Portfolio, Restaurant or Landing page. Every word and picture is sample content you can change.
5. 5Step 5: Press Create my site. You land in the console with your site already online at its free address.

The console is where you build and run your site. The menu on the left is grouped by job: Site, Shop, Visitors, Settings and Account. On a phone or a small tablet, open it with the menu button at the top.

Get your site ready

• Pick a template (done when you signed up).
• Add your logo and colours: opens Theme.
• Add a page: makes a new page and opens it in the builder.
• Connect your domain: you can Skip this until you have one.
• Publish your site: opens the builder so you can press Publish.

Help on every screen

On any screen, press Help for this screen near the bottom of the menu, or the ? key on your keyboard. On a phone, press the help button in the top bar. A panel opens with help for that screen and a link to the matching chapter of these guides. Help centre, just below it in the menu, has every article.

1. 1Step 1: Open Pages. Every page of your site is listed in the order of your menu.
2. 2Step 2: Drag a page by its handle to move it. Drag it a little to the right to make it a dropdown item under the page above.
3. 3Step 3: No mouse? The arrow buttons move a page up or down, and the indent button makes it a sub-page.
4. 4Step 4: Press Edit to open a page in the builder.
5. 5Step 5: The three dots open more actions for the page.

More actions for a page

• Page settings & SEO: title, address, menu label, search and sharing, schedule and password.
• Duplicate: a copy to start a similar page.
• Set as homepage.
• Hide from menu (or Show in menu): the page stays online but leaves the menu.
• View on site, and Delete.

Your menus

The header menu and the footer links are built from your pages. If you would rather type every link yourself, open Site Settings and choose Custom links. You can switch back to Automatic at any time.

The builder shows your page as visitors will see it. The list of sections is on the left, the page in the middle, and the settings of what you selected on the right.

Add a section

1. 1Step 1: Press Add at the top of the sections list, or Insert here between two sections on the page.
2. 2Step 2: Know what you want? Type it in the search box at the top, for example form, video or map.
3. 3Step 3: Or choose a group: Store layouts for tiles, products and video, 1 column for a full width section, 2 columns for text beside a picture, or Content blocks for FAQs, tabs, carousels, numbers and more. The Library tab holds sections you saved.
4. 4Step 4: Pick the kind of section. It appears on the page, ready to edit.

Tiles: the Amazon style grid

1. 1Step 1: Click a Tile section on the page. Its settings open on the right.
2. 2Step 2: Press Change layout to pick another grid, or Flip to mirror it left to right.
3. 3Step 3: Each tile is listed under Tiles. Click one to edit it, or click the tile on the page.

Every layout has its own phone arrangement. In Choose section layout, switch between Mobile and Desktop to see how the same layout looks on each.

Words and pictures

1. 1Step 1: Click a tile or a section. Type the headline, text, link and button label on the right. You can also click text on the page and type.
2. 2Step 2: For a picture, press Upload to add one from your computer, or Browse to pick one you uploaded before.
3. 3Step 3: Describe the picture under Alt text, for example "A sunlit living room with a linen sofa". Tick Decorative image only when the picture carries no meaning.

Check your phone layout

Use the screen buttons at the top to see the page on a computer, a tablet and a phone. Most visitors come on a phone, so check it before you publish.

Undo, redo and saving

• Your work saves itself as a draft. Visitors keep seeing the published page until you press Publish. Press Ctrl+S to save at once.
• Undo and redo are in the toolbar, or press Ctrl+Z and Ctrl+Shift+Z.
• Drag a section in the list to move it, or use the small toolbar that appears on the selected section: up, down, duplicate, save to Library and delete.

Saved and linked sections

1. 1Step 1: Select a section you want on more pages, such as a delivery promise or a call to action, and press Save as reusable section.
2. 2Step 2: Give it a name. Keep Keep this section linked ticked if one edit should change it on every page. Untick it to save a plain copy.
3. 3Step 3: On another page, press Add, open the Library tab and insert it.

Your saved sections are under Library in the menu, with the pages that use each one.

Header banner slideshows

1. 1Step 1: Click the header banner. Slide 1 uses the picture, title and text at the top of its settings. Under Carousel slides, press + Add slide for more.
2. 2Step 2: Each extra slide can have its own button label and link. Leave them empty to show the section's own button.
3. 3Step 3: Under Banner and slideshow, set the height for desktop, tablet and phone, where the text sits, and Slow zoom on the picture.
4. 4Step 4: With two or more slides, choose Fading or Sliding, the speed, Play by itself with the time on each slide, and whether to show dots and arrows.

Video from YouTube or Vimeo

• In a Video or Video banner section, paste the link from your browser's address bar: a YouTube page, a Short, a youtu.be link or a Vimeo page. It becomes a player by itself.
• For a video file you uploaded, choose whether it plays by itself (always muted), loops and shows the player controls. A Video section can also have a poster picture that shows before it plays.

Content blocks are sections built for one job each: FAQ, Tabs, Carousel, Numbers, Testimonials, Team, Logo strip, Feature cards, Check list, Call to action, Newsletter signup, Divider and Spacer. Each one arrives with sample words, so it never lands as an empty box.

Add a content block

1. 1Step 1: In the builder, press Add.
2. 2Step 2: Type a word in the search box, such as card, question or logo. Matching sections from every group show at once.
3. 3Step 3: Or open Content blocks to see them all, each with a small picture of how it looks.
4. 4Step 4: Pick one. It appears on the page, selected, with its settings on the right.

Click the words and type

Click any word of a content block on the page to type over it: questions and answers, tab titles, numbers and their labels, quotes, names, card titles and texts, link texts and the call to action buttons. Enter keeps a one line text, Esc puts it back as it was. Pictures, links and the order of entries are set in the settings panel on the right.

FAQ

1. 1Step 1: Under Questions, open a question with its arrow to edit it, or use the buttons to move, duplicate or delete it. Press + Add question for another.
2. 2Step 2: Select words in an answer and press B, I or Link under the box for bold, italic or a link.
3. 3Step 3: Under Behaviour and look, choose what is open when the page loads, the style (boxed, minimal or dark) and the icon.

Tabs

Each tab has a title, a text and an optional picture. Choose tabs across the top or down the side, the style and which tab is open first. On phones, tabs can turn into an accordion.

Carousel

A sliding row of cards, images, testimonials or logos. Choose the kind first, then how many slides show on desktop, tablet and phone, and the controls.

Feature cards and numbers

• Feature cards: an icon, a title, a few words and an optional link on each card, in two, three or four columns.
• Numbers: type each figure as you want it shown, such as 12,000+ or 98%, with a short label. Count up when they come into view makes plain figures count up from zero.

Call to action

1. 1Step 1: Write the heading and a line of text. Select words and press B for bold.
2. 2Step 2: Set the main button: its label, link and style.
3. 3Step 3: Tick Second button to add another beside it, with its own label, link and style (outline by default).

1. 1Step 1: Select a section and open Advanced at the bottom of its settings. A small "in use" badge shows when something is set.
2. 2Step 2: Anchor: the name used to jump straight to the section, as in /care#numbers, and in a Jump-to bar.
3. 3Step 3: Entrance animation: fade up, fade in, slide in or zoom in, with a speed and a delay. It plays once as the section scrolls into view on the live page.
4. 4Step 4: Hide on: desktop, tablet or phone. Phones are under 768 px wide, tablets up to 1023 px.
5. 5Step 5: Space around the section: from none to extra large above and below. Tick Different on tablets and phones to set those apart.
6. 6Step 6: Background picture: any section can sit on a photo. Darken the picture with the slider; from 30% the text turns white so it stays readable.

A hidden section stays in the builder so you can still edit it. In the preview for that device it shows faded, with a dashed edge.

Bold, italic and links

1. 1Step 1: Click into a text on the page and select some words. A small toolbar appears with Bold, Italic and Link.
2. 2Step 2: Or press Ctrl+B, Ctrl+I or Ctrl+K (Cmd on a Mac).
3. 3Step 3: A link can be a web address, a page of your site such as /contact, an email address or a phone number. Links to other websites open in a new tab.
4. 4Step 4: In the settings panel, the same B, I and Link buttons sit under each text box. Select words, then press one. Press B or I again to take it off.

Find your way around

• The page name at the top left is a menu: pick another page to edit it. Anything not saved yet is saved first.
• Ctrl+S saves at once, and the top bar says Saved. If a change could not be saved, it says Not saved: press Ctrl+S to try again.
• Structure (or Ctrl+I) hides or shows the Sections list, to give the page more room.
• Outlines draws the edge of every section with its type, so you see where one ends and the next begins. Visitors never see them.
• The keyboard button shows every shortcut. So does ? (Shift and the / key).

1. 1Step 1: Open Library in the menu and choose the Media tab.
2. 2Step 2: Drop images or videos on the dashed box, or press choose files. Several at once is fine, up to 100 MB each. Each file shows its progress.
3. 3Step 3: Filter with All, Images and Videos. Videos have a small film mark next to their size.
4. 4Step 4: Under each file: copy its link, open it, or delete it.
5. 5Step 5: Tick several files to delete them together with Delete selected.

Deleting safely

Before a file is deleted, the library checks where it is used. A file on your live site (a published page, the logo, the favicon or theme, an active product or a published post) is not deleted: replace it there first. A file used only in drafts or saved sections asks you a second time.

1. 1Step 1: Open Theme. Pick a preset as a starting point.
2. 2Step 2: Set your colours: Primary for buttons and highlights, Accent for small details, Dark for text, Light for light section backgrounds, and Page background.
3. 3Step 3: Choose a font pairing, or a heading font and a body font yourself. Arabic pairs are in the same list.
4. 4Step 4: Choose the button shape and the spacing, and watch the preview.
5. 5Step 5: Press Save theme. Discard changes puts back what you had.

What every page shares

Site Settings > Header & footer holds the announcement bar along the top, your social links, the cookie notice, the WhatsApp chat button and the search box.

1. 1Step 1: Press Publish at the top right of the builder. It reads Published when there is nothing new.
2. 2Step 2: Before you publish lists anything worth a look. Press Fix to jump to the right field.
3. 3Step 3: Press Publish anyway, or fix the points first. Visitors see the new page straight away.

Versions

Press Published versions (the clock button in the toolbar) to see every publish of the page. Restore loads an older version into the draft; publish it to make it live again.

Show someone a draft

Preview (the eye button in the toolbar) opens the draft in a new tab. Copy that address and send it to anyone: the link works for 30 minutes and nothing is published.

Once published, the page is live on your site for everyone, on computers and phones.

Publish later

To publish at a set time, open the page settings in the builder (Page settings at the top of the sections list) and pick a date and time under Schedule publish. The draft goes live on its own.

1. 1Step 1: In the builder, click Page settings at the top of the sections list, or use Page settings & SEO on the Pages screen.
2. 2Step 2: Write an SEO title (about 60 characters) and a meta description (about 155). The preview shows how Google may show the page.
3. 3Step 3: Add a social share image (1200 x 630 works best) and describe it. It shows when someone shares the link on WhatsApp or social media.
4. 4Step 4: Tick Hide from search engines (noindex) only for pages you do not want on Google.

For the whole site

• Favicon: the small icon in the browser tab. A square PNG of 512 x 512.
• Default share image, used when a page has none of its own.
• Your own analytics (optional): paste only the ID for Google Analytics 4, Meta Pixel, Google Tag Manager, TikTok Pixel or Snap Pixel.
• Sitemap and robots: made for you from your published pages.

1. 1Step 1: Open Blog and press New post.
2. 2Step 2: Type the title and a short summary, then write the post. Text you paste in keeps its headings, lists and links.
3. 3Step 3: Add a cover image and describe it, then choose the author, tags and categories on the right.
4. 4Step 4: Publish now, or pick a date to schedule it.
5. 5Step 5: Show your newest posts anywhere with a Latest posts section in the builder.

1. 1Step 1: In the builder, press Add and type form in the search box, or choose 1 column and then Form.
2. 2Step 2: Set the heading, the intro text and the form name (how messages are labelled in your Inbox).
3. 3Step 3: Open Submit button and Messages to word the button, the thank you message and the error messages. Leave the messages empty to use the site's own wording in each language.

Fields

1. 1Step 1: Press + Add field and pick from 12 types: short text, email, phone, long text, dropdown, choice buttons, checkbox, agree to terms, date, time, number and web address.
2. 2Step 2: Tick Required for the fields people must fill in. Use the arrows to move a field, the copy button to duplicate it and the bin to remove it.
3. 3Step 3: Open a field with the small arrow next to its name to set its ID, placeholder, help text and width. Two fields set to Half row sit side by side.
4. 4Step 4: For a dropdown or choice buttons, write one option per line. To send a different value from what people see, write value|Label.

After sending

1. 1Step 1: Open After sending and tick what the form should do. Keep at least one of Email the team and Keep in the Inbox.
2. 2Step 2: Email the team: To, Cc and Bcc (your team's addresses), the subject, the message, the From name, where replies go, HTML or plain text, and extra details such as the page address.
3. 3Step 3: Auto-reply to the visitor: a plain thank you email sent to the email field you choose. Each address gets at most 3 a day.
4. 4Step 4: Send to a webhook: each message is posted as JSON to an https address of yours, for example your CRM. Press Make secret to sign the posts.
5. 5Step 5: Go to another page: open a page of your site just after the thank you message.
6. 6Step 6: Publish the page. Activity, at the bottom of the form settings, lists each email and webhook sent or failed.

The Inbox

1. 1Step 1: Open Inbox. Every message shows who sent it, when, the form and the page it came from. New ones are marked.
2. 2Step 2: Click a message to open all its answers.
3. 3Step 3: Press Reply, check the subject and write your answer, then Send reply. It goes from our mail server to the visitor and stays with the message.
4. 4Step 4: Prefer your own email program? Press Reply by email.
5. 5Step 5: Export CSV opens every message in Excel or Google Sheets.

Open Insights and choose 7, 30 or 90 days. You see page views, visitors (unique per day), pages per visit, direct visits, a chart by day (Show as a table lists the same numbers), your top pages and the sites that sent visitors.

1. 1Step 1: Open Translations and the Languages tab. Choose a language and press Add.
2. 2Step 2: Each language gets its own address, such as /ar. Arabic reads right to left with an Arabic font, set for you.
3. 3Step 3: Leave Live on the site unticked while you translate. Tick it when you are ready.

The Pages and content tab lists every page, post, product and menu with how much is translated. Press Translate to work on one.

The English text is on the left and your translation on the right. You can also open the builder, switch the language at the top to Arabic and type straight onto the page.

Visitors get a language switcher in the header, and Google is told which page is which language.

Every site has a free address like yourname.sites.cityprojectsolutions.com, with HTTPS included. It keeps working even after you connect your own domain.

1. 1Step 1: Open Domains. Under Connect your own domain, type your domain, for example www.yourshop.com, and press Add domain.
2. 2Step 2: Sign in where you bought the domain (GoDaddy, Namecheap, Cloudflare and so on) and open its DNS settings.
3. 3Step 3: Create the two records shown: a CNAME that points your address at our servers, and a TXT that proves the domain is yours. Use the copy buttons so nothing is mistyped.
4. 4Step 4: Come back and press Verify now. HTTPS is set up for you within a few minutes.
5. 5Step 5: When it is live, press Make primary. Visitors on any other address are sent to it.

Redirects

1. 1Step 1: Open Redirects and press Add redirect.
2. 2Step 2: Type the old address (the path only, like /old-shop/sofas) and where it goes now.
3. 3Step 3: Choose Permanent (301) for a page that moved for good, then Save redirect.

Password protection

• Whole site: Site Settings > Privacy, type a password and press Make the site private.
• One page: Pages > three dots > Page settings & SEO, then Protect with a password.
• One blog post: the same switch is in the post editor.

1. 1Step 1: Open Team and press Invite user.
2. 2Step 2: Type their email and, if you like, their name.
3. 3Step 3: Choose a role and press Invite.

• Owner: everything, including billing and the team.
• Admin: everything except billing and the team.
• Editor: the website, products, orders and customers. Not shop settings, payments or integrations.
• Shop staff: orders and customers only, with a read only look at products.
• Content: pages, blog posts and media only.

1. 1Step 1: Open Security. Type your password and press Set up two-step sign-in.
2. 2Step 2: Scan the code with an authenticator app such as Google Authenticator, Microsoft Authenticator or 1Password. Or type the key by hand.
3. 3Step 3: Type the 6 digit code the app shows and press Turn on.
4. 4Step 4: Save your recovery codes somewhere safe. Each one works once if you lose your phone.

• Require two-step sign-in for the team: members without it are asked to set it up the next time they open the console.
• Recent sign-ins shows where your account was used.
• Sign out everywhere ends every session on every device, this one included.

1. 1Step 1: Open Plan & Billing. You see your status, when the trial ends and your plan.
2. 2Step 2: Subscribe now and keep your trial days: the first payment is taken when your trial would have ended. CPS Custom has no free trial, so its first payment is taken the day you subscribe.
3. 3Step 3: Pay with the card button: a debit or credit card, no PayPal account needed. PayPal keeps the card safely and charges it each month.
4. 4Step 4: Prefer your PayPal account? Use the link under the card button to pay on PayPal's own site.