Header And Footer

Footer

Footer The footer is the band at the bottom of every page. It holds two parts: a content area you fill with blocks (menus, an email signup, your logo, text) and a bottom row the section builds for you (locale selectors, social icons, payment icons, copyright, and policy links). The footer lives in the Footer section group, not in the Add section list. Reign limits the store to one footer, so you edit the existing one. Footer with menus, signup, social links, and payment icons Open the footer 1. In the theme editor, open the section list on the left. 2. Find the Footer group near the bottom and click Footer to open its settings. 3. To change what shows in the content area, expand the section's blocks and edit the blocks nested under it (a Menu, an Email signup, a Group, and so on). Footer settings These settings control the section as a whole. The content above the bottom row comes from blocks, covered further down. Background - Background media: what sits behind the footer. None, Image, or Video. The next fields appear based on this choice. With an image or video set, the footer switches to light text for readability. - Background image: the image behind the footer. Shows when Background media is Image. - Background video: the video behind the footer. Shows when Background media is Video. - Overlay opacity: darkens the media so text stays legible. Higher values darken more. Shows when Background media is not None. Country/region selector - Show country/region selector: lets shoppers switch country or region in the footer. It appears on the storefront only when your store has more than one country or region in market settings. - Show country code: adds the two-letter country code next to the region name. Shows when Show country/region selector is on. Language selector - Show language selector: lets shoppers switch language in the footer. It appears only when your store has more than one published language. Social icons These two controls style the social row. The links come from theme settings (see Tips), so there are no link fields here. - Icon style: Outline or Pill. - Icon size: the icon size in pixels. Payment methods - Show payment icons: shows icons for the payment methods your store accepts. They appear only when at least one payment method is enabled. Policy links - Show policy links: shows links to your store policies (refund, privacy, terms, and so on). Each appears only once you have written that policy in your store policy settings. Copyright - Copyright text: your copyright line. Leave it blank to use the automatic line, which fills in the current year and your store name. - Show "Powered by Shopify": adds the "Powered by Shopify" credit next to the copyright. This section also uses the standard Color, Padding, and Margin controls. See Common section settings. Blocks inside the footer The content area above the bottom row is built from blocks. Any block can go here, arranged with groups. These three carry footer-specific behavior worth calling out. Menu Shows a column of links from one of your store navigation menus. It renders the top level of the chosen menu as a flat list and ignores any nested items. - Menu: which store menu to show. - Heading: the text above the link column. Leave blank to hide it. - Heading style: Default or Eyebrow (a small uppercase label). - Heading size: Small, Base, or Large. Shows when Heading style is Default. - Gap: the space between the links. - Link emphasis: link contrast, Normal, Muted, or Faded. - Inherit color scheme: keeps the footer's color scheme. Turn it off to set a Color scheme for this column alone. The Menu block also uses the standard Padding controls. See Common section settings. Email signup A newsletter form that collects email addresses. New subscribers are tagged as newsletter, so you can find them in your customer list. - Email placeholder: the hint text inside the email field. - Button label: the text on the submit button. - Success message: the text shown after someone subscribes. - Style: Default (a pill input with a button) or Editorial (a slim underlined row with an arrow). - Small text below form: an optional note under the form, for example a privacy line. - Alignment: aligns the form Left, Center, or Right. - Max width: the widest the form can grow, in pixels. The Email signup block also uses the standard Margin controls. See Common section settings. Social icons A row of social media icons. It has no link fields of its own: it reads the same links as the footer's built-in social row (see Tips). - Alignment: aligns the icons Left, Center, or Right. The Social icons block also uses the standard Margin controls. See Common section settings. Tips - Social links are not set on the section or the block. Open Theme settings, go to the Social media panel, and fill in the URL fields (Instagram URL, Facebook URL, and so on). Only the platforms you fill in show an icon. The footer's social row and the Social icons block both read these same links, so you enter them once. - The country/region selector, language selector, payment icons, and policy links appear only when the matching store data exists. If one is missing on the storefront, check your market settings, published languages, enabled payment methods, or written store policies. - Leave Copyright text blank to let the year update on its own. The automatic line fills in the current year and your store name.

