Theme documentation

Rally and Editorial

Setup, settings and answers for the two DropAloft themes for Shopify. Both are Online Store 2.0 themes. Everything below applies to a stock install, with no apps added.

1 · The two themes

Rally is built around a busy catalog. Filtering and sorting sit in a rail beside the grid, the product page carries a stack of signal rows, and the type is set in DM Sans throughout.

Editorial is built around fewer products with more said about each one. Headings are set in Cormorant, the grid runs wider, and blog posts and pages carry the same weight as products.

They share one framework: the same Online Store 2.0 section set, the same Day and Night colour model, the same cart and search behaviour, and the same set of app slots. Learning one is most of learning the other. Where a setting differs between them, both are named in the tables below.

Neither theme needs an app. Every feature described on this page is part of the theme itself and works on a store with no apps installed. Section 8 covers what changes if you do add one.

What each theme includes

Template Rally Editorial
HomeYesYes
ProductYesYes
CollectionYes, with a filter and sort railYes, with a filter and sort rail
Collections listYesYes
Search, including predictive searchYesYes
CartYesYes
Blog and blog postYesYes
Page, and a contact page templateYesYes
404YesYes
PasswordYesYes
Gift cardYesYes
Pickup availability on the product pageYesNot shown

2 · Install and publish

Themes are added to a store from the Shopify Theme Store, not uploaded by hand. Adding a theme puts it in your theme library as a draft. Nothing your shoppers see changes until you publish it.

Add the theme

  1. Open the theme in the Shopify Theme Store and choose Try theme. Shopify adds it to your store as a draft.
  2. In your Shopify admin, go to Online Store → Themes. The new theme is under Theme library.
  3. Choose Customize to open the theme editor on the draft copy.

Set it up before you publish

  1. Upload your logo and favicon under Theme settings.
  2. Pick your Default mode under Day and night, then set the colours for the mode you picked. See section 6.
  3. Point the header and footer at your navigation menus. Both read menus you have already built under Content → Menus.
  4. Set your Free shipping threshold to the same amount you configured in Settings → Shipping and delivery, or leave it at 0 to hide the bar. See section 7.
  5. Open the home page in the editor and edit or remove the sections you do not want.
  6. Preview on a phone width using the device buttons at the top of the editor.

Publish

Save, then choose Publish from the theme library, or use the publish action inside the editor. Your previous theme stays in the library, so you can switch back at any time by publishing it again.

Settings do not carry over between themes. Colours, fonts, section layouts and home page content belong to the theme they were set on. Moving from another theme to Rally or Editorial, or between Rally and Editorial, means setting them again. Your products, collections, pages, blog posts, menus and customers are store data and are untouched.

Updating to a newer version

When a new version is released, Shopify offers it in Online Store → Themes. Shopify carries your settings into the updated copy for themes taken from the Theme Store. Changes you made to the theme code are not carried over. Publish the updated copy only after previewing it.


3 · The theme editor

Everything in these themes is configured in the theme editor. There is no separate dashboard and no account to create.

  • The left panel lists the sections on the template you are viewing. Drag to reorder, click to open a section's settings, and use the eye icon to hide a section without deleting it.
  • Add section at the bottom of that list adds a new section to the current template.
  • The template picker at the top of the editor switches between Home page, Product, Collection, Cart, and the rest. Each template has its own section list.
  • Theme settings, the gear icon at the bottom of the left panel, holds the settings that apply to every page. Those are listed in section 4.

The header and the footer live in section groups, so they appear on every template and are edited once. Open any template and click the header or footer in the preview to edit it.


4 · Theme settings

These are the settings under the gear icon in the theme editor. They apply to every page. Group names below match the group names in the editor.

Rally

Logo

SettingDefaultWhat it does
LogoEmptyShown in the header and footer. Any aspect ratio; it is fitted to the width below. Empty shows the store name as text.
Maximum logo width120 pxCaps how wide the logo renders.
Show store name next to the logoOffThe store name always shows when no logo is uploaded.
FaviconEmptySquare image, at least 180 × 180 px. Used for the browser tab and the mobile home-screen icon.

Day and night

SettingDefaultWhat it does
Default modeNight (lander dark)Night, Day, or Match device. Covered in section 6.
Allow shoppers to switch Day / NightOnTurning this off removes the toggle everywhere. The Header and Footer sections each have their own toggle switch as well.

Colors · Night and Colors · Day

Two full palettes, one per mode. Each has Page background, Page text, Card background, Card text, Accent background, Accent text, Accent (deep) and Scarcity and stock. Secondary and dimmed text are mixed from the page text and page background, so a readable pair there carries through the rest of the page.

SettingNight defaultDay default
Page background#0b0c0f#f6f7f9
Page text#f2f3f5#12141a
Card background#161922#ffffff
Card text#f2f3f5#12141a
Accent background#3dd68c#0a7a47
Accent text#062416#ffffff
Accent (deep)#1a9f5c#06512f
Scarcity and stock#f5b942#946408

Accent is used for buttons, chips and meters, and on the Day palette it is also used as text on the page, which is why the Day default runs much darker than the Night one. An accent tuned for a dark page will not reach a 4.5:1 contrast ratio on a light one. Check both modes after changing a colour.

Social

Instagram, X, Facebook, TikTok, YouTube and Pinterest. Each icon appears in the footer only once you paste its address, so an empty field costs nothing.

Brand gradient, Typography and Layout

SettingDefaultWhat it does
Gradient strength45How strong the accent wash is behind the hero and the promo band. 0 removes it.
Body fontDM SansShopify's font picker. Body copy, buttons and labels.
Heading fontDM Sans BoldHeadings and product titles.
Body scale100Scales body text up or down as a percentage.
Page width1120 pxMaximum width of the content column.
Section vertical padding80 pxSpace above and below each section.

Low stock and Free shipping bar

SettingDefaultWhat it does
Show when remaining stock is at or below100 hides the low-stock row everywhere.
Show the exact count at or below5Above this the row reads "Low stock" without a number.
Free shipping thresholdEmptyIn your store currency. 0 or empty hides the bar.
Highlight when this close to the threshold20The bar changes colour once the remaining amount is within this share of the threshold.

Editorial

Editorial exposes the same model with a few different group names and identifiers. The differences are listed here rather than repeating the whole set.

In RallyIn Editorial
Group "Logo", plus a separate group "Social"One group "Brand" holding the logo, the favicon and the social accounts
Maximum logo width, default 120 pxLogo width, default 96 px
Show store name next to the logo, offShow store name next to the logo, on
Colors groups carry Card textColors groups carry Card secondary text instead, defaulting to #8b919c at Night and #5c6370 in Day
Heading font DM Sans BoldHeading font Cormorant, used for headings, product titles and the editorial display type
Low stock has no on / off switchLow stock has a Show low stock signal checkbox, on by default
Free shipping threshold empty by defaultFree shipping threshold 0 by default, whole units of your store currency
Day accent deep #06512fDay accent deep #05512b
Day scarcity #946408Day scarcity #8a5c08

Everything else matches: Day and night, Brand gradient, Body scale, Page width, Section vertical padding, and the two colour palettes.


5 · Sections and blocks

A section is a band of the page. You add, reorder, hide and delete sections in the theme editor's left panel. A block is a piece inside a section, such as one row of the product page or one item in a value strip. Blocks are reordered the same way, by dragging them within their section.

Sections you can add anywhere

These carry a preset, so they appear under Add section on any template.

SectionRallyEditorialWhat it is
HeroYesYesFull-width opener with a heading, body text, up to two buttons and an image.
Featured productsYesYesA grid drawn from one collection.
Featured productYesYesA single product with its own buy box, built from the same blocks as the product page.
Collection spotlightYesYesCards linking to collections you choose, one collection block each.
Promo bandYesYesA single-message band across the page. Also the intended home for a campaign widget.
Value stripYesYesA row of short promises such as shipping and returns, one item block each.
Announcement barYesYesA thin line above the header.
Product recommendationsYesYesShopify's related products, or its complementary products preset.
Blog postsYesNo presetA grid of posts from one blog.
NewsletterYesBuilt into the footerAn email capture form posting to Shopify customer accounts.
Contact formYesYesShopify's contact form. Used by the contact page template.
Custom LiquidYesYesA box for your own Liquid, HTML or an embed snippet.
AppsYesYesAn empty container whose only job is holding app blocks. See section 8.

Sections fixed to one template

Product information, Collection catalog, Cart, Search, Page, Blog post, Collections list, 404 and Password are the main section of their template. They cannot be added elsewhere or deleted, but they can be reordered against the other sections on their template and they have their own settings.

Product page blocks

The buy box is assembled from blocks, so you control the order. In Rally the Product information section offers Title, Price, Signal rail, Variant picker, Gift card recipient, Quantity, Buy buttons, Pickup availability, Vendor, SKU, Description and Custom Liquid. Editorial offers Title, Vendor, Price, Signal rail, Variant picker, Buy buttons, Description and Custom Liquid.

Signal rail is the block that holds the stock row and any app blocks you add to the product page. It ships between Price and the variant picker. Move it and everything inside it moves with it. Deleting it does not lose an app block: the section falls back to rendering app blocks in place.

The Featured product section uses the same block set, so a product promoted on the home page reads the same way as the product page itself.

Blog post blocks

Rally's Blog post section offers Breadcrumb, Title, Meta, Featured image, Content, Share, Comments and Custom Liquid. Editorial's offers Featured image, Title, Content and Custom Liquid. Comments render only when they are enabled for that blog in Content → Blog posts.


6 · Day and night

Both themes carry two complete colour palettes rather than one palette with a dark filter over it. Which one is used is decided in this order.

  1. The shopper's own choice, if they have used the Day / Night toggle in this browser. It is remembered per browser and it wins over everything else.
  2. Default mode from Theme settings → Day and night, when the shopper has not chosen. Set to Night, Day, or Match device.
  3. Match device follows the operating system's light or dark setting, until the shopper picks a mode.

The choice is applied before the page paints, so there is no flash of the wrong palette on the first load.

Turning the toggle off

Two switches control whether shoppers see the toggle at all, and both have to be on for it to appear.

  • Theme settings → Day and night → Allow shoppers to switch Day / Night. Off removes the toggle everywhere.
  • Show day / night toggle on the Header section and on the Footer section, which place it in each of those spots.

With the toggle off, everyone sees the mode you set as Default mode. Set Default mode to Day and turn the toggle off for a light-only storefront.

Colour edits can look like they did nothing. The palette is written into a stylesheet the browser caches. After changing a colour, hard-refresh the storefront tab, or view it in a private window, before deciding the setting is broken.

Choosing readable colours

Contrast is checked against the pair, not the colour on its own. Accent text sits on Accent background, and page text sits on Page background. The shipped Night accent pair measures 8.8:1 and the Day accent pair measures 5.4:1. If you change one half of a pair, change the other half with it.


7 · Stock and shipping signals

Two storefront signals are part of the themes. Both read your own store data through Liquid, on the server. No app and no third-party service is involved.

The low-stock row

Shown on the product page, inside the Signal rail block. It is counted from your inventory, and it only appears for a product where every variant tracks inventory and is not set to continue selling when out of stock. A product with untracked inventory has no number to report, so nothing is shown.

  • Above your threshold, nothing appears.
  • At or below Show when remaining stock is at or below, the row appears.
  • At or below Show the exact count at or below, the row includes the number. Between the two it reads "Low stock" with no number.
  • Set the threshold to 0 to hide the row on every product. In Editorial you can also clear Show low stock signal.

The free-shipping bar

Compares the cart total against the threshold you enter under Theme settings → Free shipping bar and shows the remaining amount.

  • Enter the amount in your store currency. 0 or empty hides the bar.
  • The theme does not create the shipping rate. Set the matching free-shipping rate under Settings → Shipping and delivery, or the bar will promise something checkout does not deliver.
  • Highlight when this close to the threshold sets when the bar changes colour as the shopper approaches the amount.

8 · Apps and app blocks

The themes ship empty app slots, not pre-placed widgets. Both themes are complete without any app. Installing an app does not make anything appear on your storefront by itself. If you want an app's widget on the page, you add that block yourself in the theme editor, one block at a time, in the spot you want it.

An app block is a piece of a page supplied by an app rather than by the theme. Shopify calls the place a theme is willing to accept one an app block slot. Rally and Editorial declare these slots in most of their sections, which means a merchant can put an app's widget where the design has room for it instead of where the app decided.

Adding an app block

  1. Install the app from the Shopify App Store.
  2. Open Online Store → Themes → Customize.
  3. Go to the template you want the widget on, using the picker at the top.
  4. Choose Add block inside a section that accepts app blocks, then pick the app's block from the Apps group in the list.
  5. Drag it to the position you want, then Save.

Repeat for each widget you want, on each template you want it on. Nothing is placed for you, and nothing is placed on templates you did not open.

Where the slots are

SectionRallyEditorial
Apps (add it anywhere)YesYes
Product information, inside the Signal rail blockYesYes
Featured productYesYes
Featured productsYesYes
Collection spotlightYesYes
Promo bandYesYes
Value stripYesYes
Product recommendationsYesYes
CartYesYes
Blog postYesYes
Blog postsYesNo
Contact formYesNo
NewsletterYesNo
404YesNo
HeaderThrough the Apps section already in the header groupYes, directly on the Header section
FooterAdd an Apps section to the footer groupYes, directly on the Footer section
PageAdd an Apps section to the page templateYes, directly on the Page section
Search resultsAdd an Apps section to the search templateYes, directly on the Search results section

Where a section has no slot of its own, add the Apps section to that template and put the block in there. It renders nothing at all when it is empty.

The DropAloft app

DropAloft also publishes an app in the Shopify App Store, listed separately from these themes. It adds sold counts over a window, campaign goal meters and a browse-wide free-shipping bar, all read from your own orders and inventory.

  • It is optional. Rally and Editorial are finished themes and are supported without it. Nothing in the theme is disabled, greyed out or replaced by an upsell if you never install it.
  • It is not bundled. Buying a theme does not include the app, and installing the app does not include a theme.
  • It does not place itself. After installing it you still open the theme editor and add each block where you want it, exactly as described above.
  • Its low-stock and free-shipping widgets cover the same ground as the theme's own built-in ones. Use one or the other on a given page rather than both.

9 · FAQ

Do I need the DropAloft app to use the theme?

No. Both themes are complete on their own, including the low-stock row and the free-shipping bar, which are theme features reading your store data. The app is a separate product and the theme is fully supported without it.

I installed an app and nothing appeared on my storefront. Why?

Because these themes ship app slots rather than pre-placed widgets. Nothing renders until you add the app's block yourself in Online Store → Themes → Customize, using Add block inside a section that accepts app blocks. You add one block per widget, per template. This is deliberate: an app you install cannot rearrange your storefront behind your back.

Where do I add a widget that has to appear on every page?

Add the Apps section to the header group or the footer group. Both groups render on every template, so a block placed there appears site-wide. In Editorial the Header and Footer sections accept app blocks directly.

I changed a colour and the storefront looks the same.

Save in the editor, then hard-refresh the storefront tab, or open it in a private window. The palette is served in a cached stylesheet.

Also check which mode you are looking at. Day and Night are separate palettes, so editing the Night colours changes nothing while you are viewing the storefront in Day.

Can I turn the Day / Night toggle off entirely?

Yes. Clear Allow shoppers to switch Day / Night under Theme settings → Day and night. Everyone then sees the mode you set as Default mode. You can also leave the setting on and clear Show day / night toggle on just the Header or just the Footer to control where it appears.

The low-stock row is missing on a product that is nearly sold out.

It appears only when every variant of that product tracks inventory and none is set to keep selling when out of stock. If any variant has inventory tracking off, there is no count to report and the row stays hidden. Check Inventory on the product in your admin.

Also check that your threshold is above the remaining count, and that it is not set to 0, which hides the row everywhere.

The free-shipping bar shows an amount checkout does not honour.

The theme setting only draws the bar. The rate itself lives in Settings → Shipping and delivery. Set a free shipping rate there with the same minimum order amount, in the same currency, and the two will agree.

Will I lose my settings if I switch themes?

Theme settings, section layouts and home page content belong to the theme they were configured on and do not transfer. Products, collections, pages, blog posts, menus, customers and orders are store data and are not affected. Your previous theme stays in your theme library, so publishing it again restores it exactly as it was.

Can I edit the theme code?

Yes, through Online Store → Themes → Edit code. Take a duplicate first. Edited code is not carried into theme updates, and we cannot support a modified copy in the same way, so keep changes small and note what you changed.

Which theme should I pick?

Pick Rally for a large catalog where filtering, sorting and stock signals do the work. Pick Editorial for a smaller range where photography, long copy and blog posts do it. Both can be added to your store as drafts at the same time, so you can set both up and compare before publishing either.

Do the themes support translations and multiple currencies?

Yes. Both use Shopify's locale files, so they work with the Translate and Adapt app and any other translation app that edits them. Both also render Shopify's country, currency and language pickers, in the footer on Rally and in the header on Editorial, and each can be switched off in that section's settings. Prices come from Shopify Markets, so no theme setting is needed for currency.

How do I get help with something not covered here?

Use the support form. Tell us which theme you are on and give us your store address, and we will reply by email.


10 · Get help

Send a message through the support form, or email hello@dropaloft.com. Include your store address, the theme you are using, and a link to the page you are asking about. Screenshots help and can be attached to an email.

A submitted form is stored and given a reference you can quote. We reply to the address you give us.