Everything you need to set up and customize the Article Group block — from adding child blocks like article content, social sharing, and back buttons, to configuring color schemes and spacing for a polished blog reading experience.
An article is an individual blog post on your Shopify store. Articles live inside a blog and can contain written content, images, and other media. They are the foundation of your store's content marketing, helping you share news, tell stories, offer guides, and improve your search engine visibility.
In the Boardwalk theme, the Article Group block is a parent container that holds the main content area of an article page. It provides a shared color scheme and padding that all of its child blocks inherit. Inside the Article Group you can place blocks for the article body text, social sharing buttons, a back-to-blog button, standard theme buttons, and third-party app blocks. The content width is controlled by the section-level setting, and the Article Group centers everything within that width automatically.
Follow these steps to add and configure the Article Group block on your blog article pages using the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Use the page
selector dropdown at the top center of the editor and
choose a blog article page (for example,
Blog posts → Default blog post).
In the Theme Editor sidebar, click Add block inside your article section and choose Article group from the list. The block will appear as a container that you can fill with child blocks.
Click the Article group block in the sidebar. Choose a color scheme to set the background and text colors for the entire group. Adjust the top, bottom, and edge padding to control the spacing around the content area.
Inside the Article Group, click Add block to insert child blocks. You can add the article content (body text), social share buttons, a back-to-blog button, standard buttons, or third-party app blocks. Drag and drop blocks to reorder them.
Click on any child block to open its individual settings. Each block has its own options for appearance, typography, and spacing. See the Child Blocks section below for details on each one.
Click Save in the Theme Editor. Preview your article page to make sure the content, sharing buttons, and navigation are all displaying as expected.
These settings apply to the Article Group block itself and are accessible by clicking the block in the Theme Editor sidebar. They control the overall appearance and spacing of the content area.
Sets the background and text colors for the entire Article Group area. All child blocks inside the group inherit this color scheme.
Controls the amount of space above the content area. Range: 0px to 100px. On mobile devices this value is automatically reduced to 75% for a better fit.
Controls the amount of space below the content area. Range: 0px to 100px. On mobile devices this value is automatically reduced to 75%.
Controls the left and right spacing inside the content area. Range: 0px to 80px. This is useful for adding breathing room between the article text and the edges of the container.
The Article Group accepts several types of child blocks. Each one adds a specific piece of functionality to your article page. You can add, remove, and reorder these blocks inside the group.
Displays the full body text of your article. This is the rich text content you write in the Shopify admin article editor, including formatted text, images, videos, and embedded media. The width is controlled by the parent Article Group.
Note: The article content shown here
comes directly from the article you create in the
Shopify admin under
Online Store → Blog posts. To edit
the text, update the article itself — not the block
settings.
Adds social sharing buttons so readers can share your article on platforms like Facebook, X (Twitter), Pinterest, LinkedIn, Threads, Bluesky, Tumblr, and email. It also includes a copy-link button that copies the article URL to the clipboard with a confirmation popup.
Adds a navigation button that links back to the parent blog's article listing. The link destination is automatically set to the blog URL — no manual configuration needed. A subtle top border visually separates it from the content above.
A standard theme button block. You can use this to add any custom call-to-action link within the article content area, such as linking to a product, collection, or external page.
Any compatible theme-level block can be placed inside the Article Group. This gives you flexibility to insert other Boardwalk elements directly into the article content area.
Third-party Shopify app blocks can also be nested inside the Article Group. If you use apps that add content to article pages (such as related product widgets or newsletter signup forms), you can place their blocks here alongside your article content.
Important behaviors and design details to be aware of when working with the Article Group block.
The Article Group does not have its own width setting.
Instead, it inherits the maximum content width from the
section-level setting
(--article-content-max-width). All child
blocks are centered within this width automatically.
When you set a color scheme on the Article Group, all child blocks inside it automatically inherit that scheme. Some child blocks (like Article Share) have their own optional color scheme override if you need specific elements to use different colors.
The top and bottom padding values you set on the Article Group are automatically scaled down to 75% on mobile devices. This ensures the spacing looks proportional on smaller screens without needing separate mobile settings.
The Article Content child block renders your article body with built-in typography styles. Headings, paragraphs, images, and blockquotes are all styled automatically. Images within the article are given rounded corners and responsive sizing.
The Article Share block's copy-link button includes a built-in confirmation popup. When a reader clicks the button, the article URL is copied to their clipboard and a small "Copied!" message briefly appears near the button. This works without the need for a page reload.