Customize Ecommerce Page Styles with CSS

Modified on Mon, 6 Oct at 8:27 AM

You can now customize the look and feel of Deskworks ecommerce pages using your own CSS. This helps you align the design of pages like Member Sign Up, Buy It Now, and Book It Now with your website branding for a seamless user experience.

This feature is ideal for operators who want their Deskworks web pages to look like a natural extension of their marketing website.

Note: This feature is available on the Pro Plan. If you’d like access or want to learn more about upgrading, submit a support ticket and our team will be happy to help.

Pages You Can Style

You can apply custom CSS to the following Deskworks pages:

Member Sign Up
Buy It Now (Product Weblinks)
Book It Now (Reservation Calendar)
Simple Reservation Wizards
Sign In Page

For more information on utilizing each of these pages, see How to Link Deskworks Features on Your Website →

How to Add Custom CSS

In Deskworks, go to Setup > Custom CSS
Tick the checkbox labeled "Enabled"
Enter your CSS code in the text field.
Click Save to apply your changes.

Note: If enabled, changes apply immediately after saving. Be sure to test across all styled pages.

Tips for Writing & Styling CSS

Use your browser’s Developer Tools to inspect elements and identify existing styles.
Keep your CSS minimal—only override what’s necessary.
Avoid CSS frameworks (e.g., Bootstrap, Tailwind) to prevent conflicts.

Examples of Global Styles

.page-title { font-weight: bold; } 
.ff-label { border-width: 0; } 
.ff-control:not(.ff-static) { border: 1px solid #b5b6b5; } 
.ff-label, .ff-control { margin: .75rem 0; } 
.ff-btn { border-radius: 0; }

Examples of Page Specific Styling

You can target specific pages by using route-specific classes. These are added to the element and match the page path.

Example — Sign In Page:

.route-sign-in { 
    .ff-board { padding: 0; } 
.ff-panel-body { border-radius: 0; } 
}

Note: The page/route selection class is applied to the <body> element. Its name corresponds to the URL path; for example, the /sign-in path results in the route-sign-in class.