Header

These settings control everything at the top of your store: the optional mini top bar and announcement bars, the main header with its logo, menu links and icons, plus the parts connected to it such as the mobile side menu, the mobile bottom bar, the category row, the search window and the cart drawer. You’ll find them in the theme customizer under Header, where each group below has its own tab (for example Header → Announcement Bar).

Mini Top Bar

A slim bar at the very top of the page for quick links (such as Track Order or Help), a short message, and language and currency buttons.

• Display Mini Top Bar - turns the bar on. It only appears once you’ve added at least one link, written a short message, or turned on the language or currency option.

Mini Top Bar - Layout & Placement

• Bar Placement - Top of page (above announcement bar) puts the bar at the very top of the page. Below announcement bar (directly above header) puts it between the announcement bars and the main header.
• Links Alignment - where the bar’s content sits: Start, Center, End, or Space Between (the links on one side and the language, currency and message on the other).
• Bar Height (px) - how tall the bar is, from 24 to 70 pixels.
• Full Width - when on, the content spreads across the full screen width instead of staying within the normal page width.
• Hide bar on Desktop - hides the bar on tablets and computers.
• Hide bar on Mobile - hides the bar on phones.
• Hide bar on scroll - the bar folds away as soon as visitors scroll down, and comes back when they return to the top. Only works when Sticky Header is on.
• Show bottom divider - adds a thin line along the bottom of the bar.

Mini Top Bar - Colors & Typography

• Background Color (Light) - the bar’s background color when the store is in light mode.
• Text Color (Light) - the color of the bar’s text and links in light mode.
• Background Color (Dark) - the bar’s background color in dark mode.
• Text Color (Dark) - the color of the bar’s text and links in dark mode.
• Link Hover Color (optional) - the color a link changes to when a visitor points at it. Leave it empty and links simply fade slightly instead.
• Text Size (px) - the size of the text in the bar, from 10 to 20 pixels.
• Font Weight - how bold the text looks: Regular, Medium, Semi Bold, or Bold.
• Gap Between Items (px) - the space between neighboring links and items in the bar.

Mini Top Bar - Top Bar Links

Add one entry for each link you want in the bar. Each link has these options:

• Text - the wording of the link. A link without text is not shown.
• Link - the page the link opens.
• Icon SVG (optional) - paste an icon’s SVG code here to show a small icon before the text.
• Icon Image (optional) - upload a small image to use as the icon instead. If both icon options are filled, the SVG icon is used.
• Badge Text (e.g. Sale) - a short word shown in a small colored tag after the link text. Leave it empty for no tag.
• Badge Background Color - the fill color of the tag.
• Badge Text Color - the color of the text inside the tag.
• Highlight this link - shows this link’s text in a special color so it stands out from the others.
• Highlight Color - the color used when Highlight this link is on.
• Open in new tab - opens the link in a new browser tab.
• Hide this link - hides the link without deleting it.
• Hide on Desktop - hides this link on tablets and computers only.
• Hide on Mobile - hides this link on phones only.

Mini Top Bar - Language, Currency & Message

• Show Language/Region in bar - adds a button showing the current language that opens the language and region window. Its icon follows Region Icon Type in the Header tab.
• Show current currency in bar - shows the visitor’s current currency. Tapping it opens the same language and region window.
• Short Message - a short line of text, such as a free shipping note. Leave it empty to hide it.
• Placement of language/currency/message - Opposite side of links places these items after the links (they move to the far side when Links Alignment is Space Between). Before the links places them ahead of the links.

Announcement Bar

Colored strips above the header that show scrolling or rotating messages. You can add several bars, and they stack one below the other.

• Display Announcement Bar - turns announcement bars on. Nothing shows until you’ve added at least one bar with a message.

Announcement Bar - Announcement Bars

Add one entry for each bar. Every bar has its own messages and look:

