ServicesFree AuditWorkInspirationBlogAbouthello@optimaflow.id

( AKTA · Version 1.0.2 )

AKTA docs.

Barrier-first skincare theme for stores that want to show their evidence.

Need help? →

( Live demo )

See AKTA running on a real store, with a full catalogue, collections and a journal.

Open the demo store →

Password: thowau

Before you start

Duplicate the theme before editing any code. From Online Store → Themes, use the menu on the theme and choose Duplicate. Edits to a live theme cannot be undone from the admin, and an update to the theme will overwrite them.

If you want a change we do not expose as a setting, consider hiring a Shopify Partner. We support the theme's own settings and behaviour; we do not write custom code for individual stores.


1. Setup

  1. Add the theme from the Theme Store, then open Customize.
  2. Logo and faviconTheme settings → Logo. The logo accepts any aspect ratio; set the width to suit it. The favicon should be 32 x 32px.
  3. Navigation — the header and footer read your Shopify menus. Create them under Content → Menus. The header uses main-menu, the footer columns use footer by default; you can point any column at a different menu.
  4. Colours and typeTheme settings → Colors / Typography. See section 3.
  5. Filters — install Shopify's free Search & Discovery app and set up your filters there. The collection page renders whatever you configure; the theme does not define its own filter list.

2. Sections you can add

Open Customize, then Add section. Sections marked with several entries appear more than once in the list — each entry is the same section arranged a different way, and you can switch between arrangements later from the section's Layout setting without losing content.

SectionEntries in “Add section”Layout options
BreadcrumbBreadcrumb
Call to actionCall to action — full bleed · Call to actionSplit with image · Full-bleed with scrim
CalloutCallout
Collection tilesCollection tiles
Complementary productsComplementary products
ContactContact
CountdownCountdown — split · CountdownFull band · Split with image
CredentialsCredentials — over an image · Credentials — evidence rows · CredentialsStat row · Over an image · Evidence rows
Custom LiquidCustom Liquid
Empty bagEmpty bag
FormulasFormulas — offset carousel · Formulas — catalogue list · FormulasGrid · Offset carousel · Catalogue list
HeroHero — evidence ledger · Hero — the index · HeroSplit · Evidence ledger · The index
How to useHow to use
Ingredient studyIngredient study — index tiles · Ingredient study — accordion · Ingredient studyMacro split · Index tiles · Macro with accordion
JournalJournal
Keep readingKeep reading
NewsletterNewsletter
Page contentPage content
Page headerPage header
Related productsRelated — bundle bar · Related — compact strip · Related productsCard grid · Bundle bar · Compact strip
ReviewsReviews — score summary · Reviews — photo cards · ReviewsQuote grid · Score summary · Photo cards
Sticky add to bagSticky add to bag — top · Sticky add to bagSlim bottom bar · Top bar with jump links
SuggestionsSuggestions
The indexThe index
The ritualThe ritual — timeline · The ritual — alternating · The ritualSteps · Morning / evening timeline · Alternating steps

Sections tied to a template

These are placed for you on the template they belong to and are not in the “Add section” list.

SectionLayout options
404
Account
Account form
Account header
Account menuCompact · Rich panel
Announcement barBar · Countdown · Rotating
Article body
Article comments
Article header
Article hero
Blog header
Cart
Cart drawerRight drawer · Top slide-down
Cart header
Category filters
Collection banner
Featured post
Filter barFacet bar · Sticky chip bar · Sidebar panel
FooterStandard · Mega (with newsletter) · Minimal (giant wordmark)
Gift card
HeaderColumns and featured image · Image tiles
Journal results
Order
Password gate
Post grid
Predictive search
ProductGallery split · Full-bleed with overlay card · Editorial · Standard · Inline block · Purchase panel
Product grid
Product results
Result tabs
Search field
Search popupFull overlay · Dropdown panel

3. Colours and typography

Colour schemes