Mega menu

Mega menu A mega menu turns a plain navigation dropdown into a wide panel with columns of links, product rails, or featured images. In Reign you build it from blocks inside the Header section, and each panel attaches to one top-level item in your store navigation. A mega menu needs two things to work together: 1. A navigation menu in your Shopify admin that has three levels (a top-level item, the columns under it, and the links inside each column). 2. A mega menu block in the Header section that names the same top-level item so Reign knows which dropdown to replace. If the block name and the menu item name do not match, the panel does not appear and the link falls back to a plain dropdown. Build the navigation menu first The link structure comes from your Shopify navigation, not from the theme. Set it up before you add the block. 1. In your Shopify admin, go to Online Store, then Navigation. 2. Open the menu your header uses. By default this is Main menu. (You can confirm which menu the header reads in the Header section under Menu.) 3. Add a top-level item, for example Shop. 4. Add items nested under it. Each second-level item becomes a column heading in the panel. 5. Add items nested under those. Each third-level item becomes a link inside that column. The column layout and link text always come from this menu. The blocks below control the panel style and any extra content. Add a mega menu block 1. In the theme editor, open the Header section. 2. Click Add block. 3. Choose one of the mega menu blocks (described below). 4. In the block settings, find the Binding heading and the Parent menu item field. 5. Type the exact name of the top-level menu item you want this panel to attach to, for example Shop. Match the spelling and capitalization of the menu item. You can add several mega menu blocks, one per top-level item, to give different sections of your store different panel styles. Choosing a panel style When you click Add block, Reign offers the mega menu in several starting layouts. The editor lists each one as Mega menu followed by the layout name. They share the same binding field and differ in what content they include. - Links: columns of navigation links only, taken from your menu. - Feature: link columns plus a media card for a featured image or video. - Collage: link columns plus an arrangement of media cards. - Editorial: link columns plus a captioned landscape image card. - Showcase: a two-card image gallery with headings, for an image-led panel. The five layouts above are presets of the one Mega menu block. After you add one you can add, remove, or rearrange the child blocks inside it. (For how presets and blocks work, see Sections, blocks, and groups.) The tabbed layout is a separate block with its own settings, covered below. Mega menu block settings This is the panel container. Its own settings are short because most content lives in the child blocks. Binding - Parent menu item: the name of the top-level navigation item this panel attaches to. Type it exactly as it appears in your menu. This is the link that the merchant defines: the panel replaces the plain dropdown for that item. The child blocks you can add inside this panel: - Menu links: the link columns. See its settings below. - Collage: a group of Media card blocks arranged into a layout. - Other content blocks such as Media card for a featured image or promotion. Menu links block settings Add this block inside a mega menu panel to render the link columns. The columns and link text come from the bound menu item; these settings control how they look and add optional extra text. - Intro text: a short line of text shown above the columns. - Button label: text for an optional call-to-action link below the columns. Leave it empty to hide the button. - Button link: where the call-to-action link goes. - Heading size: the size of the column headings. Choose Small, Base, or Large. - Link gap: the vertical space between links within a column, in pixels. - Column gap: the horizontal space between columns, in pixels. Tabbed mega menu block settings This is a separate block, listed in the editor as the Mega menu tabs layout. It binds to a top-level menu item the same way and holds Tab blocks instead of link columns. Binding - Parent menu item: the top-level menu item this tabbed panel attaches to. Type it exactly as it appears in your menu. Other settings on the tabs panel: - Intro text: a short line of text shown above the tab list. - Button label: text for an optional call-to-action link in the tab rail. Leave it empty to hide the button. - Button link: where that call-to-action link goes. Tab block settings Add a Tab block inside the tabs panel for each tab. Each tab is a row in the rail on the left and a content panel on the right. - Tab title: the tab name shown in the rail. - Tab description: a short line under the tab title in the rail. - Products heading: a heading shown above the product rail in the tab panel. - Collection: pick a collection to fill the product rail with its products. A collection takes priority over hand-picked products. - Products: hand-pick up to six products for the rail. Used only when no Collection is set. Each Tab can also hold a Media card for a featured image alongside the products. Tips - The panel only appears when the Parent menu item value exactly matches a top-level item in the header menu. If a dropdown looks plain, recheck the spelling against your navigation in the Shopify admin. - Columns and links come from your navigation, not from the block. To change which links appear or how they group, edit the menu under Navigation, not the theme. - A panel needs the menu item to have child items. A top-level item with no nesting has nothing to fill the columns. - One mega menu block attaches to one top-level item. Add a separate block for each item that should have a rich dropdown. - Whether dropdowns open on hover or click is set once for the whole header under Open menu on in the Header section, not per panel.

