# My Account Templates Installation

There are four files in the package:

1. BricksCart.zip child theme (My Account Edition only)
2. my-account-templates.zip
3. brickscart-myaccount-templates-css-variables.json
4. color-palette-brickscart.json

### 1. Install BricksCart child theme

To do that, Go to Dashboard > Click on Appearance/Theme > Click 'Add New Theme' > Upload Theme > Choose File > Select the file named "**BricksCart.zip**" > Click on 'Install Now' > Activate Now.

### 2. Setup My Account Page:

First, go to pages > Hover over My account > click on 'Edit with Bricks' (as shown in the screenshot below):

<figure><img src="https://4224244206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbdQDdmUvg3amDzAtrSok%2Fuploads%2FBh1DJB1fSIOr9jDDynnL%2FMyAccount%20-%20Edit-with-Bricks.png?alt=media&#x26;token=5995ebb9-4467-4cab-9160-ce8b003abb84" alt=""><figcaption></figcaption></figure>

Now copy the JSON below:

{% code overflow="wrap" %}

```json

{"content":[{"id":"htgbmo","name":"section","parent":0,"children":["oqzgcc"],"settings":{"_cssGlobalClasses":[],"_background":{"color":{"hex":"#f6f5f3","id":"gmbxra","name":"Color #7","raw":"var(--bc-light-beige)"}}}},{"id":"oqzgcc","name":"container","parent":"htgbmo","children":["ermhrp"],"settings":{"_cssGlobalClasses":[]}},{"id":"ermhrp","name":"woocommerce-account-page","parent":"oqzgcc","children":[],"settings":[]}],"source":"bricksCopiedElements","sourceUrl":"https://brickscart.brickspixel.com","version":"1.11.1.1","globalClasses":[],"globalElements":[]}
```

{% endcode %}

Now, click on the 'paste (all)' and save changes, as shown in the screenshot below:Comment

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTEOTdBuzJYunyfjIvVdq%2Fuploads%2F2jNVbwv2vGLIP4j73t0F%2FPaste-JSON-in-Edit-with-Bricks.png?alt=media&#x26;token=aa546728-4b6a-44e4-973b-c40c3933a4eb" alt=""><figcaption></figcaption></figure>

### 2. Import CSS Variables

Now import BricksCart css variables and css classes:

On the same page where you are > Click on 'Classes/Variables' icon > click Variables > click on Import icon > select the file named "**brickscart-myaccount-templates-css-variables.json**" OR you can drag and drop file as well. Follow the screenshots below:

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTEOTdBuzJYunyfjIvVdq%2Fuploads%2Fd343pY340CTP6zVqKpcX%2Fvariable-import-doc-src-1.png?alt=media&#x26;token=7f961497-8b91-441b-a016-1e1d9ef35c7f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTEOTdBuzJYunyfjIvVdq%2Fuploads%2FHwJoIeuBhUNbwg8icYnn%2Fvariable-import-doc-src-3.png?alt=media&#x26;token=d930a37f-2836-4416-8ff5-374b2cb34956" alt=""><figcaption></figcaption></figure>

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTEOTdBuzJYunyfjIvVdq%2Fuploads%2Fwg5GUeSySUis1taLTs75%2Fvariable-import-doc-src-4.png?alt=media&#x26;token=e8e6bddb-a337-4467-ab6f-3b489601f4e8" alt=""><figcaption></figcaption></figure>

Select the CSS Variables file and import it.

### Import BricksCart Color Palette:

Go to any page, we can use Home page or any other > Click on "Edit with Bricks" > Add a new section on the canvas > open section settings > open style tab > open typography toggle > click on color picker option > click on '+' icon > click on 'import' icon > select the file named "**color-palette-brickscart.json**"&#x20;

### 3. Import Templates

To install all the templates, go to Dashboard > Hover over Bricks > click on the 'Templates' > click on 'import' > click on 'choose file' > select the file named '**my-account-templates.zip**'

Follow the instructions below:

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTEOTdBuzJYunyfjIvVdq%2Fuploads%2FhmxOaVX3WkNH4BF1ZgNh%2Fimport-tem-src-1.png?alt=media&#x26;token=88aa08a4-f5b3-4f86-b495-f759aed2e537" alt=""><figcaption></figcaption></figure>

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTEOTdBuzJYunyfjIvVdq%2Fuploads%2Fy5vn7M7KPilNcFbUDmJi%2Fimport-temp-src-2.png?alt=media&#x26;token=ddb65839-a83c-4a0f-b873-073a2016f84e" alt=""><figcaption></figcaption></figure>

Miscellanous: Make sure you have enabled the woocommerce “Notice” element in the Bricks>settings>woocommerce>Miscellaneous.

#### **Congratulations! 🎉  You  have done the job successfully.**