Color and Content Customization
Last updated
Last updated
PRO TIP 🚀
Use the test cases below to test your ScandiPWA App!
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.
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.
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.
On the Admin sidebar, tap Stores. Then under System, choose Cache Management.
Refresh invalidated cache types.
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.
On the Admin sidebar, tap Stores. Then under Settings, choose Configuration.
In the panel on the left under ScandiPWA, 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 System. Then under Tools, choose Cache Management.
Refresh invalidated cache types.
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.
TEST YOUR SCANDIPWA APP
To verify the support for this section, use the following test cases:
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
SECTION
FIELD
DESCRIPTION
Footer
Displayed CMS block
The block is displayed in the footer above the copyright notice.
Mini-cart
Promotion CMS block
The block is displayed in the mini-cart above the list of products.
Cart
Promotion CMS block
The block is displayed in the cart below cart totals.
Checkout
Shipping promotion CMS block
The block is displayed in the checkout shipping step below totals.
If nothing is chosen, there will be no CMS block displayed on the storefront.
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
The contacts block is displayed above the menu.
By default, it includes a telephone number and email.
Header and Menu
Promotion CMS block
The block is displayed below the menu items.
By default, it includes links to About Us and Contacts pages.
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.
Breadcrumbs background, sections on product page
Hover effects (i.e. in checkout payments)
Accent backgrounds (i.e. even tables rows)
