Case study
A fully customisable Shopify section designed as a native alternative to third-party link-in-bio tools.
01
This project was built to explore a more flexible and brand-focused alternative to tools like Linktree inside the Shopify ecosystem.
The goal was to create a reusable Shopify section that allowed merchants to build social landing pages directly within their storefront while maintaining full visual control through Shopify’s theme customiser.
02
Many brands rely on external platforms for link-in-bio pages.
03
I designed and developed a native Shopify section that gives merchants direct control over branding, layout and content without requiring external platforms or custom code edits.
04
The section schema exposes practical merchant controls including profile imagery, header text, background colour or image, font pickers, border radius, border style, spacing, padding, and alignment.
The aim was non-technical editing: merchants can update presentation and link content inside the theme editor instead of requesting code changes for routine updates.
The link buttons use a grid-based layout that shifts from an image-and-text split to a more compact arrangement at smaller widths, with an additional stacked fallback below 350px.
That mobile-first logic keeps the section readable on social traffic entry points while preserving visual hierarchy.
The architecture combines section-level settings with up to 20 configurable blocks. Link buttons and social icon blocks can be mixed to create different landing page variants without rewriting the section itself.
05
The implementation focused on keeping the section lightweight, reusable and easy to maintain while still providing a high level of merchant customisation.
{
"type": "font_picker",
"id": "button_links_font"
},
{
"type": "range",
"id": "button_border_radius"
},
{
"type": "range",
"id": "button_spacing"
}"blocks": [
{ "type": "link_button" },
{ "type": "social_media_icons" }
],
"max_blocks": 20.link-button {
display: grid;
grid-template-columns: 20% 80%;
}
@media (max-width: 350px) {
.link-button {
display: flex;
flex-direction: column;
}
}06
A major focus of the project was ensuring that merchants could customise the section directly through Shopify’s theme editor without editing code.
The walkthrough is intended to show typography changes, background swaps, link editing, spacing controls, and mobile preview behaviour inside the Shopify theme customiser.
07
The section was designed mobile-first to ensure that layouts remained readable and visually balanced across different screen sizes.
08
I used structured schema settings and reusable blocks to provide customisation without overwhelming the user interface.
The section was designed around Shopify’s section architecture to remain compatible with theme customisation workflows.
Spacing, typography and responsive behaviour were designed as part of a unified frontend system rather than isolated style rules.
The section avoids handing control to a third-party platform and instead treats the social landing page as part of the storefront itself.
09
Routine link and styling changes can be made directly in the theme editor.
The landing experience stays visually aligned with the storefront instead of shifting to an external tool.
Traffic can stay inside the Shopify ecosystem with fewer brand and tracking compromises.
The block-based structure is portable and adaptable for different merchant needs.
10
11
If you’re looking for custom Shopify sections, storefront improvements or frontend implementation support, feel free to get in touch.