🪄ChatGTP Template Creator

How to Create a Custom Template Using ChatGPT

  1. Access the Template Creator:

  2. Describe Your Desired Template or Use Screenshots for Reference:

    • In the chat, describe in detail the template you want to create. Provide as many details and instructions as possible to ensure you get the expected result. Include specific elements, layout preferences, styling details, and any other relevant information.

    • You can also ask ChatGPT to generate a template similar to the one shown in your attached screenshots.

  3. Save and Install the Template:

  4. Review and Refine:

    • Check the result on your website to see if it meets your expectations.

    • If you need any changes, return to the ChatGPT conversation and request the necessary modifications.

    • Repeat this process until you are satisfied with the final template.

Please note that ChatGPT may make errors and generate invalid code. Ensure your site functions properly after installing your template by thoroughly auditing your code if possible.

Example with screenshot

Prompt examples

  1. Compact list layout

Template Name: My compact list

Layout: Compact list

Columns:
1. Product Image Column. Maximum height: 50px. Maximum width: 90px. Affiliate link on the image. Center the image.
2. Product Title Column. Affiliate link on the title. Truncate long product titles to 7 words max.
3. Product Price Column. Price color: red. Display old price (if available) below the current price. Old price color: grey, strikethrough.
4. Merchant Logo Column. Maximum logo height: 20px. Hide this column on mobile devices.
5. Buy Now Button Column. Button color: blue. Display merchant domain below the button. Merchant domain font: grey, small. Center the button and merchant domain.

Features:
- Center all content in columns for mobile devices.
- All affiliate URLs include `target="_blank"` and `rel="nofollow"`.
- Apply alt text for all images.
- Add a thin, light grey border at the bottom of each list item, except the last one.
- Ensure the template is responsive for mobile devices. One column on mobile devices.
- Add at the bottom (small font): "Prices and availability are subject to change. Last updated: [Last Update]".
  1. Price comparison

Template Name: My price comparison

This template is designed for price comparison of the same product from different merchants. It features a clean and user-friendly layout to help users quickly compare prices and make informed purchasing decisions.

Layout:

1. Left column: 
- Displays the image of the first product.
- The image is clickable, leading to the product's affiliate link.

2. Right column:
- Product Title. Displays the title of the first product in an <h2> tag for prominence.
- Price Comparison Table. A compact table that lists all available offers. Each row contains: 
	- The merchant's small icon and domain name.
	- The price of the product in bold font.
	- A "See it" button.

Stylings:

Table Styling:
- The price comparison table is bordered.
- Each row has a hover effect.
- The price cell has a very light green background color to highlight it. Centered.
- Remove margin and padding from table cells.
- Remove the table header.
- Set buttons to full column width.

Last updated