Hyperflow
Back to changelog
v2.0.3

A back-to-top button, text highlighting, five new sections, and a round of fixes.

What 2.0.3 brings

2.0.3 adds three new things to the theme: a back-to-top button, highlighting for part of a text, and an icon link block for your menus. It also ships five new ready-made sections, redesigns the cart reward bar, and fixes a long series of details.

New: back-to-top button

A new section, in the Overlays group, shipped with the theme: there is nothing to add, you just turn it on.

You choose when the button appears: after half a screen of scrolling, after a full screen, or always. You then place it at the bottom left or bottom right, and set its distance from the edges. Visibility and size are set separately for mobile and desktop, so you can show it on one and not the other. Three icons to choose from, a round or square shape, a shadow if you want one, and the colors of the scheme you assign to it.

On product pages, it lifts itself above the sticky add-to-cart bar so it never covers it.

New: highlight part of a text

You can now emphasize a word or a phrase in the middle of a sentence. Tick "Highlight part of the text" under Appearance, then wrap the part you want in brackets: Supports [healthy digestion].

Five styles to choose from, in any color you like: marker, highlighter, thick underline, hand-drawn underline, and box. The highlight reforms cleanly on each line when the text wraps.

Available on the Heading block, the Text block, the Related products section header, and the Icon with text block, where the title and the text of each item are set separately.

New: icon links

A block for building a list of illustrated links in the mega menu and the mobile menu. Each link carries its text, its icon, and its destination. The icon comes from the theme library, from your images, or from your own SVG code.

You set its position before or after the text, its size on mobile and desktop, the spacing, and the alignment. An option dims the other links on hover, to put the one the visitor is pointing at forward.

Five new ready-made sections

  • Trust marquee: three icon cards scrolling continuously: free shipping, secure payment, 30-day returns. It also exists as a block, to drop into a footer, a group, or a product page.
  • Testimonials - marquee: two review bars scrolling in opposite directions, with stars, title, and comment.
  • Testimonials - tabs: three themed tabs, each with its own review carousel, to sort your testimonials by topic.
  • Steps - alternating image and text: three icon arguments, then three steps where image and text alternate left to right. For telling the story of how something is made, or of a method.
  • Comparison table #2: five columns with an image in each header and six rows of criteria, to place your product against the alternatives.

New and improved

  • Reward bar: four layouts to choose from: checkpoints with a tick, separate segments, detailed steps, badges on the bar. Thickness is set from 4 to 20 px and everything follows. The track color, until now stuck on a grey you could not change, is finally adjustable, and each tier gets its own icon, picked from twenty-four pictograms, from your images, or from your own SVG code. The bar now slides to its new length instead of jumping.
  • Cart: updates are much faster. Changing a quantity, removing an item, or adding a product used to take two round trips to the server; one is enough now, and only the item list, the discounts, and the total are replaced. The loading indicator appears as soon as you click, and the reward bar updates at the same time as the total.
  • Note and discount code: their visibility is now controlled from the theme settings, under Cart, with a single checkbox covering both the cart drawer and the cart page. Three icons to choose from for each, and redesigned tabs that span the full width of the drawer.
  • Announcement bar: new "Make the bar sticky" option. The bar stays visible while scrolling, above or below the header depending on the order you chose, and with all three sticky header modes.
  • Carousel position indicator: three styles to choose from, progress bar, slider, or dots, with a thickness setting. Available on the Carousel block, the Complementary products and Upsell blocks, the Media gallery, the Banner, and the Featured collection. The progress bar remains the default: your stores do not change appearance.
  • Marquee: it now accepts most of the theme's blocks, not just five short ones. You can scroll reviews, product cards, logos, statistics. A new Item height setting aligns every card to the tallest one, and the maximum width now applies to each item.
  • Mega menu and mobile menu: they can use a different color scheme from the header. When the mega menu opens, the rest of the page dims, and the page behind it no longer scrolls.
  • Banner: the Margins section becomes Structure and gains a Content width setting: narrow, standard, or full width. Shipped on full width, so your banners keep their appearance.
  • Product page: two new settings, Top margin on mobile and Bottom margin on mobile. The gallery's "Thumbnail carousel" layout is now simply called Carousel and gets a position indicator of its own, choosing between thumbnails, a bar, a slider, dots, or nothing.
  • Related products: the section header is now set like a Heading block: rich text, theme styles, alignment and line height on mobile and desktop.
  • Product card: the Divider and Icon with text blocks can now be added inside one, including within a group.
  • Image block: it gains a top and a bottom margin, like every other block. No more spacer block just to move it away from its surroundings.
  • Badges: icon size is set separately on mobile and desktop. Left at 0, it keeps following the text size. Adding badges one at a time also works again, without duplicating an existing one.
  • Countdown: a top margin to move the extra text away from the counter, and a text style setting for each of the three texts.
  • Popup: it now shows above the sticky add-to-cart bar, takes the full width on mobile, and its close button has moved to the top right corner where it stays put while you scroll. The empty space that used to sit at the top of every popup is gone.
  • Contact form: an open dropdown finally takes on the look of your fields, background, border, rounding, font, and hover color, instead of the grey the browser imposed. On mobile, the phone's picker is unchanged.

Fixes

  • Variant picker: the arrow is centered on the height of the field. The fix also covers the dropdowns on the account addresses page and the collection filters.
  • Product gallery: the indicator is finally centered under the photo, and going from the last image back to the first no longer stutters.
  • Mobile menu: it now fills the full height of the screen, and sits above the sticky add-to-cart bar that was hiding part of its content.
  • Stories: after closing a story, videos further down the page play again on scroll.
  • Upsell: changing the variant updates the image. If a variant has no image of its own, the thumbnail falls back to the product's main image.
  • Image hotspot: inside a carousel, the window opens and closes normally. It is no longer clipped by the edges, flips downward when there is no room above, and shows above the sections below it.
  • Marquee: a countdown now ticks on every copy, and a Video block finally shows up.
  • Icon and Icon with text blocks: a rectangular image used as an icon keeps its proportions instead of being stretched into a square.
  • Video block: the dark edge along the right and bottom sides is gone.
  • Table block: the vertical scrollbar that flashed briefly and scrolled nothing no longer appears.
  • Cart: the Note field is no longer wildly rounded when field rounding is pushed to the maximum.
  • Translations: the Cross-sell block's add button shows in the visitor's language, instead of staying in French on English stores.

Worth checking after the update

Two settings change behavior, on stores that had customized them:

  • Product page margins on mobile: they used to be derived from the desktop ones, at three quarters of their value. You now set them yourself. If you had changed your desktop margins, check the mobile ones.
  • Related products section header: custom font, size, and color settings give way to the theme styles. If you had customized this typography, the header will take on the theme style, and can be adjusted again under Appearance.

How to get it

Update your theme in one click from your dashboard. Your customizations are kept.