Theme Extension
SimplerSuite Access includes a theme extension with four blocks you can add to your storefront using the Shopify theme editor. No code required.
Setup
- In your Shopify admin, go to Online Store → Themes
- Click Customize on your active theme
- SimplerSuite Access blocks are available in the theme editor’s block picker
App Embed
The SimplerSuite Access app embed must be enabled for the other blocks to work. It loads the required JS and CSS in the <head> of every page.
- In the theme editor, click App embeds (left sidebar)
- Toggle SimplerSuite Access on
- Save
Downloads Page
A full-page block that shows customers all their digital products with download buttons. Add it to any page template.
Adding to your theme
- Create a new page in Online Store → Pages (e.g., “Downloads” with handle
/pages/downloads) - In the theme editor, navigate to that page
- Add the Downloads Page block to a section
- Save
Features
- Search — Customers can search their products by name
- Sort — Sort by newest, oldest, or name (A-Z, Z-A)
- Status filter — Filter by active, expired, or all
- Skeleton loading — Shows shimmer placeholders while data loads
- Empty state — Configurable message and CTA when no products exist
- Login prompt — Prompts guests to log in
- Dark mode — Automatically adapts to
prefers-color-scheme: dark
Customization settings
| Setting | Description | Default |
|---|---|---|
| Show title | Display page heading | On |
| Title text | Page heading text | ”My Digital Products” |
| Title color | Heading color | Inherits from theme |
| Max width | Page max width | 1200px |
Controls:
| Setting | Description | Default |
|---|---|---|
| Show search | Enable search input | On |
| Show sort | Enable sort dropdown | On |
| Show status filter | Enable active/expired filter tabs | On |
| Controls corner radius | Border radius on inputs and tabs | 6px |
| Controls border/focus color | Border colors for controls | Theme defaults |
| Active filter background/text | Colors for selected filter tab | Dark/white |
Grid & Cards:
| Setting | Description | Default |
|---|---|---|
| Min card width | Minimum card width (responsive grid) | 300px |
| Gap | Space between cards | 16px |
| Corner radius | Card border radius | 8px |
| Shadow | Card shadow: none, small, medium, large | Small |
| Hover effect | Card hover: none, lift, or glow | Lift |
| Content padding | Inner padding | 16px |
| Card background/text | Card colors | Transparent/inherit |
Buttons:
| Setting | Description | Default |
|---|---|---|
| Button background | Download button fill | Dark |
| Button text | Download button text color | White |
| Button border | Download button border | Transparent |
| Button radius | Download button corner radius | 6px |
Empty state:
| Setting | Description | Default |
|---|---|---|
| Empty title | Heading when no products | ”No digital products yet” |
| Empty message | Description text | ”Digital products you purchase will appear here.” |
| CTA text | Button label | ”Start Browsing” |
| CTA link | Button destination | — |
All blocks also support a Custom CSS field for advanced styling.
Downloads Icon
A header icon with a badge count of active entitlements. Add it to your header section for quick navigation to the downloads page.
Adding to your theme
- In the theme editor, navigate to your Header section
- Add the Downloads Icon block
- Set the Link URL to your downloads page (e.g.,
/pages/downloads) - Save
Customization settings
| Setting | Description | Default |
|---|---|---|
| Icon size | Size of the download icon | 22px |
| Stroke width | Icon line thickness | 2 |
| Icon color | Icon color | Inherits from theme |
| Badge color | Count badge background | Blue (#3b82f6) |
| Badge position | Vertical and horizontal offset | 2px / 0px |
| Show label | Show text label | Off |
| Label text | Label content | ”Downloads” |
| Label position | Relative to icon: below, above, left, right | Below |
| Link URL | Where the icon links to | /pages/downloads |
| Hide for guests | Only show to logged-in customers | Off |
Product Downloads Badge
A small badge on product pages indicating that the product includes digital downloads. Shows file count when available.
Adding to your theme
- In the theme editor, navigate to a Product template
- Add the Digital Downloads Badge block (usually below price or add-to-cart)
- Save
Customization settings
| Setting | Description | Default |
|---|---|---|
| Icon color | Badge icon color | Inherits |
| Icon size | Badge icon size | 20px |
| Show label | Show text next to icon | On |
| Label text | Badge text | ”Includes digital downloads” |
| Text color | Label color | Inherits |
| Text size | Label font size | 14px |
| Alignment | Left, center, or right | Left |