Sections · Placket 1.0.0
Header, footer and announcement bar
These three sections appear on every page. The announcement bar and header live in the header group, and the footer lives in the footer group. To edit them, open Online Store > Themes > Customize and select the Header or Footer group at the top or bottom of any page.
Announcement bar
Shows a short message above the header, such as a shipping note or a sale notice. Each message is a block. With two or more messages the bar can rotate automatically or show arrows and a counter.
Editor name: Announcement bar. Where you can add it: The header section group. Blocks: up to 5.
Settings
Behavior
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Rotate messages automatically | On or off | Off | Only applies with two or more messages. Pauses on hover and focus, and never runs for visitors who prefer reduced motion. |
| Change message every | 3 to 10 s | 5 s | |
| Show arrows, counter and pause button | On or off | On | Only shown with two or more messages. |
| Show on the home page only | On or off | Off |
Style
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Color scheme | Any color scheme | Scheme 3 | |
| Text size | 11 to 16 px | 13 px | Mobile is 0.5px smaller. |
Spacing: Top padding (12 px, 0 to 200 px), Bottom padding (12 px, 0 to 200 px). These add space above and below the section.
Blocks
Block: Announcement (up to 5)
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Text | Text (italic word allowed) | Welcome to our store | |
| Link text | Text | Empty | Shown after the text, underlined. Leave empty for a message without a link. |
| Link | Link | Empty |
Tips
- Keep messages short. Text size goes from 11 to 16 px.
- Turn on Show on the home page only if the message does not apply to other pages.
- Rotation never runs for visitors who set their device to reduce motion.
- The announcement bar sits in the header group. If you removed it, select Add section in the header group and pick Announcement bar.
Header
The header holds the logo, main menu, search, account and cart. It supports a mega menu, menu promos, a mobile menu drawer, a search drawer and country and language selectors.
Editor name: Header. Where you can add it: The header section group. Blocks: up to 18 (up to 6 Mega menu panels and up to 12 Menu promos).
Settings
Logo
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Logo image | Image | Empty | Leave empty to show the store name in the heading font. |
| Text logo size, desktop | 24 to 80 px | 52 px | |
| Text logo size, mobile | 20 to 48 px | 34 px | |
| Image logo width, desktop | 60 to 320 px | 160 px | |
| Image logo width, mobile | 60 to 200 px | 110 px |
Menu
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Main menu | Menu | main-menu | |
| Layout | Logo centered, main menu on its own row; Logo left, main menu beside it; Main menu left, logo centered; Main menu split around centered logo | Logo centered, main menu on its own row | Split: the first half of the menu items sit left of the logo, the rest right of it (three left and two right for five items). |
| Main menu alignment | Left; Center | Center | Only for the layout with the menu on its own row. |
| Main menu text size | 13 to 18 px | 15 px | |
| Space between main menu items | 16 to 64 px | 48 px | Split layout: the gap between items on each side of the logo. |
| Show lines above and below the main menu | On or off | On | In the split layout this draws a thin line under the utility row and under the main row, in the subheading color at low strength. |
Icons and links
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Show text next to icons on desktop | On or off | On | Search, Account and Cart. Not used when the utility row is on, where the labels are always shown. |
| Show utility row above the main menu | On or off | Off | Split layout only. Country selector on the left, and Search, Account and Bag with labels on the right. The main row then carries no icons. Shown when Layout is Main menu split around centered logo. |
| Show account link | On or off | On | |
| Customer account menu | Menu | customer-account-main-menu | Links in the account sheet that opens from the account icon. |
| Show item count on cart | On or off | On | |
| Item count style | In parentheses, (3); Round badge | In parentheses, (3) |
Mega menu
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Enable mega menu | On or off | On | Menu items with sub-menus open a full-width panel. Second level items become column headings, third level items become links. |
| Open panel on | Hover, click or keyboard; Click or keyboard only | Hover, click or keyboard | |
| Panel color scheme | Any color scheme | Scheme 1 |
Mobile menu
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Mobile menu | Menu | main-menu | |
| Drawer color scheme | Any color scheme | Scheme 1 | |
| Link size | 24 to 44 px | 36 px | |
| Show account in mobile bar | On or off | On | |
| Show search link | On or off | On | |
| Show country selector | On or off | On | |
| Show featured product in sub-menus | On or off | On | Uses the featured product set on each mega menu block. |
| Show menu promos in sub-menus | On or off | On | Shows the Menu promo blocks inside the menu drawer. Turn off to hide them on phones and tablets. |
| Featured product tile | Product | Empty | Tile shown on the first level of the mobile menu when the menu has no sub-menus. Empty uses the featured product of the first mega menu block. |
| Featured tile label | Text | Featured | Shown when Show featured product in sub-menus is on. |
Search
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Search opens as | Full-width drawer under the header; Search page | Full-width drawer under the header | |
| Search field label | Text | Search the store | |
| Search drawer color scheme | Any color scheme | Scheme 1 |
Country selector
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Show country selector in the header | On or off | Off | Shows only when the store sells in more than one country. The footer and mobile menu have their own switch. |
| Show language selector | On or off | Off | Shows only when the store has more than one language. |
Style
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Color scheme | Any color scheme | Scheme 1 | |
| Sticky header | Not sticky; Show when scrolling up; Always visible; Compact after scroll | Show when scrolling up | Compact: the header stays visible and shrinks after the shopper scrolls. The announcement bar and utility row scroll away. |
| Transparent on the home page | On or off | Off | Home page only. The header sits over the first section with light text, and turns solid after scrolling and on every other page. Works best with an Image hero in the Stage layout. |
Spacing: Top padding (20 px, 0 to 200 px), Bottom padding (14 px, 0 to 200 px). These add space above and below the section.
Blocks
Block: Mega menu panel (up to 6)
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Menu item title | Text | Empty | Must match a top-level item in the main menu, for example Clothing. |
| Description | Text | Empty | |
| Link text | Text | Empty | Link goes to the menu item's page. |
| Featured product | Product | Empty | |
| Featured label | Text | Empty |
Block: Menu promo (up to 12)
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Menu item title | Text | Empty | Shows this promo in the dropdown of the main menu item with the same title, for example Clothing. Each dropdown shows up to 2 promos. |
| Image | Image | Empty | Optional. Without an image the promo is a plain text panel. |
| Heading | Text | Empty | |
| Text | Text | Empty | |
| Link text | Text | Empty | |
| Link | Link | Empty |
Preset defaults: the Placket preset has one Menu promo, "The fall edit", for the Clothing item. The Bodice preset has one, "Dressed for the evening", for the Dresses item.
Tips
- To change the logo size, use Image logo width, desktop and Image logo width, mobile (or the Text logo size settings if you have no logo image). See the FAQ.
- The Main menu and Mobile menu settings pick a menu from Online Store > Navigation. Menus can have up to three levels. See Navigation and menus.
- Menu promo blocks show only in a dropdown. The main menu item must have sub-items in Online Store > Navigation. See Navigation and menus.
- When the main menu does not fit beside the logo, the header switches to the menu drawer on its own. See Navigation and menus.
- Show utility row above the main menu only works with the Main menu split around centered logo layout.
- Transparent on the home page works best when the first section on your home page is an Image hero in the Stage layout.
- The account icon uses Shopify's account component. Customers see the links from the Customer account menu you pick.
- The country and language selectors only show when your store sells in more than one country or language. See Translations and markets.
Footer
The footer has menus, an About block, text blocks, social icons, payment icons, a copyright line and an optional country and language selector.
Editor name: Footer. Where you can add it: The footer section group. Blocks: up to 6.
Settings
Layout
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Layout | About left, footer menus right; About on top, footer menus below; Equal columns | About left, footer menus right |
Bottom bar
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Show country and language selector | On or off | On | Shows only when the store sells in more than one country or language. |
| Show payment icons | On or off | On | |
| Payment icon style | Outlined, one color; Full color | Full color | |
| Copyright text | Text | Empty | Leave empty for the year and store name. |
| Show social media icons | On or off | On | Add the links in Theme settings, Social media. |
| Show Follow on Shop button | On or off | On | Appears in the Follow column when Follow on Shop is available for your store. |
| Show line above bottom bar | On or off | On |
Style
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Color scheme | Any color scheme | Scheme 3 |
Spacing: Top padding (80 px, 0 to 200 px), Bottom padding (80 px, 0 to 200 px). These add space above and below the section.
Blocks
Block: About (one per section)
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Logo image | Image | Empty | Leave empty to show the store name in the heading font. |
| Text logo size | 32 to 160 px | 64 px | Stacked layout: the wordmark across the top, up to 120px. Other layouts: up to 96px looks best. |
| Text | Rich text | Tell customers about your brand in a sentence or two. |
Block: Footer menu (up to 4)
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Heading | Text | Shop | |
| Footer menu | Menu | footer |
Block: Text (up to 2)
| Setting | Choices | Default | Notes |
|---|---|---|---|
| Heading | Text | Visit us | |
| Text | Rich text | Add opening hours, an address or a short note. |
Tips
- Add one Footer menu block for each column of links. Each block has its own heading and menu.
- Social icons come from Theme settings > Social media. Only networks with a link are shown.
- The Follow on Shop button only appears when Follow on Shop is available for your store.
- Payment icons are generated from the payment methods your store accepts.
- Leave Copyright text empty to show the year and your store name.