# Color and Content Customization

{% hint style="info" %}
**PRO TIP 🚀**

Use the test cases below to test your ScandiPWA App!
{% endhint %}

{% embed url="<https://youtu.be/7ElfPusEOm8>" %}
Color and content customization
{% endembed %}

## COLOR CUSTOMIZATION <a href="#colorandcontentcustomization-colorcustomization" id="colorandcontentcustomization-colorcustomization"></a>

ScandiPWA allows you to customize your website by changing the colors used in the theme. The setting is available for configuration on the store view level.

### To change the colors: <a href="#colorandcontentcustomization-tochangethecolors" id="colorandcontentcustomization-tochangethecolors"></a>

### Step 1: Enable color customization <a href="#colorandcontentcustomization-step1-enablecolorcustomization" id="colorandcontentcustomization-step1-enablecolorcustomization"></a>

1. On the Admin sidebar, tap **Stores**. Then under *Settings*, choose **Configuration**.
2. In the panel on the left under **ScandiPWA**, choose **Color customization**.
3. Expand the **Enable color customizations** tab, then choose **Yes.**

### Step 2: Choose primary and secondary colors <a href="#colorandcontentcustomization-step2-chooseprimaryandsecondarycolors" id="colorandcontentcustomization-step2-chooseprimaryandsecondarycolors"></a>

1. Expand the **Primary colors** tab, then choose the preferred colors.
2. Expand the **Secondary colors** tab, then choose the preferred colors (preferably grey colors).
3. When complete, tap **Save Configuration.**&#x20;

