---
title: "Personalizar una Plantilla"
url: https://docs.catalyst.zoho.com/es/smartbrowz/help/templates/customize-templates/
description: "Cree, configure y administre plantillas de páginas web o documentos con las que puede generar documentos visuales con PDF and Screenshot."
last_updated: 2026-08-17T12:16:04Z
service: SmartBrowz
type: general
---

# Personalizar una Plantilla

Una vez que haya elegido un diseño de plantilla, será dirigido al editor de plantillas incorporado en la consola que le permite personalizar su plantilla y estilizarla según su preferencia. Para este documento de ayuda, ilustraremos la personalización de una plantilla usando la plantilla *Certificate*.

Tendrá secciones de editor respectivas para HTML, CSS y JavaScript para estilizar y personalizar su plantilla directamente en la consola, como se muestra a continuación.

![catalyst_smartbrowz_template_HTML](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_HTML.webp)

### Usar LiquidJS para Personalizar sus Plantillas

Catalyst SmartBrowz soporta el uso de [LiquidJS](https://liquidjs.com/) para personalizar sus plantillas. LiquidJS es un lenguaje de plantillas de código abierto popular que puede aprovechar para crear rápidamente plantillas que se adapten a sus requisitos.

El contenido, los datos JSON (datos dinámicos) que carga en su plantilla están sujetos a cambios según su requisito. Usar LiquidJS para personalizar sus plantillas le permite aprovechar los filtros nativos para manejar de manera fluida estos datos dinámicos.

Los datos dinámicos para su plantilla deberán pasarse como un payload JSON. Por ejemplo, considere que está usando la plantilla **Certificate**, entonces el payload JSON deberá verse así:

```json
{
  "name": "Michelle Mascarenhas",
  "workshop_name": "Serverless Computing",
  "event_duration": "one day",
  "event_description": "building cutting-edge cloud applications",
  "team_name": "Zylker Technologies ",
  "event_name": "Zylker Technologies Pvt. Ltd.,",
  "event_location": "Manhattan, NewYork",
  "event_date": "20th February 2025"
}
```

![catalyst_smartbrowz_templates_json_sample](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_json_sample.webp)

> **Nota:** SmartBrowz actualmente soporta el runtime `v10` de LiquidJS.

#### Sintaxis de LiquidJS

La siguiente tabla contiene la sintaxis necesaria de LiquidJS que puede aplicar a sus plantillas para personalizarlas y manejar datos JSON dinámicos.

<table class="content-table">
	<thead>
		<tr>
			<th class="w30p">Tipo de Etiqueta</th>
			<th class="w70p">Sintaxis LiquidJS</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>**Output**</td>
			<td>

```javascript
{{ user.name }}
```

</td>
		</tr>
        <tr>
            <td>**Logic (Control Flow)**</td>
            <td>

```javascript
{% if user.role == "admin" %}
  Welcome, Admin!
{% else %}
  Welcome, User!
{% endif %}
```

</td>
        </tr>
        <tr>
            <td>**Loops (For Statement)**
Iteración sobre un array</td>
            <td>

```javascript
{% for item in items %}
  {{ item.name }}
{% endfor %}
```

</td>
        </tr>
        <tr>
            <td>**Loops (For Statement)**
Usando Objeto Iterable</td>
            <td>

```javascript
{% for item in items %}
  {{ forloop.index }}: {{ item.name }}
{% endfor %}
```

</td>
        </tr>
        <tr>
            <td>**Filters**</td>
            <td>

```javascript
{{ "hello" | append: " world" }}
{{ 1000 | divided_by: 2 }}
{{ "LiquidJS" | upcase }}
```

</td>
        </tr>
        <tr>
            <td>**Date Formatting**</td>
            <td>

```javascript
{{ "now" | date: "%Y-%m-%d %H:%M:%S" }}
{{ "2025-02-07" | date: "%B %d, %Y" }}
```

</td>
        </tr>
        <tr>
            <td>**Assign and Capture**
Asignar variables dentro de plantillas</td>
            <td>

```javascript
{% assign greeting = "Hello" %}
{{ greeting }} World
```

</td>
        </tr>
        <tr>
            <td>**Assign and Capture**
Capturar valores multilínea</td>
            <td>

```javascript
{% capture message %}
  This is a multi-line text.
{% endcapture %}
{{ message }}
```

</td>
        </tr>
        <tr>
            <td>**Comments**</td>
            <td>

```javascript
{% comment %}
  This is a comment and will not be rendered.
{% endcomment %}
```

</td>
        </tr>
        <tr>
            <td>**Default Filters**
Mostrará el valor que establezca como predeterminado, si no se proporciona ningún valor.</td>
            <td>

```javascript
&lt;p&gt;Name: {{ user.name | default: "Guest" }}&lt;/p&gt;
```

</td>
        </tr>
        <tr>
            <td>**Conditionals with `unless`**
Funciona como lo opuesto a una sentencia `if`.
La lógica bajo un bloque `unless` solo se ejecutará si la condición es falsa.</td>
            <td>

```javascript
{% unless user.role == "admin" %}
  &lt;p&gt;You are not an Admin&lt;/p&gt;
{% endunless %}
```

</td>
        </tr>
        <tr>
            <td>**Case/When Conditions**</td>
            <td>

```javascript
{% case user.role %}
  {% when "admin" %}
    &lt;p&gt;Admin Page&lt;/p&gt;
  {% when "user" %}
    &lt;p&gt;User Page&lt;/p&gt;
  {% else %}
    &lt;p&gt;Unknown Role&lt;/p&gt;
{% endcase %}
```

</td>
        </tr>
        <tr>
            <td>**Raw Output**
Se usa para imprimir código Liquid sin renderizarlo. Generalmente, se usa con fines de documentación</td>
            <td>

```javascript
{% raw %}
  This is raw Liquid syntax: {{ user.name }}
{% endraw %}
```

</td>
        </tr>
        <tr>
            <td>**Array and Object Filters**</td>
            <td>

```javascript
&lt;p&gt;First Item: {{ items | first }}&lt;/p&gt;
&lt;p&gt;Item Count: {{ items | size }}&lt;/p&gt;
```

</td>
        </tr>
        <tr>
            <td>**Math Filters**
Para usar operadores matemáticos dentro de la plantilla</td>
            <td>

```javascript
&lt;p&gt;Discounted Price: {{ price | minus: 10 }}&lt;/p&gt;
&lt;p&gt;Total Price: {{ price | times: 1.1 }}&lt;/p&gt;
```

</td>
        </tr>
        <tr>
            <td>**Rendering Partial Templates**</td>
            <td>

```javascript
{% render 'header' %}
```

</td>
        </tr>
	</tbody>
</table>

> **Info:** Puede obtener más información sobre LiquidJS en su documentación oficial [aquí](https://liquidjs.com/).

#### Ejemplo de Código HTML con LiquidJS

El siguiente fragmento de código sirve como ejemplo para ilustrar el uso de LiquidJS en el código HTML para personalizar su plantilla.

**example.html**

```xml
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Dashboard - {{ user.name }}&lt;/title&gt;

&lt;/head&gt;
&lt;body&gt;

  &lt;!-- Header --&gt;
  &lt;header&gt;
    &lt;h1&gt;Hello, {{ user.name | default: "Guest" }}&lt;/h1&gt;
    {% if user.role == "admin" %}
      &lt;p class="admin"&gt;You have administrator access.&lt;/p&gt;
    {% else %}
      &lt;p class="user"&gt;Standard user access granted.&lt;/p&gt;
    {% endif %}
  &lt;/header&gt;

  &lt;!-- Items Section --&gt;
  &lt;section&gt;
    &lt;h2&gt;Your Items&lt;/h2&gt;
    &lt;ul&gt;
      {% for item in items %}
        &lt;li&gt;{{ forloop.index }}. {{ item.name }}&lt;/li&gt;
      {% endfor %}
    &lt;/ul&gt;
    &lt;p&gt; &lt;strong&gt;First Item:&lt;/strong&gt; {{ items | first | map: "name" }}&lt;/p&gt;
    &lt;p&gt; &lt;strong&gt;Total Items:&lt;/strong&gt; {{ items | size }}&lt;/p&gt;
  &lt;/section&gt;

  &lt;!-- Pricing Section --&gt;
  &lt;section&gt;
    &lt;h2&gt;Price Breakdown&lt;/h2&gt;
    &lt;p&gt;Original Price: ${{ price }}&lt;/p&gt;
    &lt;p&gt;After Discount ($10 off): ${{ price | minus: 10 }}&lt;/p&gt;
    &lt;p&gt;After Tax (10%): ${{ price | times: 1.1 }}&lt;/p&gt;
    &lt;p&gt;Half Price: ${{ price | divided_by: 2 }}&lt;/p&gt;
  &lt;/section&gt;

  &lt;!-- Time Section --&gt;
  &lt;section&gt;
    &lt;h2&gt;Date & Time&lt;/h2&gt;
    &lt;p&gt;Current Timestamp: {{ "now" | date: "%Y-%m-%d %H:%M:%S" }}&lt;/p&gt;
    &lt;p&gt;Next Billing Date: {{ "2025-02-07" | date: "%B %d, %Y" }}&lt;/p&gt;
  &lt;/section&gt;

  &lt;!-- Custom Message --&gt;
  &lt;section&gt;
    &lt;h2&gt;Message&lt;/h2&gt;
    {% assign greeting = "Hello" %}
    &lt;p&gt;{{ greeting }} {{ user.name }}!&lt;/p&gt;

   {% if custom_message %}
  &lt;div class="custom-message"&gt;
    {{ custom_message }}
  &lt;/div&gt;
{% else %}
  &lt;div class="custom-message"&gt;
    No custom message provided.
  &lt;/div&gt;
{% endif %}
  &lt;/section&gt;

  &lt;!-- User Role Case --&gt;
  &lt;section&gt;
    &lt;h2&gt;Role Based Content&lt;/h2&gt;
    {% case user.role %}
      {% when "admin" %}
        &lt;p&gt;You are on the &lt;strong&gt;Admin Dashboard&lt;/strong&gt;.&lt;/p&gt;
      {% when "user" %}
        &lt;p&gt;You are on the &lt;strong&gt;User Dashboard&lt;/strong&gt;.&lt;/p&gt;
      {% else %}
        &lt;p class="alert"&gt;Unknown role. Please contact support.&lt;/p&gt;
    {% endcase %}

    {% unless user.role == "admin" %}
      &lt;p class="alert"&gt;You are not an admin.&lt;/p&gt;
    {% endunless %}
  &lt;/section&gt;

  &lt;!-- Raw Display --&gt;
  &lt;section&gt;
    &lt;h2&gt;Liquid Syntax Example&lt;/h2&gt;
    {% raw %}
      To print user name: {{ user.name }}
    {% endraw %}
  &lt;/section&gt;

&lt;/body&gt;
&lt;/html&gt;

```

### Plantillas en Modo Borrador

Puede personalizar el código HTML, CSS y JavaScript según sus requisitos. Puede usar la sección JSON Data para pasar datos de entrada personalizados a la plantilla. 

![catalyst_smartbrowz_template_json](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_json.webp)

Para renderizar los cambios que realice en el editor, puede hacer clic en el botón **Save as Draft**.

![catalyst_smartbrowz_template_save_as_draft_button_first](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_save_as_draft_button_first.webp)

Esto le permitirá ver los cambios que realice en su plantilla sin afectar la versión publicada.

![catalyst_smartbrowz_template_draft_version](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_draft_version.webp)

Siempre puede ver la versión publicada de la plantilla haciendo clic en el botón **View Published Version**.

![catalyst_smartbrowz_template_published_view](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_published_view.webp)

Una vez que haya completado las ediciones requeridas, puede renderizarlas en vivo haciendo clic en el botón **Save & Publish**.

![catalyst_smartbrowz_template_published_view](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_published_view.webp)

Esta acción **eliminará la versión en vivo actual** y renderizará su borrador como la versión en vivo de la plantilla.

### Descartar Borradores

Si no está satisfecho con sus ediciones y desea eliminar todos los cambios en su borrador, es decir, restaurar su plantilla a su última versión publicada, simplemente puede descartar el borrador.

Para descartar un borrador:

1. Haga clic en el botón **Discard Draft**.
    ![catalyst_smartbrowz_templates_discard_draft](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_discard_draft.webp)

2. Haga clic en **Confirm** para descartar el borrador.
    ![catalyst_smartbrowz_templates_discard_draft_confirm](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_discard_draft_confirm.webp)

El borrador será eliminado. El código y las configuraciones que renderizan su plantilla a la última versión en vivo serán restaurados en el editor.

### Personalizar la Orientación y el Diseño de la Plantilla

Usando la sección **Settings**, puede proteger con contraseña su documento visual, estilizar el diseño y la orientación del documento y también decidir su formato de salida.
![catalyst_smartbrowz_template_settings](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_settings.webp)

En esta sección, use las diversas selecciones desplegables para personalizar las siguientes características de su plantilla:

#### Formato de Salida

Puede generar salidas para su plantilla en los siguientes formatos:

* PDF
* HTML (Rendered): El formato de salida **HTML (Rendered)** descarga la plantilla como código HTML. Todo el estilo, las configuraciones y la plantilla en sí serán descargables como código HTML.
* PNG, JPEG. 
![catalyst_smartbrowz_templates_output_format](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_output_format.webp)

#### Tamaño de Papel

SmartBrowz Templates le proporciona todas las opciones de tamaño de papel **ISO 216** incluyendo una opción *Custom* para diseñar el diseño de papel de su plantilla

![catalyst_smartbrowz_templates_paper_sizes](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_paper_sizes.webp)

#### Orientación

SmartBrowz Templates le proporciona la opción de elegir la orientación de su plantilla. Tiene la opción de generar su plantilla en orientación **Landscape** o **Portrait**.

![catalyst_smartbrowz_templates_paper_orientation](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_paper_orientation.webp)

#### Gráficos de Fondo

SmartBrowz Templates le proporciona la opción de **Enable** o **Disable** los gráficos de fondo para su plantilla.

![catalyst_smartbrowz_templates_drop_down](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_drop_down.webp)

#### Opciones de Estilo Avanzadas

Puede cambiar aún más la orientación de los márgenes de su plantilla, haciendo clic en **Show Advanced Styling Options**.
![catalyst_smartbrowz_template_advanced_ops](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_advanced_ops.webp)

> **Nota:** 

* Al configurar el *Header* y el *Footer* de su documento, puede proporcionar valores en el campo de entrada, o puede codificar su personalización en HTML seleccionando la opción **HTML Code**.

* Al ingresar valores para el *Header* y el *Footer*, asegúrese de proporcionar 10px o más para ver el cambio en la sección de vista previa.

### PDFs Protegidos con Contraseña

*Templates* le permite proteger con contraseña los documentos que se generan usando una plantilla. Puede establecer manualmente la contraseña para su plantilla, o puede codificar una lógica que instruya a Catalyst para establecer una contraseña dinámicamente.

> **Nota:** Para proteger con contraseña su documento visual, el *Output Format* de su documento debe ser PDF.

Para proteger PDFs con contraseña, haga clic en el toggle **Set Password for PDF**:
![catalyst_smartbrowz_templates_pwd_protect](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_pwd_protect.webp)

1. Hay dos formas en las que puede establecer una contraseña para su PDF:

    * De forma predeterminada, la opción **Set Password Manually** estará seleccionada. Elegir esta opción le permite establecer la contraseña para su PDF en la sección *Playground* del componente [PDF & Screenshot](https://docs.catalyst.zoho.com/es/smartbrowz/help/pdfnscreenshot/introduction/).
        ![catalyst_smartbrowz_templates_pwd_protect_depicts](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_pwd_protect_depicts.webp)

> **Nota:** También puede establecer manualmente la contraseña para su PDF usando esta [API](https://docs.catalyst.zoho.com/es/api/code-reference/smartbrowz/generate-pdfnscreenshottemplate/#PDF%26ScreenshotwithTemplateasInput) pasando su contraseña para el documento como un par clave-valor JSON "**password**" dentro del JSON "`pdf_options`".

    * Haga clic en la opción **Set Password Dynamically** para codificar una lógica personalizada que asegure que cada vez que se genere un PDF a partir de la plantilla, basándose en la lógica que codificó, se establecerá una contraseña para el documento automáticamente.
        ![catalyst_smartbrowz_templates_pwd_protect_dynamically](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_pwd_protect_dynamically.webp)

Para esta documentación de ayuda, hemos implementado el fragmento de código que se muestra a continuación:

**Sample Logic**

```javascript
module.exports = (jsonData) => {
    // Extraer las primeras cuatro letras de client.name
    const clientName = jsonData.client.data[0].name.trim(); // Eliminar espacios al inicio/final
    const firstNameLetters = clientName.substring(0, 4);
    // Extraer los últimos cuatro dígitos de client.phn
    const clientPhone = jsonData.client.data[0].phn.trim(); // Eliminar espacios al inicio/final
    const lastFourDigits = clientPhone.slice(-4);
    const password = ${firstNameLetters}${lastFourDigits};
    //así la contraseña será "Amel2782"

     return password;
};

```

El valor para la entrada `jsonData` se muestra a continuación:

**jsonData**

```json
{
    "address": {
        "name": "107 Traction Street,Green Ville",
        "postal": "South carolina-600028"
    },
    "client": {
        "data": [
            {
                "name": "Amelia Burrows",
                "phn": "+1-212-6782782",
                "start": "Monday,Feburary,28,2019",
                "end": "Monday,March,28,2019"
            }
        ]
    }
}

```

El documento PDF generado a partir de esta plantilla tendrá un patrón de contraseña que es una combinación de su nombre y los últimos dígitos de su número de teléfono.

2. Haga clic en **Save & Publish**, para aplicar la protección con contraseña a su plantilla.

> **Nota:** Si hace clic en **Save as Draft**, entonces la protección con contraseña no se aplicará a la versión en vivo de la plantilla.

Una vez que haya completado todas las personalizaciones de su plantilla, puede acceder a esta plantilla en cualquier momento desde el componente *Templates*.

![catalyst_smartbrowz_template_created](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_created.webp)