• Texts List - the messages shown in this bar. Add one entry per message, each with the two options below.
• Text - the wording of the message.
• Link - an optional page the message opens when clicked.
• Animation - how the messages move: Marquee scrolls them continuously across the bar, Slide Vertical shows one message at a time and slides vertically to the next, and Slide Horizontal shows one message at a time and slides sideways to the next.
• Background Color - the bar’s background color.
• Text Color - the color of the messages.
• Background Gradient (CSS) - optionally paste a CSS gradient value to use a blend of colors as the background. When filled, it replaces Background Color. Incorrect code can leave the bar without a proper background, so leave it empty if you’re not sure.
• Animation Speed - from 1 to 10. Higher numbers make the marquee scroll faster, or make the slides switch to the next message more often.
• Text Size (px) - the size of the message text, from 10 to 22 pixels.
• Bar Height (px) - how tall this bar is, from 28 to 80 pixels.

Announcement Bar (continued)

• Move language icon from header to announcement bar - removes the language and region button from the header and shows it inside the first announcement bar instead. Only takes effect while announcement bars are displayed.
• Show current currency in announcement bar - shows the visitor’s current currency inside the first announcement bar. Tapping it opens the language and region window.

Header

• Header Layout - the arrangement of the main header. Default (Logo Center) places the menu links on one side, the logo in the middle and the icons on the other side. Style 2 (Logo - Links - Actions) puts the logo at the start, the links in the middle and the icons at the end. Style 3 (Floating Header) uses the same arrangement as Style 2 inside a rounded, see-through glass card that floats slightly away from the screen edges. Style 4 (Search & Links) shows the logo, a wide search box and the icons on the first row with the menu links on a second row below, always on a solid background; on phones and tablets the links row can be scrolled sideways. Style 5 (Animated Menu) uses the Style 2 arrangement with animated hover effects on the links and dropdown menus that slide down from the header. Styles 3 and 5 each have their own options group below, which only appears when that style is chosen.

Header - Style 5 Options

These options only appear, and only take effect, when Header Layout is set to Style 5 (Animated Menu).

• Menu Hover Effect - what happens when a visitor points at a menu link: Animated background slides a colored pill in behind the link, Dot shows a small dot under the link, and None adds no effect. The effect shows on devices with a mouse.
• Hover color (leave empty to use the primary color) - the color of the animated background or of the dot. Leave it empty to use your store’s primary color.
• Animated background text color (leave empty to match the primary color) - the color of the link text on top of the animated background. Only used with the Animated background effect. Leave it empty for a color that suits the primary color.
• Sticky Behavior - Always visible keeps the header on screen at all times. Hide on scroll down, show on scroll up tucks the header away while visitors scroll down the page and brings it back as soon as they scroll up. Needs Sticky Header to be on.
• Shrink bar on scroll - makes the header a little shorter, with a smaller logo, once visitors scroll down.
• Curved corners under the bar on scroll - adds small rounded corners under the header’s bottom edges after scrolling, for a softer look. They aren’t shown while the Category Subheader is displayed.
• Dim the page while a menu is open - darkens the page behind the header while a dropdown or mega menu is open, so the menu stands out.

Header - Floating Header Options

These options only appear, and only take effect, when Header Layout is set to Style 3 (Floating Header).

• Card Appearance - Always a card shows the floating glass card at all times, including over the top of the homepage. Transparent, card on scroll keeps the header see-through over the top of the homepage and turns it into the floating card once visitors scroll.
• Enable floating header on mobile - when on, phones also get the rounded floating card. When off, phones show a normal full-width header.
• Hide the card when scrolling down (mobile) - on phones, the card slides out of view while visitors scroll down and comes back when they scroll up. Only works when Enable floating header on mobile and Sticky Header are both on.

Header - Branding

