Content blocks
Content blocks put your own messages and links on customer account pages: a welcome banner, a card with an image, a QR code, self-service links, or answers to common questions. A Banner can also be the one-line announcement bar at the top of a page.
Requires: any Shopify plan except Starter (no Shopify Plus needed), Shopify’s new customer accounts, and the Customer accounts app block on the page in Shopify’s checkout and accounts editor. Account blocks come with the Deals & Rules and Buddy plans, or count as the Free plan’s one customization. See set up account blocks.
| Block | What it shows | Can go on |
|---|---|---|
| Banner | A highlighted message with an optional button | Announcement bar, Profile, Orders, Order status, Footer, Company profile |
| Card | An image, heading, text and up to two buttons | Profile, Orders, Order status, Footer, Company profile |
| QR code | A QR code customers scan to open a link on their phone | Profile, Orders, Order status |
| Quick links | Tiles that send customers where they need to go: tracking, FAQ, contact | Profile, Orders, Order status, Footer, Company profile |
| FAQ | Questions that open to show their answer | Profile, Orders, Order status, Company profile |
To add one, click Create customization on the Customer accounts tab on the Customizations page and choose the block’s card: Banner, Card, QR code, Quick links or FAQ. Then pick a template, such as We miss you on the Banner card or Order FAQ on the FAQ card, or Start blank. See add a block for every template, and customer accounts for placing blocks and conditions.
Banner
Section titled “Banner”| Setting | What it does |
|---|---|
| Heading | Optional heading. |
| Text | Optional message. Supports bold, links and one paragraph per line. |
| Color | Info (blue), Success (green), Warning (yellow) or Critical (red). |
| Button text, Button link | An optional button. The link can be a page of your store, such as /pages/contact, or a full address. |
| Customers can dismiss it | Adds a close button. A customer who closes the banner doesn’t see it again until you edit the block. |
A banner needs a heading or text.
| Setting | What it does |
|---|---|
| Image | Optional. Paste an image link; you can copy one from Content → Files in Shopify. |
| Image description | Alt text for the image. |
| Heading, Text | The card’s heading and message. Text supports bold, links and one paragraph per line. |
| Main button text, Main button link | An optional primary button. |
| Second button text, Second button link | An optional second button beside it. |
On wide screens the image sits beside the text; on phones it’s above. Images are cropped to a 4:3 shape. A card needs a heading, text or image.
QR code
Section titled “QR code”| Setting | What it does |
|---|---|
| Link the QR code opens | Your app, a review page, a sign-up form, or any link. Personal text works here. |
| Caption | Optional text under the QR code, such as “Scan to download”. |
| Heading, Text | Optional heading and message beside the code. |
| Button text | Optional. A button that opens the same link, for customers who are already on their phone. |
Customers scan the code with their phone’s camera. On wide screens the code sits beside the text; on phones it’s above. The block needs a link. Template: Get our app, on the Orders page.
For a QR code of a discount link, use a Discount code block with Show a QR code of the link on.
Quick links
Section titled “Quick links”| Setting | What it does |
|---|---|
| Heading | Optional heading above the tiles. |
| Add link | Add up to 12 links. Each has a Label, a Link, an Icon (or No icon) and an optional Badge, such as “New”. |
| Layout | Side by side: tiles in rows. Stacked: one link per row. |
| Columns | With Side by side, the most tiles in a row on wide screens: Three or Two. Choose Two for longer labels. Narrow screens show fewer. |
Every link needs a label and a link.
Screenshot needed
A Quick links block on the Profile page with Track an order, Returns, FAQ and Contact us tiles
Created from the Quick links template, Profile page, desktop width.
| Setting | What it does |
|---|---|
| Heading | Optional heading, such as “Questions about your order”. |
| Intro | Optional text above the questions. |
| Add question | Each entry has a Question and an Answer. Use the arrows to reorder them. |
Customers click a question to open its answer. Answers support bold, links and one paragraph per line.
Announcement bar
Section titled “Announcement bar”Choose Announcement bar under Where it shows to turn a Banner into a one-line announcement at the top of the page. Then pick the pages under Show the announcement on: Orders, Profile and Order status. In Shopify’s checkout and accounts editor, add the Customer accounts app block to the announcement bar of each of those pages, and click Save.
| Setting | What it does |
|---|---|
| Lead | Shown first, such as “Heads up:”. |
| Message | The rest of the line. |
| Link text, Link address | An optional link at the end of the line. |
- One announcement per page. If several announcements match a customer, the one with the lowest Order under Where it shows wins; with equal numbers, the oldest. See which blocks show.
- Customers can close an announcement. It stays closed for them until you edit the block.
- The bar shows one line of plain text: bold and line breaks aren’t used.
- Discount code and Store credit blocks can also be announcements.
Example from the Shipping delay notice template on the Banner card: Lead “Heads up:”, Message “Orders are taking 1–2 extra days to ship this week.”, shown on Order status when Fulfillment status is any of Unfulfilled or On hold.
Footer
Section titled “Footer”Choose Footer to show a Banner, Card or Quick links block at the bottom of every account page. Blocks in the footer show without a card around them, so they blend in with the page. In Shopify’s checkout and accounts editor, add the Customer accounts app block to the footer once, under the Footer section’s Add block, and click Save. It shows every footer block, on every account page.
Company profile
Section titled “Company profile”Choose Company profile to show a Banner, Card, Quick links or FAQ block under the company details that B2B customers see on their profile. Nothing to add in Shopify’s checkout and accounts editor: Shopify shows them there on its own. See B2B blocks for balances and documents.
Examples
Section titled “Examples”- Welcome banner (Start blank on the Banner card) on the Orders page: Heading
Welcome back, {{ firstName || "there" }}, Text “Thanks for shopping with us.” - VIP perk (template on the Banner card): a Success (green) banner, “Free express shipping on every order”, for customers with the tag
vip. - Complete your profile prompt (template on the Banner card): a banner on the Orders page with a “Go to profile” button. Its Button link is
shopify:customer-account/profile, which opens the customer’s Profile page. It uses the Profile fields not filled in condition, which matches until the customer has answered your Profile fields: the Required ones, or all of them when none is required. - How we use your data (a template for the Card block type): a card on the Profile page with “Privacy policy” and “Contact us” buttons.
Things to know
Section titled “Things to know”- Buttons and links need both parts. A button shows only when its text and its link are both filled in.
- Headings and button text show personal text, not formatting. Bold and links work in Text, Intro and Answer. See personal text.
- Links in text to other websites open in a new tab; links to your store open in the same tab.
- Your branding applies. Your store’s colors, fonts and corners apply on the real page, so the preview is only a guide.