Top bar and announcements

Top bar and announcements The Top bar is the slim strip that sits above your header on every page. It shows scrolling announcements, social media icons, and language and country selectors. It belongs to the Header group in the theme editor, so it stays in place across your whole store rather than on a single page. Each message is its own Announcement block inside the bar. Find the Top bar Reign installs the Top bar by default, so in most stores it is already there. 1. In the Shopify admin, go to Online Store > Themes. 2. On Reign, click Customize. 3. In the left sidebar, open the Header group at the top of the section list. 4. Click Top bar to open its settings. The Top bar is part of the Header group. There is one for the whole store. Announcements Announcements are the messages that scroll across the center of the bar. Each message is a separate Announcement block, so you can run several in rotation. Reign starts you with three. To edit a message, click an Announcement block under Top bar in the section's blocks. Each block has: - Text: the message that scrolls across the bar. You can apply bold or italic and add a link. - Apply custom color: turn this on to override the bar's color scheme for this one message. - Custom color: the text color for this message. It appears only when Apply custom color is on. To add or remove a message, use Add block under the Top bar section, or click an existing Announcement block and remove it. Drag the blocks to change their order in the scroll. These settings on the Top bar section control how all announcements scroll, grouped under the Announcements heading: - Separator: the symbol placed between messages. The options are None, Bullet (•), Slash (/), Chevron (›), Middle dot (·), Em dash, Asterisk (✦), and Diamond (◆). - Scroll speed: how fast the messages move across the bar. A higher value moves faster. - Gap: the space between each item in the scroll, in pixels. - Pause on hover: stops the scroll while a visitor hovers over the bar, so they can read a message. Color - Color scheme: the color scheme applied to the whole bar. This sets the background and text colors. Pick a scheme that contrasts with your header below it. Schemes are defined in Theme settings under Colors. Social media icons - Show social media icons: turn the row of social icons on or off. The icons sit on the left of the bar. The icons read from the social media URLs in your theme settings. To set or change them, go to Theme settings > Social media and fill in each platform's URL. An icon appears only for a platform that has a URL. Language selector - Show language selector: turn the language menu on or off. It sits on the right of the bar. The selector appears to shoppers only when your store offers more than one language. To add a language, go to your Shopify Settings > Languages. Country/region selector - Show country/region selector: turn the country and region menu on or off. It sits on the right of the bar. The selector appears to shoppers only when your store ships to more than one country or region. To add one, go to your Shopify Settings > Markets. Layout - Show on mobile: keep the bar visible on phones, or hide it there to save vertical space. When on, the bar shows on every screen size. When off, it shows on desktop only. Tips - If the language or country selector does not appear, confirm the matching toggle is on and that your store has more than one language or market. With only one of each, the selector stays hidden even when the toggle is on. - If the icon row is empty while Show social media icons is on, no social URLs are set. Add them under Theme settings > Social media. - To run a single static message instead of a scroll, keep one Announcement block. The scroll still applies, but with one item there is nothing to rotate between.

Header and navigation menu

