Shopify theme · Documentation
Strata
A conversion-focused Shopify theme by Shyft Stack. This guide covers installing and licensing Strata, and every setting, section and block in the theme editor.
- Version 1.0.0
- Author Shyft Stack
- Support shyftstack.com/contact
Overview
Strata gives a store more than 90 sections built for selling: bundle and quantity offers, upsells, a cart drawer with free-shipping and reward bars, comparison tables, before/after sliders, shoppable images, tickers, review layouts and more. Everything is set up in Shopify’s theme editor, with no code required.
- Built for conversion. Quantity breaks, bundles, free gifts, upsells, urgency and trust blocks on the product page and in the cart.
- Every page type covered. Home, Product, Collection, Search, Cart, Blog, Article, Contact, FAQ, Order tracking, Account, Password pages.
- Brand controls. Colors, fonts (including your own font files), button and card styles, animations, scrollbar and cursor.
- Fast and accessible. Styles and scripts load per section, images are responsive, and motion respects visitors’ reduced-motion settings.
Installation
Shyft Stack installs Strata on your store as an unpublished theme, so your live store is never affected until you choose to publish.
Add the theme. In Shopify admin go to Online Store → Themes. Strata appears in your theme library, added by Shyft Stack. If your theme is connected to GitHub, Shopify keeps it updated automatically when Shyft Stack releases fixes.
Check the license. Open Customize → Theme settings → License. A license key for your store is usually filled in already. If it is empty, paste the key Shyft Stack sent you and save.
Preview. Use Preview to click through your home page, a product, a collection and the cart on desktop and phone.
Publish. Choose Publish on Strata. Your previous theme stays in the library until you delete it.
License
Each Strata license covers one store. The key is tied to the store’s permanent Shopify address (the your-store.myshopify.com name shown under Settings → Domains), so it keeps working if you add or change a custom domain.
| Situation | What happens |
|---|---|
| Valid key for this store | Nothing visible. The theme works normally. |
| Theme editor or unpublished preview | Works normally with a small notice if the key is missing, so you can set up the theme before it goes live. |
| Published without a valid key | The storefront shows “This store is temporarily unavailable” with a link for the store owner to contact Shyft Stack. |
| Key for a different store | Treated as no key. Strata can't be copied to a second store with the same license. |
| Key with an end date | Keeps working for 14 days after the end date with a reminder, then the storefront is blocked until it is renewed. |
To use Strata on another store, or to get a key for a new store, contact Shyft Stack with that store’s myshopify.com address.
Theme settings
Find these in the theme editor under Theme settings (the brush icon). They apply across the whole store.
| Group | What it controls |
|---|---|
| Logo | Logo, secondary logo (used on transparent headers and dark backgrounds), desktop and mobile logo width, favicon. |
| Colors | Text, two backgrounds, two accents, button labels, and gradients. Sections pick one of these color schemes, or “Custom” for their own colors. |
| Typography | Heading and body fonts from Shopify's font library, size scale, line height and letter spacing. You can also load your own font by pasting a font file URL (.woff2, .woff, .ttf, .otf) or a stylesheet URL such as Google Fonts, plus its family name and weight. |
| Animations | Animate sections as they scroll into view, repeat on every scroll, duration, delays, and the starting opacity, offset and zoom. |
| Layout | Page width, space between sections, and grid spacing. |
| Buttons | Border, corner radius and shadow, plus hover effects (glow, fill from center, fill from left, arrow slide) for link buttons and for add-to-cart and checkout buttons. |
| Variant pills | Shape, border, shadow, selected color, text size and padding of variant buttons. |
| Variant dropdowns | Color scheme, border, overlay, radius, shadow and hover state of variant dropdowns. |
| Quantity pickers | The same controls for the quantity selector. |
| Inputs | Form fields: border, radius and shadow. |
| Product cards | Card style, image padding, text alignment, borders and shadows, badge position, custom badges, title line limit and quick-add button style. |
| Collection cards, Blog cards | Style, padding, alignment, borders and shadows for collection and article cards. |
| Content containers, Media | Borders, corner radius and shadows for text boxes, images and videos. |
| Dropdowns and pop-ups, Drawers | Borders and shadows for menus, pop-ups and slide-out drawers. |
| Badges | Badge position, corner radius, color schemes, and the sale badge text. Use [percentage] or [amount] to show the discount, for example “SAVE [percentage]”. |
| Brand information, Social media | Brand headline, description and image used in the footer, and links to your social profiles. |
| Scrollbar & cursor | Custom scrollbar colors and width, and a custom cursor image. |
| Store protection | Discourage copying text, saving images and opening developer tools. Block or only allow visitors from chosen countries (two-letter codes such as US, GB), with your own message for blocked visitors. |
| Search behavior, Currency format | Predictive search options and whether prices show currency codes. |
| Cart | Drawer, page or notification cart; cart icon; vendor; cart note; the collection shown in an empty cart; and the “Continue shopping” link. |
| SEO | A business description for search engines, and an “Additional head code” field for verification tags such as Google Search Console or analytics snippets. If you use the Booster SEO app, it takes over page titles and descriptions automatically. |
| License | Your store's Strata license key. |
Sections
Add a section with Add section in the theme editor. Most sections have color scheme, top and bottom padding, and a Visibility option to show them on all devices, desktop only, or mobile only.
Heroes and banners
Large opening sections with images or video.
- Slideshow hero
- Slideshow
- Image banner
- Parallax hero
- Image slider
- Video
Content
Text, images and layouts for telling your story.
- Rich text
- Image with text
- Multicolumn
- Multirow
- Custom columns
- Icons with content
- Collage
- Content tabs
- Page
Products and collections
Ways to show and sell products outside the product page.
- Featured product
- Featured collection
- Collection list
- Product showcase
- Bundle deals
- Shoppable image
- Product features
- Related products
- Shop by need
Comparison and proof
Show why your product wins.
- Comparison table
- Comparison
- Before / after slider
- Before & after results
- Results
- Pricing table
Reviews and social
Customer voices and social content.
- Testimonials
- Star rating reviews
- Social post reviews
- Quote reviews
- Story highlights
- A2Reviews block
- A2Reviews widget
Trust and benefits
Short, scannable reasons to buy.
- Icon bar
- Logo list
- Trust strip
- Benefits strip
- Numbered strip
- Why choose us
- Why us
- How it works
- Daily routine
- Lifestyle story
Motion
Scrolling bands of text and images.
- Horizontal ticker
- Vertical ticker
Questions and help
Answer questions before they are asked.
- Collapsible content
- FAQ
- Track order
- Contact form
Email
Grow your list.
- Email signup
- Email signup banner
- Promo popup
Utility
Structure, apps and extras.
- Announcement bar
- Section divider
- Sections group
- Store colors changer
- Music player
- Blog posts
- Custom Liquid
- Apps
Product page
The Product information section is built from blocks you can add, remove and reorder. The same blocks are available in the Featured product section.
| Purpose | Blocks |
|---|---|
| Core | Title, Price, SKU, Stock status, Variant picker, Buy buttons, Description, Share, Size chart, Popup link |
| Offers | Quantity / offers (quantity breaks with per-unit variant pickers), Bundle offer, Free gifts by quantity, Add-on products, Complementary products, Discount code button |
| Trust and urgency | Rating stars, Star rating tiles, Review slider, Product rating (app), Urgency badge, Emoji benefits, Icons with text, Text with icons, Payment icons |
| Delivery | Delivery estimate, Delivery timeline |
| Media and extras | Image, Video, Collapsible row, Personalization field, Sticky add to cart bar, Custom Liquid, app blocks |
Gallery options include thumbnails, a thumbnail slider, stacked and grid layouts, image zoom, video and 3D models, and showing only the selected variant’s images.
Cart drawer
With Cart type set to Drawer, the cart slides in from the side. Its contents are blocks in the Cart drawer section, shown in your chosen order.
- Motivation: Free shipping bar, Rewards bar with several goals, Cart timer.
- More sales: Upsells (several layouts, optional automatic add), Free gift added automatically above a cart value.
- Checkout: Cart items, Totals, Discount code, Order note, Terms checkbox, Checkout button, Payment icons.
- Content: Text with icon, Icons with text, Image, Custom Liquid.
The cart page uses the same line items and the Discount code, Subtotal and Checkout button blocks.
Working with the editor
Highlight words in a heading
Make a word bold or italic in a heading and it takes the section’s Heading highlight color. For example, “Sleep better tonight” shows “better” in the highlight color.
Icons
Icon fields take a Google Material Symbols name, such as check_circle, local_shipping or favorite. Browse names at fonts.google.com/icons. Many icon fields also accept your own image instead.
Put two sections side by side
Turn on Display section ID in each of the two sections, copy the IDs shown in the editor, and paste them into a Sections group section. The ID can also go in any button link to scroll to that section.
Add-to-cart buttons in content sections
Many content sections have an add-to-cart button block. Choose a product and, optionally, “skip cart” to send shoppers straight to checkout.
Countdowns
Countdown timers can run to a fixed date, reset every day at a set time, or run for a set number of minutes per visitor.
Discounts shown in offers. Quantity breaks, bundles, upsell discounts and free gifts show the savings on the page. To charge the lower price at checkout, create a matching automatic discount in Shopify admin under Discounts.
Languages
Storefront texts such as “Add to cart” and “Checkout” come with translations for the languages Shopify supports. The newest Strata labels are translated into English, Dutch, German, French, Spanish and Italian, and show in English in other languages until translated. You can change any storefront text under Online Store → Themes → ⋯ → Edit default theme content.
Questions
- Can I use Strata on more than one store?
- Each store needs its own license. Contact Shyft Stack with the second store's myshopify.com address.
- Will changing my domain break the license?
- No. The license uses your store's permanent myshopify.com address, which never changes.
- My storefront says it is temporarily unavailable.
- The published theme has no valid license key. Check Theme settings → License, or contact Shyft Stack for a key.
- Why isn't my bundle or gift price applied at checkout?
- Offer prices are shown on the page only. Create a matching automatic discount in Shopify admin.
- Do my apps keep working?
- Yes. App blocks and app embeds work in Strata. Keep the apps installed.
- Can I edit the theme code?
- You can add code with Custom Liquid sections and blocks, or the SEO “Additional head code” field. Changing or removing the license check isn't allowed under the license terms.
Support
For help, licenses and custom work, contact Shyft Stack. Include your store’s myshopify.com address and, for a problem, the page link and a screenshot.
