============================================================
PART 2 — STYLE FILE (CSS)
Copy only the code between STYLE START and STYLE END.
============================================================
/* STYLE START */
#sap-global-header {
--sap-header-white: #fffdf8;
--sap-header-ink: #171717;
--sap-header-muted: #514c47;
--sap-header-blue: #0033cc;
--sap-header-gold: #d19a38;
--sap-header-line: #d9d0c4;
position: relative;
z-index: 30;
width: 100%;
color: var(--sap-header-ink);
font-family: Montserrat, Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
#sap-global-header,
#sap-global-header * {
box-sizing: border-box;
}
#sap-global-header a {
color: inherit;
text-decoration: none;
}
#sap-global-header a:focus-visible,
#sap-global-header summary:focus-visible {
outline: 3px solid var(--sap-header-gold);
outline-offset: 4px;
}
#sap-global-header .sap-global-shell {
width: min(1180px, calc(100% - 48px));
margin-inline: auto;
}
#sap-global-header .sap-global-announcement {
background: var(--sap-header-ink);
color: #ffffff;
padding: 10px 18px;
text-align: center;
font-size: 11px;
font-weight: 700;
letter-spacing: .11em;
line-height: 18px;
text-transform: uppercase;
}
#sap-global-header .sap-global-navigation {
position: relative;
z-index: 31;
border-bottom: 1px solid var(--sap-header-line);
background: var(--sap-header-white);
}
#sap-global-header .sap-global-nav-desktop {
display: flex;
min-height: 58px;
align-items: center;
justify-content: center;
gap: clamp(18px, 3vw, 38px);
font-size: 13px;
font-weight: 700;
}
#sap-global-header .sap-global-nav-desktop > a,
#sap-global-header .sap-global-nav-desktop > details > summary {
display: flex;
min-height: 58px;
align-items: center;
cursor: pointer;
list-style: none;
}
#sap-global-header summary::-webkit-details-marker {
display: none;
}
#sap-global-header .sap-global-nav-desktop a:hover,
#sap-global-header .sap-global-nav-desktop summary:hover {
color: var(--sap-header-blue);
}
#sap-global-header .sap-global-colour-menu {
position: relative;
}
#sap-global-header .sap-global-colour-menu summary::after {
content: "+";
margin-left: 7px;
color: var(--sap-header-blue);
font-size: 17px;
font-weight: 400;
}
#sap-global-header .sap-global-colour-menu[open] summary::after {
content: "−";
}
#sap-global-header .sap-global-colour-dropdown {
position: absolute;
top: 50px;
left: 50%;
display: grid;
width: 420px;
grid-template-columns: 1fr 1fr;
gap: 2px 28px;
transform: translateX(-50%);
border: 1px solid var(--sap-header-line);
background: var(--sap-header-white);
box-shadow: 0 20px 40px rgba(25, 20, 15, .14);
padding: 18px 22px;
}
#sap-global-header .sap-global-colour-dropdown a {
padding: 8px 0;
color: var(--sap-header-muted);
font-weight: 500;
}
#sap-global-header .sap-global-nav-mobile {
display: none;
}
@media (max-width: 960px) {
#sap-global-header .sap-global-nav-desktop {
gap: 20px;
}
}
@media (max-width: 720px) {
#sap-global-header .sap-global-shell {
width: min(100% - 32px, 620px);
}
#sap-global-header .sap-global-nav-desktop {
display: none;
}
#sap-global-header .sap-global-nav-mobile {
display: block;
}
#sap-global-header .sap-global-nav-mobile > summary {
display: flex;
min-height: 54px;
align-items: center;
justify-content: space-between;
cursor: pointer;
list-style: none;
font-size: 13px;
font-weight: 700;
}
#sap-global-header .sap-global-nav-mobile > summary::after {
content: "+";
color: var(--sap-header-blue);
font-size: 21px;
font-weight: 400;
}
#sap-global-header .sap-global-nav-mobile[open] > summary::after {
content: "−";
}
#sap-global-header .sap-global-mobile-links {
display: grid;
gap: 0;
border-top: 1px solid var(--sap-header-line);
padding: 8px 0 17px;
}
#sap-global-header .sap-global-mobile-links a {
padding: 8px 0;
color: var(--sap-header-muted);
font-size: 13px;
font-weight: 600;
}
#sap-global-header .sap-global-mobile-label {
margin-top: 6px;
color: var(--sap-header-ink);
font-size: 11px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
}
@media (max-width: 520px) {
#sap-global-header .sap-global-announcement {
padding-inline: 12px;
font-size: 9px;
}
}
/* STYLE END */
============================================================
PART 3 — HOMEPAGE CONTENT STYLE AND SIZE
============================================================
Site body font
- Font family: Montserrat, Arial, sans-serif
- Base size: 16px
- Base line height: 1.6 (25.6px)
- Main background: #f6f1e8
- Main text: #171717
- Secondary paragraph text: #514c47
Homepage introductory paragraph shown in the screenshot
- Font: Montserrat
- Desktop size: 17px
- Mobile size: 16px
- Weight: 400 (regular)
- Line height: 1.65 (about 28px)
- Colour: #514c47
- Maximum text width: 640px
Normal section/category description paragraph
- Font: Montserrat
- Desktop size: 17px
- Mobile size: 16px
- Weight: 400 (regular)
- Line height: 1.75 (about 30px)
- Colour: #514c47
- Recommended maximum width: 710px
Large section heading
- Font: Georgia, Times New Roman, serif
- Responsive size: 34px to 56px
- Weight: 400 (regular)
- Line height: 1.06
- Letter spacing: -0.025em
Small uppercase label above a heading
- Font: Montserrat
- Size: 12px
- Weight: 700 (bold)
- Line height: 1.4
- Letter spacing: 0.15em
- Text transform: uppercase
- Colour: #0033cc
Navigation text
- Font: Montserrat
- Size: 13px
- Weight: 700
- Desktop menu height: 58px
Announcement text
- Font: Montserrat
- Desktop size: 11px
- Mobile size: 9px
- Weight: 700
- Letter spacing: 0.11em
- Text transform: uppercase
OPTIONAL CSS FOR CATEGORY DESCRIPTION TEXT
Add this to the global Style file if category descriptions need to match the homepage.
.ec-store .grid-category__description,
.ec-store .grid-category__description p {
color: #514c47;
font-family: Montserrat, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 1.75;
}
@media (max-width: 520px) {
.ec-store .grid-category__description,
.ec-store .grid-category__description p {
font-size: 16px;
}
}
Delivery Options
Tell your customers about your delivery options. Provide them with information about expected delivery time and any additional services they can opt for, such as express shipping or package tracking.
Returns: Simple as 1-2-3
In-Store Returns
Tell customers about your return options. For example, if they can return items to any physical store.
Online Returns
Offer customers to choose an item they want to return, print a prepaid label, and drop it at the post office.
Express Pickup
If it’s possible to call or fill out a form for courier pickup, offer customers this option.
Product Exchange
If you allow product exchanges, it can be a nice alternative to refunds. Explain to your customers how to choose a better size or give any other instructions they may need.