Header and navigation menu The header is the bar at the top of every page: your logo, the main navigation menu, and the search, account, and cart actions. In the theme editor it lives in the Header group, not on an individual page, so any change you make applies across the whole store. Open the header settings 1. In the Shopify admin, go to Online Store then Themes. 2. On Reign, click Customize. 3. In the top section group list (left side), open the Header group and click Header. 4. The header settings open on the right. The header cannot be added or removed like a page section. It is always present, and you can only have one. To control the message bar above it, edit the Top bar entry in the same Header group. Color - Color scheme: picks which of your saved color schemes paints the header background, text, and buttons. Schemes are defined under Theme settings then Colors. Logo Your logo image, sizes, and inverted version are set under Theme settings, not here. A link in this group points you there. The two settings below apply only when no logo image is set, so the store name shows as text. - Store name: overrides the text shown in place of a logo. Leave it blank to use your shop name. - Uppercase: shows the text store name in all capitals. Layout - Desktop menu: chooses how the navigation appears on desktop. - Full menu shows the menu items across the header. - Hamburger hides the items behind a menu icon, the same icon used on mobile. - Open menu on: chooses whether a dropdown opens when a shopper hovers over a parent item (Hover) or clicks it (Click). This appears only when Desktop menu is set to Full menu. - Sticky header: controls whether the header stays on screen as a shopper scrolls. - Always visible keeps it pinned to the top at all times. - Show on scroll up hides it while scrolling down and brings it back when the shopper scrolls up. - Never sticky lets it scroll away with the page. Menu - Menu: selects which navigation menu fills the header. You build and reorder the actual links in the Shopify admin under Online Store then Navigation, not in the theme editor. Nested items in that menu become dropdowns in the header. Actions These control the icons and button on the right side of the header. - Show search: shows or hides the search icon. - Show account: shows or hides the account icon. It appears only when customer accounts are turned on for your store. - Account menu: selects the navigation menu shown to a signed-in customer. This appears only when Show account is on. - Cart icon: the cart link is always shown and has no toggle. A count badge appears on it once the cart holds items. Whether clicking it opens a slide-in drawer or the full cart page is set by Cart type in Cart settings. - Button label: text for an optional call to action button in the header, for example a promotion or a sale link. Leave it blank to hide the button. - Button link: the destination for that button. The dark header over a section The header reads as light by default. When a section underneath it has a dark background (a hero image, a dark color scheme), the default header can be hard to read. You fix that from the section, not from the header: open the top section and turn on Use dark header theme over this section. The header switches to its dark styling while it sits over that section. This control is documented in Common section settings, and it appears on full-width sections that can sit behind the header. Dropdowns and mega-menus A parent item with child items in your navigation menu produces a dropdown automatically. The header can also hold richer mega-menu panels as an advanced option. For most stores, building a well-structured menu in your store's navigation settings is all you need. The Menu block Reign ships a Menu block you add elsewhere, most often in the footer or a group. It renders one navigation menu as a list and is separate from the header. In Add block it appears under Links. - Menu: the navigation menu to display. Only top-level items render. Nested items are ignored. - Heading: an optional title above the list. - Heading style: Default for a normal heading, or Eyebrow for a small uppercase label. - Heading size: Small, Base, or Large. This appears only when Heading style is Default. - Gap: vertical spacing between links, in pixels. - Link emphasis: Normal, Muted, or Faded, to make the links quieter against the surrounding content. The Menu block also uses the standard Color and Padding controls. See Common section settings. The Logo block A Logo block places your store logo anywhere on the page, most often in the footer. The logo image comes from Theme settings under Branding. In Add block it appears under Basic. - Use inverted logo: shows the inverted logo version where it reads better against a dark surface. This appears only when both a logo and an inverted logo are set in theme settings. - Link: where the logo links to. It defaults to the home page. - Alignment: Left, Center, or Right. - Desktop width and Mobile width: the logo width on each screen, in pixels. The Logo block also uses the standard Margin control. See Common section settings. Tips - The header's links come from the navigation menu you pick in Menu, not from blocks. To change what appears in the bar, edit that menu under Online Store then Navigation. - If the account icon is missing even with Show account on, confirm customer accounts are enabled in your Shopify settings. - If you choose Show on scroll up or Never sticky, test a long page on a phone so the header behaves the way you expect while scrolling.