Convertix Pro Logo

Setup Tutorial

Follow this simple step-by-step walkthrough to customize your branding, create your pages, and launch your new website in under 30 minutes.

30-Minute Setup 1-Click Child Theme Visual Styling
1

Create Your Child Theme (Recommended First Step)

Creating a child theme protects your customizations forever. When Loopstates releases new theme versions or enhancements, you can update with confidence knowing your custom CSS, templates, and content will never be overwritten.

  • Log into your HubSpot portal and navigate to the top-right Settings gear icon.
  • In the left sidebar, navigate to Content > Themes (or Website > Themes).
  • Hover over the Convertix theme card and click Actions > Create child theme.
  • Enter a name for your theme (e.g., My Brand - Convertix) and click Create child theme.
Zero Code Required

HubSpot handles the file linking automatically. All 50 modules, 49 templates, and theme settings are instantly available in your new child theme.

2

Customize Your Global Brand Colors & Typography

Convertix Pro includes a centralized visual Theme Settings dashboard. Configure your brand guidelines once, and every page updates automatically.

  • In HubSpot, navigate to Marketing > Website > Website Pages.
  • Click Create > Website Page and choose any Convertix template to open the editor.
  • In the top toolbar of the page editor, click Design > Edit Theme Settings.
  • Under Global Colors, set your Primary Brand Color, Accent Color, and Neutral backgrounds.
  • Under Typography, choose your preferred Google Fonts for Headings and Body text.
  • Under Company Logo, upload your dark and light logo files for the navigation bar and footer.
  • Click Apply changes in the bottom left to save across your entire site.
3

Build Your Pages with Drag & Drop Modules

Create custom layouts in seconds using our library of 50 specialized modules.

  • Open any page in the HubSpot Page Editor.
  • In the left sidebar, click the + (Add) icon to open the module library.
  • Filter or scroll to Convertix Modules to see all available blocks (Hero Banners, Pricing, FAQs, Features, CTAs).
  • Click and drag any module directly into your page layout where you want it to appear.
  • Click on the module on your page to edit headlines, images, button links, and layout options in the left inspector panel.
4

Import Dynamic Products with HubDB

Display an interactive, filterable catalog of products or services that you can manage from a spreadsheet.

  • Download our pre-built sample CSV template: hubdb-sample-products.csv.
  • In HubSpot, go to Marketing > Files and Templates > HubDB.
  • Click Create table, name it Convertix Products, and click Create.
  • Click Actions > Import, choose the downloaded CSV file, and click Import.
  • Click Publish in the top right of HubDB to make your products live.
  • On your website page, add the Convertix Product Catalog module and select your table to display live products with search and category filters.
5

Configure Your Cart & Inquiry Mode

Choose how your visitors take action based on your business model:

  • Quote Request Mode: Customers add items to an inquiry list and submit for an official quote, which generates a deal directly in your HubSpot CRM.
  • Direct Checkout Mode: Connect buttons directly to Stripe checkout, Shopify Buy Buttons, or custom payment URLs.
  • WhatsApp Orders: Direct customers to a pre-filled WhatsApp message containing their cart summary for immediate sales assistance.
  • Lead Capture Form: Send contact inquiries directly into your HubSpot contact lists and sales workflows.

Need Bespoke Custom HubSpot Modules?

Looking to integrate custom CRM pipelines, bespoke e-commerce workflows, or complex HubDB architectures? Our engineering team works directly with agencies and brands to tailor Convertix to your exact business operations.