• Logo Height (px) - how tall the logo appears in the header, from 24 to 100 pixels.
• Mobile Logo Height (px) - a separate logo height for phones and tablets, from 0 to 80 pixels. Leave it at 0 to use the same height as on computers.
• Center the logo in the header on mobile - on phones and tablets, places the logo exactly in the middle of the header, whichever icons sit on either side of it.
• Store logo treatment on transparent & dark header - only applies when you haven’t uploaded logos in the Header tab, so the header uses the logo from your Zid dashboard. It adjusts that logo when it sits on the transparent homepage header or in dark mode: Invert (for single-color black logos) flips its colors so a black logo turns white, Force solid white turns the whole logo white, and None (colored logos) shows it unchanged.

Header - Mobile Style (Header & Tabs)

• Mobile header & tabs style - the look of the header and the bottom bar on phones. Default (Logo center) shows the usual header row with the logo in the middle and icons around it, and a bottom bar with Home, Categories, Wishlist, Cart and Account. Prominent search (search bar + categories icon) replaces the header row with a menu button, a large search bar and a cart button, and the bottom bar shows Home, Categories, your logo in the middle, Wishlist and Account. With Header Layout Style 4, the scrolling links row stays under the search bar.
• Show a search bar under the header (default style) - adds a wide search bar below the header on phones, showing your search hint text. Tapping it opens the search window. It only works with the Default (Logo center) mobile style, since Prominent search already has its own search bar.

Header (continued)

• Sticky Header - keeps the header pinned to the top of the screen while visitors scroll. Scroll-based options, such as hiding bars on scroll and the homepage header turning solid after scrolling, need it to be on.
• Header Position (Home) - how the header sits on the homepage. Beginning (Over Hero) lays it see-through over your first section, with white text and icons, and it turns solid once visitors scroll. Above Hero (With White Background) places it above the first section with its normal solid background. Other pages always use a solid header, and so do Style 4 and the Floating Header set to Always a card.
• Show ‘All Categories’ - shows the All Categories item from your store’s main menu in the header, with a dropdown of your categories. When off, that item is removed from both the header and the mobile side menu.
• Spread categories as separate header items - instead of one All Categories item, each category appears as its own item in the header, with its sub-categories in a dropdown. Only available when Show ‘All Categories’ is on.
• Show a mega menu instead of the dropdown - menu items that have sub-items open a wide panel with columns of links and optional link cards, instead of a simple dropdown list.

Header - Mega Menu Options

These options appear when Show a mega menu instead of the dropdown is on.

• Menu Content Source - Automatic (menu sub-categories) builds the columns from each menu item’s sub-categories, listing their own sub-categories underneath. Custom (link groups) shows the Link Groups you build below as the columns instead, in every mega menu.
• Mega Menu Layout - the panel design. Style 1 (Columns + Link Cards) is currently the only choice: columns of links on one side and link cards on the other.
• Columns - how many columns the links are arranged in on computers, from 2 to 6.
• Show the category or product image inside link cards - adds a small picture of the chosen category or product to each link card.
• Link Cards Area Width - how much of the panel the link cards take up: Narrow, Medium, or Wide.

Header - Mega Menu Colors

These colors appear when the mega menu is on. Leave any of them empty to use the theme’s default colors.

• Light — Menu Background - the panel background in light mode. With Style 5, leaving it empty matches the header background.
• Light — Column Headings - the color of the column titles in light mode.
• Light — Links - the color of the links under each column in light mode.
• Light — Link Card Background - the fill color of the link cards in light mode.
• Light — Link Card Text - the text color inside the link cards in light mode.
• Dark — Menu Background - the panel background in dark mode. With Style 5, leaving it empty matches the header background.
• Dark — Column Headings - the color of the column titles in dark mode.
• Dark — Links - the color of the links under each column in dark mode.
• Dark — Link Card Background - the fill color of the link cards in dark mode.
• Dark — Link Card Text - the text color inside the link cards in dark mode.

Header - Link Groups

These appear when the mega menu is on, and are used as the mega menu columns when Menu Content Source is set to Custom (link groups). Add one entry per column:

• Group Name - the heading of the column.
• Group Name Color (Optional) - a custom color for this heading. Leave it empty to use the Column Headings color.
• Group Links Color (Optional) - a custom color for this column’s links. Leave it empty to use the Links color.
• Group Links - the links listed in this column. Add one entry per link, each with the three options below.
• Select Category - the category the link points to.
• Name (leave empty to use the category name) - the wording of the link. Leave it empty to show the category’s name.
• Link (leave empty to use the category link) - a different page for the link to open. Leave it empty to open the selected category.

Header - Mega Menu Link Cards

Shortcut cards shown beside the columns in every mega menu, when the mega menu is on. Add one entry per card:

• Select Category - the category the card points to.
• Or Select a Product - pick a product for the card instead. If you choose both, the category is used.
• Name (leave empty to use the category or product name) - the card’s text. Leave it empty to show the category or product name.
• Link (leave empty to use the category or product link) - a different page for the card to open. Leave it empty to open the selected category or product.

Header - Header Menu Links

Choose how your main menu’s links look in the header, and hide some of them. Apart from Show menu links in uppercase and Hide Home link, these don’t change the mobile side menu.

• Highlight the current page link - underlines the header link of the page the visitor is on, so they can see where they are. With Style 5 and a hover effect, the current link keeps its animated background or dot instead.
• Show menu links in uppercase (English) - shows the main menu links in capital letters on the English store, in the header and in the mobile side menu. It’s on by default; turn it off to keep the links as you wrote them. It has no effect on Arabic text.
• Hide all header links - removes every menu link from the header, leaving just the logo and icons.
• Hide Home link - removes the Home link from the header and from the mobile side menu.
• Hide All Categories link - removes the All Categories item, and any individual category links, from the header.
• Hide All Products link - removes the All Products link from the header.
• Hide Blog link - removes the Blog link from the header.

Header - Many Links Display

What happens on computers when your menu has more links than fit comfortably beside the logo and icons.

• Display when there are many links - No change (next to the logo) keeps all links in the header row as usual. Separate row below the header moves the links to their own centered row under the logo and icons. “More” button shows as many links as fit and gathers the rest under a More item at the end, which opens a panel listing them with their sub-links.
• Activate above this many links (0 = based on available space) - when the chosen display kicks in, from 0 to 30. At 0 it switches only when the links don’t fit in the space available. Any other number switches once the menu has more links than that number.

Header (continued)

• Expand mobile submenus by default - when on, the sub-lists in the mobile side menu start opened instead of collapsed.
• Light — Background Color - the header’s background in light mode whenever it’s solid (on inner pages, after scrolling, or when placed above the hero). It’s also used for the Category Subheader and the Style 5 dropdowns. Leave it empty to use the theme’s background color.
• Light — Text & Icons Color - the color of the header’s links and icons in light mode when it’s solid. Leave it empty to use the theme’s text color.
• Dark — Background Color - the header’s solid background in dark mode.
• Dark — Text & Icons Color - the color of the header’s links and icons in dark mode.
• Logo (Dark) - a dark version of your logo, shown on light backgrounds such as the solid header in light mode. It also appears in the mobile side menu and, with Prominent search, in the middle of the mobile bottom bar.
• Logo (White) - a light version of your logo, shown over the transparent homepage header and in dark mode. If you upload only one of the two logos, it’s used everywhere. If you upload neither, the logo from your Zid dashboard is used.
• English Logo (Dark) - an optional dark logo used instead when the store is viewed in English.
• English Logo (White) - an optional light logo for the English store. If you upload neither English logo, the English store uses the logos above.
• Menu Icon Type - Default uses the theme’s menu icon, and SVG Code lets you use your own. This button opens the mobile side menu, and a custom icon also replaces the icon of the Categories tab in the mobile bottom bar.
• Menu SVG Code - paste the icon’s SVG code here when Menu Icon Type is set to SVG Code.
• Search Icon Type - the icon of the header’s search button, and of the search box in Style 4.
• Search SVG Code - paste the icon’s SVG code here when Search Icon Type is set to SVG Code.
• Login Icon Type - the account icon shown to visitors who aren’t signed in, in the header and in the mobile bottom bar.
• Login SVG Code - paste the icon’s SVG code here when Login Icon Type is set to SVG Code.
• Cart Icon Type - the cart icon in the header, in the Prominent search mobile header and in the mobile bottom bar.
• Cart SVG Code - paste the icon’s SVG code here when Cart Icon Type is set to SVG Code.
• Region Icon Type - the icon of the language and region button in the header, the mini top bar and the announcement bar. Default shows a globe, Country Flag shows the flag of the visitor’s selected country, and SVG Code uses your own icon.
• Region SVG Code - paste the icon’s SVG code here when Region Icon Type is set to SVG Code.
• Search Input Icon Type - the magnifier icon inside the text box of the search window.
• Search Input SVG Code - paste the icon’s SVG code here when Search Input Icon Type is set to SVG Code.
• Search Close Icon Type - the icon that closes the search window.
• Search Close SVG Code - paste the icon’s SVG code here when Search Close Icon Type is set to SVG Code.
• View All Arrow Icon Type - the arrow on the View All Products button at the end of search results.
• View All Arrow SVG Code - paste the icon’s SVG code here when View All Arrow Icon Type is set to SVG Code.
• Close Icon Type - the close icon of the mobile side menu, the cart drawer and the quick view window.
• Close SVG Code - paste the icon’s SVG code here when Close Icon Type is set to SVG Code.
• Arrow Down Icon Type - the small arrow next to header links that open a dropdown, and next to expandable items in the mobile side menu.
• Arrow Down SVG Code - paste the icon’s SVG code here when Arrow Down Icon Type is set to SVG Code.
• Fly-out Arrow Icon Type - the side arrow next to dropdown items that open a further sub-list.
• Fly-out Arrow SVG Code - paste the icon’s SVG code here when Fly-out Arrow Icon Type is set to SVG Code.
• Remove/Trash Icon Type - the icon for removing a product from the cart drawer.
• Remove SVG Code - paste the icon’s SVG code here when Remove/Trash Icon Type is set to SVG Code.

Header - Header Icons (Mobile)

These control the icons in the standard header row on phones and small tablets. When Mobile header & tabs style is set to Prominent search, phones show the search bar row instead, so these options then only affect tablet-sized screens. Before logo and After logo set which side of the logo each icon sits on.

• Hide Menu Icon on Mobile - hides the menu button.
• Menu Icon Position - whether the menu button sits Before logo or After logo.
• Hide Account Icon on Mobile - hides the account button.
• Account Icon Position - whether the account button sits Before logo or After logo.
• Hide Cart Icon on Mobile - hides the cart button.
• Cart Icon Position - whether the cart button sits Before logo or After logo.
• Show Language/Region Icon - shows the language and region button, which is hidden on mobile by default. It isn’t available when the language icon has been moved to the announcement bar.
• Language/Region Icon Position - whether the language and region button sits Before logo or After logo.
• Hide Wishlist Icon on Mobile - hides the wishlist button. It’s on by default, so turn it off if you want the wishlist button to show.
• Wishlist Icon Position - whether the wishlist button sits Before logo or After logo.
• Hide Search Icon on Mobile - hides the search button.
• Search Icon Position - whether the search button sits Before logo or After logo.

Header - Header Icons (Desktop)

These hide individual icons from the header on tablets and computers, and set how the icons are arranged on computers.

• Hide Search Icon on Desktop - hides the search button, and the search box in Style 4.
• Hide Account Icon on Desktop - hides the account button.
• Hide Wishlist Icon on Desktop - hides the wishlist button. It’s on by default, so turn it off if you want the wishlist button to show.
• Hide Cart Icon on Desktop - hides the cart button.
• Hide Language/Region Icon on Desktop - hides the language and region button. It’s on by default, so turn it off if you want the language and region button to show.
• Search Icon Position on Desktop - With the other icons keeps the search button in the icon group. Opposite side (header start) moves it to the other end of the header, at the start of the row.
• Icon Order on Desktop - the order of the icons in the group: Cart first, or Account, wishlist, then cart.
• Show icon labels on Desktop - adds a short name next to the search, account, wishlist and cart icons on computers, such as Cart or Wishlist.

Mobile Side Menu

The menu that slides out when visitors tap the menu button on phones and tablets. It lists your store’s main menu, with a country and currency selector at the bottom.

• Menu Header Shows - what appears at the top of the menu: Store Logo or Text.
• Text (leave empty to show the store name) - the text shown at the top of the menu when Menu Header Shows is set to Text. Leave it empty to show your store name.
• Categories display in the menu - Follow header setting matches Spread categories as separate header items in the Header tab. Grouped under ‘All Categories’ lists your categories inside a single All Categories item. Separate as standalone items lists each category as its own item.
• Light — Background Color - the menu background in light mode. Leave it empty to use the theme’s default.
• Light — Text & Icons Color - the color of the menu’s text and icons in light mode.
• Dark — Background Color - the menu background in dark mode.
• Dark — Text & Icons Color - the color of the menu’s text and icons in dark mode.

Mobile Bottom Bar

A navigation bar fixed to the bottom of the screen on phones, giving quick access to Home, Categories, Wishlist, Account and, in the Default mobile style, Cart. It slides into view once visitors scroll down a little. Its tabs follow Mobile header & tabs style in the Header tab.

• Show Mobile Bottom Bar - turns the bottom bar on or off.
• Bar Shape - Standard (edge to edge) sits flush against the bottom of the screen. Floating (rounded) floats slightly above the bottom with rounded corners and a small gap at each side.
• Light — Background Color - the bar’s background in light mode. Leave it empty to use the theme’s background color.
• Light — Text Color - the color of the tab names in light mode. Leave it empty to use a color that stands out against the background.
• Light — Icons Color - the color of the tab icons in light mode. Leave it empty to use a color that stands out against the background.
• Dark — Background Color - the bar’s background in dark mode.
• Dark — Text Color - the color of the tab names in dark mode.
• Dark — Icons Color - the color of the tab icons in dark mode.

Category Subheader

A second row under the header that lists your categories, with dropdowns for their sub-categories. It shows on computers only and is hidden on phones and tablets.

• Display Category Subheader - turns the category row on.
• Sticky Category Subheader - keeps the row pinned under the header while visitors scroll. When off, the row disappears once visitors scroll down (while Sticky Header is on).
• Alignment - where the items sit in the row: Center, Start, or End.

Category Subheader - Extra Links In Category Subheader

Extra links added at the start of the row, before your categories.

• Show Home link - adds a link to your homepage.
• Show All Categories link - adds a link to the page listing all your categories.
• Show All Products link - adds a link to the page listing all your products.
• Show Blog link - adds a link to your blog.

Category Icon

Shows a small icon beside category names in your menus. The icon comes from an image attached to each category in your Zid dashboard through a custom category field named Category Icon; categories without one simply show no icon.

• Show Category Icon Next to Link - turns category icons on. The options below appear when it’s on.
• Show on Desktop Header - shows the icons in the header menu, its dropdowns and mega menu columns, and in the Category Subheader.
• Show on Mobile Menu - shows the icons in the mobile side menu.
• Show on - which categories get an icon: Main and subcategories, Main categories only (the top-level items), or Subcategories only (the items inside dropdowns, mega menu columns and sub-lists).
• Icon Size (px) - how big the icons are, from 12 to 64 pixels.
• Gap Between Icon and Text (px) - the space between the icon and the category name.
• Icon Position - whether the icon sits Before Text or After Text.
• Image Fit (object-fit) - how the image fits its square space: Contain (recommended) shows the whole image, Cover fills the square and trims the edges, Fill stretches the image to fill it, Scale Down shrinks large images to fit without enlarging small ones, and None — original size shows the image at its own size, which may be cut off.
• Icon Color - Original image colors keeps the icon as uploaded. Match text color (adapts to header) turns the icon a solid color that follows the text: dark on light backgrounds, and white in dark mode or over the transparent homepage header.

Search - Search Input

These options shape the search window that opens from the search icon.

• Arabic Placeholder - the hint text shown in the empty search box on the Arabic version of the store, both in the search window and in the Style 4 header search box.
• English Placeholder - the same hint text for the English version of the store.

Search

The first tab of the search window shows a set of products straight away, before visitors type anything.

• Shop All Tab Label - the name of this first tab.
• Shop All Source Type - which products the first tab shows: All Products, Specific Category, or Custom Products.
• Sort By - the order of the products when the source is All Products: Popularity, Price, Display Order, or Date Added.
• Page Size - how many products load in the tab when the source is All Products: 12, 16, 20, or 24.
• Select Category - the category whose products are shown when the source is Specific Category.
• Select Products - the hand-picked products shown when the source is Custom Products. Add one entry per product.
• Product - the product to show.

Search - Search Tabs

Extra tabs after the first one, each showing products from one category. Add one entry per tab:

• Tab Label - the name of the tab. Leave it empty to use the category name.
• Category - the category whose products the tab shows.

Search - Search Results Style

• Result Card Style - Match Product Card shows full product cards like the ones across your store. Compact shows a simple picture, name and price for each product.
• Columns (Desktop) - how many products appear per row on computers: 3, 4, or 5.
• Columns (Mobile) - how many products appear per row on phones: 1 or 2.
• Card Style - the product card look, used with Match Product Card: Inherit from global (the product card style chosen in the theme’s general settings), Classic, Modern, Overlay, or Exclusive.
• Image Aspect Ratio - the shape of the product pictures: Inherit from global, Square (1:1), Portrait (3:4), Tall (2:3), Landscape (4:3), or Wide (16:9).
• Image Fit - how pictures fill their space: Inherit from global, Cover (crop to fill), Cover (focus top), Cover (focus bottom), Contain (fit, no crop), or Fill (stretch).
• Show Rating - shows each product’s star rating, when it has reviews. Used with Match Product Card, as are the options below.
• Show Compare-at Price - shows the original price next to the discounted price.
• Show Wishlist Button - shows the add-to-wishlist button on each card.
• Show Quick View Button - shows the quick view button, as long as quick view is also turned on in the theme’s product card settings.
• Show Add to Cart Button - shows the add to cart button on each card.
• Show Product Options - shows the product’s options (such as sizes or colors) on the card. They aren’t shown with the Overlay card style.

Cart Drawer

The side panel that slides in with the shopper’s cart, and what it shows while the cart is empty.

• Cart Drawer Style - Default (attached to edge) slides in flush against the side of the screen. Floating (rounded corners) floats with a small gap from the screen edges and rounded corners.
• Empty Cart Title - the message shown when the cart is empty.

Cart Drawer - Empty Cart Buttons

Buttons shown in the empty cart to send shoppers back to browsing. Add one entry per button:

• Button Label - the text on the button.
• Button Link - the page the button opens.
• Button Style - the button’s look: Primary, Secondary, or Outline.

Cart Drawer (continued)

• Show Login Button - adds a login or sign-up button to the empty cart. It only shows to shoppers who aren’t signed in. The options below appear when it’s on.
• Actions Title - a short heading shown above the empty cart buttons. It only appears together with the login button, to shoppers who aren’t signed in.
• Login Button Label - the text on the login button.
• Login Button Style - the login button’s look: Primary, Secondary, or Outline.
• Login Button Position - whether the login button comes Before Shop Buttons or After Shop Buttons.
• Show Separator with Login Button - adds a thin line between the login button and the other buttons.