How to customize the description

Adding the text of your description 

The product description in ProductPage is saved with some default styles to help you format it easier without any coding knowledge.

For easier  formatting of the description an external HTML editor might be more suitable than OpenCart's. A nice HTML editor is TinyMCE.*

How to use an external HTML editor

You can use any HTML editor that you feel comfortable with. Here's how to transfer the text in OpenCart:

  1. Enter your description text in the editor
  2. Click on "View Source" and copy all of the text
  3. Log on to the OpenCart Admin
  4. Go to Extensions>Modules
  5. Choose Edit for ProductPage Admin panel
  6. In the Description area, click on "Source" and paste all of the code that you have copied
  7. Click on "Source" again to view the text 

How to Add pictures

  1. Click on the "Image" icon in Description area
  2. In the pop that comes up click on "Browse server"
    pp-add-image-1.jpg
  3. A third pop-up comes up. Click on "Upload".
    pp-add-image-2.jpg
  4. Make sure to delete the values for width and height. Otherwise your image won't be styled accordingly.
    pp-add-image-3.jpg

Using the built-in styles

There are several built-in styles for some of the elements in the product description. 

    1. Headings with text on the right. Like the first paragraph in the ProductPage demo. To achieve the same effect, format the heading as Heading3. 

      To do this in the OpenCart HTML editor click on "Source" and paste this line of code:
      <h3> Your heading text goes here </h3>
      pp-h3-ex-2-1.jpg
      Click on "Source" again to exit code view. Then press "Enter". The text you add will automatically go to the right of the heading text. 
    2. Separating content in columns. In the OpenCart HTML editor click on "Source" again. Type<div> to begin a column. Type </div> to end a column. Click on "Source" again to exit code view.
      pp-columns.jpg
    3. Headings of different size.  Like the second section in the ProductPage demo. To make a heading look like one of the headings on the right, paste the corresponding code on the left in the "Source" view of the OpenCart HTML editor. 


      <h1>Heading 1 </h1>



      <h2> Heading 2 </h2>


      <h3> Heading 3 </h3>

      <h4> Heading 4 </h4>

      <h5> Heading 5 </h5>

       pp-headings.jpg

*Please  note, that you can't upload pictures in the TinyMCE editor. 

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk