Running Brandage,no tears required.

Two minutes here makes every other chapter easier: where things live in the admin, and the safe way to change them.

Where things live

Almost everything on the storefront is changed in one of four places. Find the right one and the change itself is usually a single field.

Products

Prices, compare-at prices, stock, product names and the product photos used in the cart, checkout and emails.

Products

The theme editor

The words and pictures of the design: the hero, the home page bands, the product page gallery, the footer.

Online StoreDesignDesign

Navigation

The main menu across the top of every page.

Online StoreNavigation

Pages

Contact, Patents, the landing page, and any new page you create.

Online StorePage

The safe way to make a change

Small edits, such as swapping a photo or rewording a heading, are fine to make straight on the live theme. Nothing reaches shoppers until you press Save, and the editor has undo arrows at the top. For anything bigger, work on a copy first:

1. Go to Online StoreDesign. On the Brandage_LIVE card, open the ⋯ menu and choose Duplicate. The copy appears below, under Theme library.
2. On the copy, click Design and make your changes. Press Save as you go. Shoppers still see the live theme.
3. Click Preview on the copy and look at it on a computer and on a phone.
4. Happy? Open the copy’s ⋯ menu and choose Publish. The old theme moves to the Theme library and stays there as your way back.

Brandage’s two typefaces are part of its personality, so they live in the theme’s code. Here’s how to swap one safely.

Brandage uses two Google fonts: Bagel Fat One for headings and Inter for everything else. They are set in the theme’s code rather than in a settings panel. That keeps every heading, button and price looking exactly as designed, but it also means the font menus under Theme settingsTypography won’t change them. Don’t worry if you try those and nothing moves.

Swapping a font is a careful two-line edit. Here is how, step by step:

1. Make a copy first. Duplicate the live theme, as in the safe way to make a change, and do everything below on the copy.
2. Pick your font on fonts.google.com. Note its exact name and the weights you want. Inter is used at 400, 500, 600, 700 and 800.
3. On the copy in the Theme library, open ⋯ and choose Edit code.
4. Open layout › theme.html and find the line that loads the fonts. Swap the family names for your new ones, using + instead of spaces:

   <link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

5. Open public › base › brandage.css. Near the top, under Type, change the names in quotes to match:

   --bd-font-display: "Bagel Fat One", system-ui, sans-serif;
   --bd-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

6. Save both files, then Preview the copy. Check the home page, a product page and the cart, on a phone too. Headings, buttons and prices should all show the new font.
7. When it all looks right, Publish the copy.

The first thing every visitor sees. Swapping the photo takes a minute, and no code at all.

The hero is the first band on the home page: the big “Tatts. Not Tears.” heading with the photo beside it. The photo, the words and the button all live in one component.

1. Go to Online StoreDesign and click Design on the live theme. The editor opens on the Home page.
2. In the left-hand list, under Template, click Brandage hero.
3. On the right, under Image, click the current picture to replace it. Upload a new photo or pick one you uploaded before.
4. Fill in Image alt text: a short description of the photo, for people using screen readers. For example, “Toddler’s wrist with three Brandage tattoos”.
5. Press Save at the top right. The new photo is live straight away.

Picking a good hero photo

• Square works best. The photo is shown as a square and cropped to fill it, so keep the important part (the tattoo!) near the middle.
• At least 1200 × 1200 pixels, as a JPG or WebP. Shopline makes smaller copies for phones automatically.
• Bright and simple. A soft, plain background, like the pale blue wall in the current photo, lets the tattoos pop. The brand book has more on photography.

The rest of the hero

The same component holds Heading line 1, Heading line 2 (yellow), the Text under them, and the Button label and Button link. Two settings are best left alone: Fallback image file is a built-in backup photo that only shows when no image is picked, and Heading tag (SEO) should stay on h2 on the home page.

Keep old links working when an address changes, so nobody lands on a dead end.

A redirect sends anyone who visits an old address straight to a new one, so links in old emails, posts and search results keep working. Reach for one when you rename a product, retire a page, or find an address from the old store that no longer leads anywhere.

1. Go to SettingsDomains and scroll to 301 Redirect. Click Manage redirections.
2. Click Add redirect.
3. In Redirect from, enter the old address, starting with a slash and without the domain. For example: /products/old-bandage-name
4. In Redirect to, enter where it should go now. For example: /products/brandage-adhesive-bandages
5. Click Add.
6. Test it: open the old address in a private (incognito) window. You should land on the new page.

A few friendly rules

• Point straight at the final page. If A already goes to B and B now goes to C, point A at C too. Chains of redirects are slow and can confuse search engines.
• One old address, one redirect. Use the search box in the redirect list to check whether an address is already redirected before adding it again.
• Lots of addresses? Use Import: download the template, fill one row per redirect, and upload it.
• On the same Domains page, 404 page not found decides what happens on an address that doesn’t exist at all. It is set to show the friendly 404 page, and we suggest keeping it that way.

A page of its own for a campaign, a partner or a season, built from the Brandage components you already know.

Every page takes its look from a template. The store already has one called Landingpage: the home page layout (hero, scrolling strip, packs, how it works, designs, trust badges, results, specs, reviews and newsletter), used today by the page at /pages/landing-page.

Pages that share a template also share its words and pictures. To give a new campaign its own photos and headings, first make it a template of its own. It takes about five minutes.

Step 1: make a template for it

1. Go to Online StoreDesign and click Design on the live theme.
2. In the page selector at the top (it says Home page), choose Custom page+ Create a template.
3. Give it a Template name of up to 25 characters, such as summer-camp. For Based on template, choose Landingpage. Click Create.
4. The editor now shows your new template. Change the hero, headings and photos; hide a component with its eye icon, or add more Brandage components with Add component. Press Save.