Every section has a Color scheme setting. The theme ships 4 schemes — scheme-paper, scheme-surface, scheme-accent, scheme-ink — and you can edit or add to them under Theme settings → Colors.

Each scheme defines these roles:

RoleUsed for
Backgroundthe section's own background
Textbody copy and headings
Muted textsecondary lines, meta, captions
Hairlinethe thin rules that separate rows and sections
Control borderthe outline of inputs, chips, size buttons and quantity steppers
Accentlinks, eyebrows, primary buttons
Surfacecards and panels that sit on the background

Keep contrast in mind when you change these. Text needs a contrast ratio of at least 4.5:1 against the background behind it, and control borders at least 3:1. The shipped schemes are audited to those numbers; a well-meant tweak can quietly fail an accessibility check.

Typography

Theme settings → Typography has three font pickers, all drawn from Shopify's font library — the theme ships no font files of its own, so a merchant can change any of the three without touching code.

  • Heading font — Instrument Serif by default.
  • Body font — Schibsted Grotesk by default. The 500 and 600 weights the design uses are loaded explicitly, along with bold and italic, so no cut is left for the browser to fake.
  • Accent font — IBM Plex Mono by default. Used for labels, prices and small caps.

Heading size and Body size scale the whole type ramp from one number, so proportions stay intact.


4. Product page

The product section works for any catalogue, and three of its features need your data to be set up a certain way:

  • Variant options render as separate controls. An option named Colour (or Color) renders as swatches when you set swatch values in Shopify; every other option renders as pills. Set swatches under Products → [product] → Variants.
  • Media — images, video, YouTube/Vimeo and 3D models all render. Upload them to the product; the theme picks the right player for each.
  • Local pickup shows automatically for variants with pickup enabled at a location.
  • Complementary products come from the Search & Discovery app. Related products fall back to Shopify's automatic recommendations when you have not curated any.

Gift cards. On a gift-card product the buy box grows recipient fields — email, name, message and a send date — so a customer can send the card directly.


5. Cart

Theme settings has no cart mode switch: the theme ships both a cart page and a cart drawer. The bag link in the header opens the drawer; the drawer's “View bag” goes to the page. Everything in the cart works without JavaScript, so a customer on a failing connection can still change quantities and check out.

The free-shipping meter on the cart header and drawer takes a threshold in your store currency. Set it to 0 to switch the meter off.


6. Countdown — please read

Countdown runs to a date you set and hides itself once that date passes. There is deliberately no repeating or evergreen timer, and none can be configured — Shopify's rules forbid a countdown that resets to manufacture urgency.

AKTA has no stock-scarcity labels. There is no “12 left” badge and no way to display a remaining-units number, typed in or otherwise. That is a deliberate fit with the kind of brand this theme is for: a range sold on evidence does not need a countdown on its stock.


7. Blog

  • Comments work with or without moderation and report success and errors. Enable them per blog under Content → Blog posts → Manage blogs.
  • The Contents list on an article is built from blocks you add to the Article body section. Each block needs a label and an anchor that matches an id in your article HTML.

8. Translating

Every string in the theme is translatable with Shopify's free Translate & Adapt app — both the storefront text and the labels you see in the theme editor. Text you type into a section setting is translated per instance in that app.


9. Accessibility

The theme is built to the requirements Shopify checks: full keyboard navigation, visible focus, labelled form fields, alt text on every image, and honoured prefers-reduced-motion.

Two things you control:

  • Alt text. Sections that take an image also take alt text. Fill it in — an image with no description is invisible to a screen reader.
  • Contrast, as described in section 3.

10. Support

Use the contact form linked from our Theme Store listing. We reply within two business days.

Please include your store URL and the theme version, and tell us what you expected to happen and what happened instead. If you have edited the theme code, say so — it changes what we can help with.

Still stuck?

Send us the store URL, the theme version and what you expected to happen. We reply within two business days.

Contact support →