| COLOR                | LOCATION                                                                                                                                                                                                                                                                                          | DEFAULT VALUE |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| **Primary Colors**   |                                                                                                                                                                                                                                                                                                   |               |
| Base                 | <p>Button, Checkbox color</p><p><img src="https://scandiweb.atlassian.net/wiki/download/attachments/1695711539/Screen%20Shot%202019-12-19%20at%2010.36.40.png?version=1&#x26;modificationDate=1576744625024&#x26;cacheVersion=1&#x26;api=v2" alt=""></p>                                          | f26323        |
| Hover                | <p>Hover effects (i.e buttons)</p><p><img src="https://scandiweb.atlassian.net/wiki/download/attachments/1695711539/Screen%20Shot%202019-12-19%20at%2010.38.40.png?version=1&#x26;modificationDate=1576744737750&#x26;cacheVersion=1&#x26;api=v2" alt=""></p>                                     | d1490c        |
| Highlight            | <p>Accent background (i.e. mini-cart)</p><p><img src="https://scandiweb.atlassian.net/wiki/download/thumbnails/1695711539/Screen%20Shot%202019-12-19%20at%2010.39.30.png?version=1&#x26;modificationDate=1576744789156&#x26;cacheVersion=1&#x26;api=v2&#x26;width=350&#x26;height=60" alt=""></p> | f69e77        |
| **Secondary Colors** |                                                                                                                                                                                                                                                                                                   |               |
| Base                 | Breadcrumbs background, sections on product page![](https://scandiweb.atlassian.net/wiki/download/attachments/1695711539/Screen%20Shot%202019-12-19%20at%2010.42.55.png?version=1\&modificationDate=1576744992844\&cacheVersion=1\&api=v2)                                                        | f3f3f3        |
| Hover                | Hover effects (i.e. in checkout payments)![](https://scandiweb.atlassian.net/wiki/download/attachments/1695711539/Screen%20Shot%202019-12-19%20at%2010.44.13.png?version=1\&modificationDate=1576745071369\&cacheVersion=1\&api=v2)                                                               | 949494        |
| Highlight            | Accent backgrounds (i.e. even tables rows)![](https://scandiweb.atlassian.net/wiki/download/attachments/1695711539/Screen%20Shot%202019-12-19%20at%2010.56.20.png?version=1\&modificationDate=1576745796684\&cacheVersion=1\&api=v2)                                                              | f3f3f3d1      |

### Step 3: Refresh invalidated cache types <a href="#colorandcontentcustomization-step3-refreshinvalidatedcachetypes" id="colorandcontentcustomization-step3-refreshinvalidatedcachetypes"></a>

1. On the Admin sidebar, tap **Stores**. Then under *System*, choose **Cache Management**.
2. Refresh invalidated cache types.

## CONTENT CUSTOMIZATION <a href="#colorandcontentcustomization-contentcustomization" id="colorandcontentcustomization-contentcustomization"></a>

With the ScandiPWA theme, you can customize your store by adding different content to the CMS blocks across the website. Content customization is available on the store view level.&#x20;

If no CMS block is selected in the configurations, the default CMS blocks will be shown on the storefront instead.

### To edit the content: <a href="#colorandcontentcustomization-toeditthecontent" id="colorandcontentcustomization-toeditthecontent"></a>

1. On the Admin sidebar, tap **Stores**. Then under *Settings*, choose **Configuration**.
2. In the panel on the left under **SnandiPWA**, choose **Content customization**.
3. Expand the section where you want to edit the CMS block, then choose the block you want to appear on the storefront.&#x20;
4. On the Admin sidebar, tap **System**. Then under *Tools*, choose **Cache Management**.
5. Refresh invalidated cache types.

| SECTION         | FIELD                        | DESCRIPTION                                                                                                                                                                                                                                                                                                                                     |
| --------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|                 |                              |                                                                                                                                                                                                                                                                                                                                                 |
| Footer          | Displayed CMS block          | <p>The block is displayed in the footer above the copyright notice. </p><p></p>                                                                                                                                                                                                                                                                 |
| Mini-cart       | Promotion CMS block          | <p>The block is displayed in the mini-cart above the list of products.</p><p><img src="https://scandiweb.atlassian.net/wiki/download/thumbnails/1695711539/Screen%20Shot%202019-12-19%20at%2010.39.30.png?version=1&#x26;modificationDate=1576744789156&#x26;cacheVersion=1&#x26;api=v2&#x26;width=400&#x26;height=69" alt=""></p>              |
| Cart            | Promotion CMS block          | <p>The block is displayed in the cart below cart totals.</p><p><img src="https://scandiweb.atlassian.net/wiki/download/attachments/1695711539/Screen%20Shot%202019-12-19%20at%2012.43.54.png?version=2&#x26;modificationDate=1576753181521&#x26;cacheVersion=1&#x26;api=v2" alt=""></p>                                                         |
| Checkout        | Shipping promotion CMS block | <p>The block is displayed in the checkout shipping step below totals.</p><p>If nothing is chosen, there will be no CMS block displayed on the storefront.</p>                                                                                                                                                                                   |
| Checkout        | Billing promotion CMS block  | The block is displayed in the checkout billing step below totals. If nothing is chosen, there will be no CMS block displayed on the storefront.                                                                                                                                                                                                 |
| Header and Menu | Menu to display              | In this section, you can choose the menu you want to appear in the store. If nothing is chosen, the menu with the **new-main-menu** identifier will appear on the storefront.                                                                                                                                                                   |
| Header and Menu | Promotion CMS block          | <p>The contacts block is displayed above the menu.</p><p>By default, it includes a telephone number and email.</p><p><img src="https://scandiweb.atlassian.net/wiki/download/attachments/1695711539/Screenshot%202020-10-06%20at%2016.07.33.png?version=1&#x26;modificationDate=1601989656520&#x26;cacheVersion=1&#x26;api=v2" alt=""></p>      |
| Header and Menu | Promotion CMS block          | <p>The block is displayed below the menu items.</p><p>By default, it includes links to About Us and Contacts pages.</p><p><img src="https://scandiweb.atlassian.net/wiki/download/attachments/1695711539/Screenshot%202020-10-06%20at%2016.07.49.png?version=1&#x26;modificationDate=1601989672380&#x26;cacheVersion=1&#x26;api=v2" alt=""></p> |
| Product list    | Displayed attribute          | It's the attribute displayed below the product name on the product card. For an attribute to appear in the list, make sure it is "Visible on Catalog Pages on Storefront". If nothing is chosen, the brand attribute will appear on the storefront.                                                                                             |
| Cookie Popup    | Cookie Popup Text            | The text that is displayed in the cookie popup.                                                                                                                                                                                                                                                                                                 |
| Cookie Popup    | Cookie Popup Read more Link  | The link that is used in the *read more* cookie popup text.                                                                                                                                                                                                                                                                                     |

###

### ❗️ To use the same styles for your new CMS blocks on the front-end, use the following HTML codes for your blocks:

1. Footer (Displayed CMS block)

```markup
<div class="Footer-Content">
    <div class="ContentWrapper Footer-Columns">
        <div class="Footer-Column">
            <h3 class="Footer-ColumnTitle">About</h3>
            <div class="Footer-ColumnContent">
                <a class=" Footer-ColumnItem " href="/default/about-us">About Us</a>
            </div>
        </div>
        <div class="Footer-Column">
            <h3 class="Footer-ColumnTitle">Additional info</h3>
            <div class="Footer-ColumnContent">
                <a class=" Footer-ColumnItem " href="/default/privacy-policy-cookie-restriction-mode">Privacy Policy</a>
                <a class=" Footer-ColumnItem " href="/default/terms-and-conditions">Terms of use</a>
                <a class=" Footer-ColumnItem " href="/default/privacy-policy-cookie-restriction-mode">Use of Cookies</a>
            </div>
        </div>
        <div class="Footer-Column">
            <h3 class="Footer-ColumnTitle">Popular categories</h3>
            <div class="Footer-ColumnContent">
                <a class=" Footer-ColumnItem " href="/default/women">Women</a>
                <a class=" Footer-ColumnItem " href="/default/men">Men</a>
                <a class=" Footer-ColumnItem " href="/default/accessories">Accessories</a>
            </div>
        </div>
        <div class="Footer-Column">
            <h3 class="Footer-ColumnTitle">Follow</h3>
            <div class="Footer-ColumnContent Footer-ColumnContent_direction_horizontal">
                <a href="https://twitter.com/scandipwa?lang=en" class=" Footer-ColumnItem Footer-ColumnItem_type_image">
                    <div class="Image Image_ratio_square Image_imageStatus_2 Image_hasSrc Footer-ColumnItemImage ">
                        <div class="Image Image_ratio_square Image_imageStatus_1 Image_hasSrc  ">
                            <img src="https://scandipwapmrev.indvp.com/media/wysiwyg/twitter_1_.png" alt=""
                                loading="lazy" class="Image-Image" style="width: 100%; height: 100%;">
                        </div>
                    </div>
                </a><a href="https://www.youtube.com/channel/UCvnxo7rh5NRwvMHtJga9fww"
                    class=" Footer-ColumnItem Footer-ColumnItem_type_image">
                    <div class="Image Image_ratio_square Image_imageStatus_2 Image_hasSrc Footer-ColumnItemImage ">
                        <div
                            class="Image Image_ratio_square Image_imageStatus_1 Image_hasSrc  Footer-ColumnItem_type_image">
                            <img src="https://scandipwapmrev.indvp.com/media/wysiwyg/youtube.png" alt="" loading="lazy"
                                class="Image-Image" style="width: 100%; height: 100%;"></div>
                    </div>
                </a></div>
        </div>
    </div>
</div>
```

2\. Mini-cart (Promotion CMS block)

```markup
<p class="CartOverlay-Promo">Free shipping on any order with code <b>SCANDIPWA</b></p>
```

3\. Cart (Promotion CMS block)

```markup
<figure class="CartPage-PromoBlock">
    <figcaption class="CartPage-PromoText">Free shipping on any order with code <b>SCANDIPWA</b>
    </figcaption>
</figure>
```

4\. Header and Menu (Promotion CMS block) - the contacts block displayed above the menu.

```markup
<dl class="contacts-wrapper">
    <dt>Telephone:</dt>
        <dd>
            <a href="tel:983829842">+0 (983) 829842</a>
        </dd>
    <dt>Mail:</dt>
        <dd>
            <a href="mailto:info@scandipwa.com">info@scandipwa.com</a>
        </dd>
</dl>
```

5\. Header and Menu (Promotion CMS block) - the contacts block displayed below the menu items.

```markup
<div class="Menu-Promotion">
   <h3 class="Menu-PageLink"><a class=" Menu-Link" href="/about-us">ABOUT US</a></h3>
   <h3 class="Menu-PageLink"><a class=" Menu-Link" href="/about-us">CONTACTS</a></h3>
   <div class="Menu-Social">
      <div class="CmsBlock-Wrapper">
         <h3 class="list-heading">Social</h3>
         <ul>
            <li>
               <a href="https://www.instagram.com/scandiweb/" target="_blank" rel="noopener">
                  <div class="Image Image_ratio_square Image_imageStatus_1 Image_hasSrc  "><img src="https://scandipwa.local/media/wysiwyg/social/instagram.svg" alt="instagram" loading="lazy" class="Image-Image" style="width: 100%; height: 100%;"></div>
               </a>
            </li>
            <li>
               <a href="https://www.facebook.com/scandiweb" target="_blank" rel="noopener">
                  <div class="Image Image_ratio_square Image_imageStatus_1 Image_hasSrc  "><img src="https://scandipwa.local/media/wysiwyg/social/facebook.svg" alt="facebook" loading="lazy" class="Image-Image" style="width: 100%; height: 100%;"></div>
               </a>
            </li>
            <li>
               <a href="https://www.twitter.com/scandiweb/" target="_blank" rel="noopener">
                  <div class="Image Image_ratio_square Image_imageStatus_1 Image_hasSrc  "><img src="https://scandipwa.local/media/wysiwyg/social/twitter.svg" alt="twitter" loading="lazy" class="Image-Image" style="width: 100%; height: 100%;"></div>
               </a>
            </li>
         </ul>
      </div>
   </div>
</div>
```

{% hint style="success" %}
**TEST YOUR SCANDIPWA APP**

To verify the support for this section, use the following **test cases:**
{% endhint %}

{% file src="<https://3349962438-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJEKoY_RLJk3C3Fcnu6%2F-M_W2G-27UDLZG0REF_f%2F-M__eEFpBL0bnEZb1K2N%2Fscandipwa_%20ScandiPWA%20-%20Color%20and%20Content%20Customization.pdf?alt=media&token=6b4a8de9-2d11-44f3-97f7-bc3d203207cd>" %}
Color and Content Cusomization - Test Cases
{% endfile %}