# Color and Content Customization

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

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

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

## 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 **Stores**. Then under *System*, choose **Cache Management**.
5. Refresh invalidated cache types.

| SECTION         | FIELD                        | DESCRIPTION                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| --------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|                 |                              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| Footer          | Displayed CMS block          | <p>The block displayed in the footer above copyright notice. </p><p></p>                                                                                                                                                                                                                                                                                                                                                                                                         |
| Mini-cart       | Promotion CMS block          | <p>The block 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 displayed in the cart bellow 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 displayed in the checkout shipping step bellow totals.</p><p>If nothing is chosen, there will be no CMS block displayed on the storefront.</p>                                                                                                                                                                                                                                                                                                                      |
| Checkout        | Billing promotion CMS block  | <p>The block displayed in the checkout billing step bellow totals.</p><p>If nothing is chosen, there will be no CMS block displayed on the storefront.</p>                                                                                                                                                                                                                                                                                                                       |
| Header and Menu | Menu to display              | <p>In this section, you can choose the menu you want to appear in the store. </p><p>If nothing is chosen, the menu with the <strong>new-main-menu</strong> identifier will appear on the storefront.</p>                                                                                                                                                                                                                                                                         |
| Header and Menu | Promotion CMS block          | <p>The contacts block 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 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          | <p>Attribute to display bellow product name on the product card. For an attribute to appear in the list, make sure it is "Visible on Catalog Pages on Storefront".</p><p><img src="https://scandiweb.atlassian.net/wiki/download/attachments/1695711539/Screen%20Shot%202019-12-19%20at%2013.07.14.png?version=1&#x26;modificationDate=1576753713156&#x26;cacheVersion=1&#x26;api=v2" alt=""></p><p>If nothing is chosen, the brand attribute will appear on the storefront.</p> |
| Cookie Popup    | Cookie Popup Text            | The text there is displayed in the cookie popup.                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| Cookie Popup    | Cookie Popup Read more Link  | The link there is used in the read more for cookie popup.                                                                                                                                                                                                                                                                                                                                                                                                                        |

###

### ❗️ 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://2879500093-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 %}