Color and Content Customization
COLOR CUSTOMIZATION
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:
Step 1: Enable color customization
On the Admin sidebar, tap Stores. Then under Settings, choose Configuration.
In the panel on the left under ScandiPWA, choose Color customization.
Expand the Enable color customizations tab, then choose Yes.
Step 2: Choose primary and secondary colors
Expand the Primary colors tab, then choose the preferred colors.
Expand the Secondary colors tab, then choose the preferred colors (preferably grey colors).
When complete, tap Save Configuration.
COLOR | LOCATION | DEFAULT VALUE |
Primary Colors | ||
Base | Button, Checkbox color | f26323 |
Hover | Hover effects (i.e buttons) | d1490c |
Highlight | Accent background (i.e. mini-cart) | f69e77 |
Secondary Colors | ||
Base | f3f3f3 | |
Hover | 949494 | |
Highlight | f3f3f3d1 |
Step 3: Refresh invalidated cache types
On the Admin sidebar, tap Stores. Then under System, choose Cache Management.
Refresh invalidated cache types.
CONTENT CUSTOMIZATION
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.
If no CMS block is selected in the configurations, the default CMS blocks will be shown on the storefront instead.
To edit the content:
On the Admin sidebar, tap Stores. Then under Settings, choose Configuration.
In the panel on the left under SnandiPWA, choose Content customization.
Expand the section where you want to edit the CMS block, then choose the block you want to appear on the storefront.
On the Admin sidebar, tap Stores. Then under System, choose Cache Management.
Refresh invalidated cache types.
SECTION | FIELD | DESCRIPTION |
Footer | Displayed CMS block | The block displayed in the footer above copyright notice. |
Mini-cart | Promotion CMS block | The block displayed in the mini-cart above the list of products. |
Cart | Promotion CMS block | The block displayed in the cart bellow cart totals. |
Checkout | Shipping promotion CMS block | The block displayed in the checkout shipping step bellow totals. If nothing is chosen, there will be no CMS block displayed on the storefront. |
Checkout | Billing promotion CMS block | The block displayed in the checkout billing step bellow 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 | The contacts block displayed above the menu. By default, it includes a telephone number and email. |
Header and Menu | Promotion CMS block | The block displayed below the menu items. By default, it includes links to About Us and Contacts pages. |
Product list | Displayed attribute | 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". If nothing is chosen, the brand attribute will appear on the storefront. |
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:
Footer (Displayed CMS block)
2. Mini-cart (Promotion CMS block)
3. Cart (Promotion CMS block)
4. Header and Menu (Promotion CMS block) - the contacts block displayed above the menu.
5. Header and Menu (Promotion CMS block) - the contacts block displayed below the menu items.
Last updated
