Settings – Design

Posted on by Villatheme

Go to Dashboard >> Product Builders >> Settings >> Design

In the Design tab, you can choose the product builder templates, customize the button on the product builder page, customize on mobile mode, and other advanced features.

 

Template

Choose from 7 available templates to define how your product builder appears on the frontend. Refer to our documentation for a detailed preview of each template and their differences.

Hover the template you want to see its preview

 

Button

  1.  Design “Load step” button:
    • Default status: Set the initial state of the “Load Step” butt
      • “Load step” button type: Choose how the button appears – icon or text
      • “Add” button text: Specify the label for the “Add” button
      • “Add more” button text: Specify the label for the “Add more” button
      • Text color: Set the button’s text color
      • Background color: Choose the button’s background color
      • Border width: Adjust the border thickness. If a border is set, its color will match the button text color
    • On hover: Customize the button appearance when hovered
      • Text color: Set hover text color
      • Background color: Choose a hover background color
  2. Design Button
    • Default
      • Button icon: Choose whether to display an icon or text for certain buttons (AJAX templates use icons for email, share, print, and PDF actions)
      • Text color: Set the default text color
      • Background color: Select the default background color
    • Button Primary
      • Text color: Customize the primary button text color
      • Background color: Choose the primary button background color
  3. Design Preview page button
    • Default
      • Text color: Set the default text color
      • Background color: Choose a background color
      • Border width: Adjust the border thickness (border color will match text color if applied)
    • Hover state
      • Text color: Define hover text color
      • Background color: Select a hover background color

 

 

Mobile

Optimize the product builder for mobile users.

  1.  Distance from bottom: Adjust the control bar’s distance from the bottom of the screen
  2. Control bar

    • Text color: Customize control bar text color
    • Background color: Set control bar background color

 

 

Advanced

  1. Display share link: Toggle to show or hide the share link
  2. Display get short share link for customer: Enable or disable short links for customers (default: always visible for admin)
  3. Remove short share link records after x day(s): Set the number of days before short share links are automatically deleted
  4. Clear session: Reset session data for a fresh start after customer adds a product builder to cart
  5. Clear filter: Remove applied filters after being selected

 

 

Custom CSS

For developers and advanced users, apply custom CSS to further style and modify the product builder according to your needs.