Step 2: create the page

1. Go to Online StorePage and click Create a page.
2. Give it a Page title. The Content box can stay empty, because a landing template shows its components instead.
3. Under Theme template, choose the template you just made.
4. Under Search Engine Optimization, click the pencil to set the page’s address, for example /pages/summer-camp, and its search title and description.
5. Under Publish page, choose Publish, or Hide while you are still working on it. Click Save.
6. New pages don’t appear in any menu by themselves. Share the link directly, or add it to the main menu.

Prices and stock live with the product; the product page’s gallery lives in the theme. Here’s which is which.

Each pack is its own product in Shopline, with its own price and stock. A product’s details are edited in two places, and it helps to know which is which.

In Products: prices, stock and product photos

1. Go to Products and click the pack you want to change.
2. Change the Name, the Price, or the Compare-at price. Set a compare-at price higher than the price and the product page shows the old price struck through, with a “you save” pill.
3. Under Image/video, add photos with the + or by dragging them in. Drag the dotted handle to reorder them; the first photo is the cover.
4. Click a photo to add its ALT text, a short description for screen readers.
5. Click Save, or Update on an existing product.

The product photos here are what shoppers see in the cart, at checkout, in order emails, in search results and on the collection page.

In the theme editor: the product page gallery and words

The big gallery on the product page, and the “What you get” text beside it, are part of the design. That lets every pack share the same lifestyle photos.

1. Open the theme editor (Online StoreDesignDesign) and, in the page selector at the top, choose Products and any pack.
2. Click Brandage product in the left-hand list.
3. The first gallery photo belongs to each pack: open the pack’s block (for example Single Pack) and change its Gallery image and Image alt text.
4. Photos 2, 3 and 4 are shared by every pack: change Image 2, Image 3 and Image 4 on the Brandage product component itself, each with its own label and alt text.
5. The What you get heading, intro and details, the button labels and the payment note are in the same component. Press Save.

Add, rename or reorder the links across the top of every page.

The links across the top of every page (Home, Bandages, Contact) come from a navigation menu called Main menu.

1. Go to Online StoreNavigation and click Main menu. It is the one marked Used.
2. To add a link, click + Add menu item. Fill in the Menu item title (the words shoppers see) and the Referral URL (pick a product, collection or page, or paste an address). Click Add.
3. To reorder, drag a link by its dotted handle. To rename or remove one, use its pencil or bin icon.
4. To make a drop-down, click the + next to a link and add items under it. The header shows one level of drop-down.
5. Click Update, then reload the storefront to see it.

The link columns at the bottom of every page, changed right in the theme editor.

The footer’s link columns (Help, Shop and Policies) are edited in the theme editor, right where you can see them.

1. Open the theme editor (Online StoreDesignDesign). At the bottom of the left-hand list, under Footer, open Brandage footer.
2. Click a column, for example Help. Each column has a Heading and room for six links: Link 1 label with Link 1 URL, and so on.
3. Change a label or a link. To remove a link, clear its label. To add one, fill in the next empty pair.
4. Press Save.

More footer options

• A new column: add a Link column (type the links yourself) or a Menu column (shows a menu from Navigation) inside Brandage footer. Drag columns to reorder them; the eye icon hides one.
• The short description and logo are on Brandage footer itself.
• Social icons: turn them on with Show social icons. The links come from Theme settingsSocial media, the second icon in the editor’s left edge.
• Copyright line: type [year] and it always shows the current year.

Where the emails from the sign-up band end up, and how to find them again.

The sign-up band (“New tattoo designs, once a season”) sits at the bottom of the home page and the landing page. Every email entered there is saved in Shopline as a customer, subscribed to email marketing, with the tag newsletter.

Finding your subscribers

1. Go to CustomersTags.
2. Find newsletter in the list and click its number to see everyone who signed up.
3. In the customer list, the Email subscription status column shows Subscribed for each of them.
4. To use the list in an email tool, click Export at the top of the Customers page.

You can also filter the main customer list with Add filter and choose the tag, or build a saved group under CustomersSegments.

Changing the words

In the theme editor, open Brandage newsletter on the home page. There you can edit the Heading, Text, Field label, Placeholder, Button label, the Help text under the field and the Success message. The landing page has its own copy of the band, in its own template.

The small things people ask about most, all in one place.

The yellow bar at the top

Theme editorHeaderBrandage announcement, then its Message. Add a second message and they take turns. You can also pick the background colour and whether it scrolls on phones.

Free shipping message

Theme settingsBrandage cart: the Free shipping threshold and the two messages in the cart. This changes the message only. The actual shipping price is set in SettingsShipping and delivery, so change both together.

Social links

Theme settingsSocial media: paste the full address of each profile.

Browser tab icon

Theme settingsFavicon: a small square image.

All your uploads

SettingsFile library: every image you have uploaded, in one place. Leave files set to Public; a private file can’t show on the store.

The store password

Online StorePreferences › Password protection. It switches off by itself once your own domain is connected and set as the main one, so the store opens to everyone at that moment.

Thirty seconds of checking saves an awkward afternoon.

A quick once-over before (and just after) pressing Save or Publish:

• Looked at the change on a phone as well as a computer (the phone icon at the top of the editor).
• Clicked every new or changed link and button once.
• Every new photo has alt text.
• Prices were changed in Products, not typed into the design.
• New redirects tested in a private window.
• For bigger changes: worked on a copy of the theme, and the old one is still in the Theme library.

If something looks wrong after publishing, don’t panic. Publish the previous theme from the Theme library and the store is back exactly as it was. Then tell us what happened and we’ll sort it out together.