> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Features

> Configure UX enhancements including breadcrumbs, back-to-top button, currency codes, and timezone settings

Features settings enable optional UX enhancements throughout your store: breadcrumb navigation for wayfinding, back-to-top button for long pages, currency code display for international clarity, and timezone configuration for accurate countdown timers. These opt-in features improve usability without cluttering your design. Enable features that benefit your specific customer base and store requirements - breadcrumbs for complex catalogs, back-to-top for content-heavy pages, currency codes for international stores.

## What this controls

Features settings enable optional UX enhancements throughout your Sahara store: breadcrumb navigation for wayfinding, back-to-top button for long pages, currency code display for international clarity, and timezone configuration for accurate countdown timers.

<Tip>These are opt-in/opt-out features. Enable what benefits your customers, disable what doesn't fit your store.</Tip>

## How it works

Four independent feature groups:

1. **Breadcrumbs:** Navigation trails showing page hierarchy (Home > Collection > Product)
2. **Back to Top Button:** Floating button to quickly scroll to page top
3. **Currency Codes:** Display currency symbols with codes (e.g., "\$49 USD")
4. **Timezone:** Set GMT offset for countdown timer accuracy

Each can be configured independently based on your store's needs.

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin → **Online Store** → **Themes** → **Customize**
  </Step>

  <Step title="Access features settings">
    Click **Theme settings** → Select **Features**
  </Step>

  <Step title="Configure breadcrumbs">
    Choose where to display navigation breadcrumbs
  </Step>

  <Step title="Enable optional features">
    Turn on back-to-top button if needed, configure currency display
  </Step>

  <Step title="Set timezone">
    Select your store's GMT offset for accurate countdown timers
  </Step>
</Steps>

## Location

**Path:** Theme settings → Features

<img src="https://mintcdn.com/digifist/3KkBT-t6Ampd2IuI/images/theme/sahara/sections/theme-settings/features-location.png?fit=max&auto=format&n=3KkBT-t6Ampd2IuI&q=85&s=85c96fdbec3aa9b3af729125272c54c8" alt="features settings location" width="3280" height="2186" data-path="images/theme/sahara/sections/theme-settings/features-location.png" />

## Settings

<Tabs>
  <Tab title="Breadcrumbs">
    ### Show on Product Page

    Display breadcrumb navigation on product pages.

    **Default:** Enabled

    **Breadcrumb Path:** Home > Collection Name > Product Name

    <Note>Breadcrumbs improve SEO by adding structured data to your pages and help customers understand where they are in your store.</Note>

    ### Show on All Other Pages

    Display breadcrumb navigation on collection pages, blog posts, static pages, and other pages.

    **Default:** Enabled

    **Examples:**

    * Collections: Home > Collections > Category Name
    * Blog: Home > Blog > Article Title
    * Pages: Home > About Us

    ### Breadcrumbs Alignment

    Controls horizontal alignment of breadcrumb navigation.

    **Options:**

    * **Start:** Left-aligned (default)
    * **Center:** Centered

    **Default:** Start

    <AccordionGroup>
      <Accordion title="When to use breadcrumbs">
        **Enable Breadcrumbs If:**

        * Store has deep category hierarchy (3+ levels)
        * Large product catalog (100+ products)
        * Multiple collections/categories
        * Blog content with categories
        * SEO is a priority
        * Users need clear navigation path

        **Disable Breadcrumbs If:**

        * Single-category store (all products in one place)
        * Very simple site structure
        * Minimal design is critical
        * Homepage-to-product-only navigation

        **SEO Benefits:**

        * Structured data markup (JSON-LD)
        * Enhanced search result display (breadcrumb trail in Google)
        * Better site crawlability
        * Improved page hierarchy understanding

        **UX Benefits:**

        * Shows current location in site
        * One-click navigation to parent pages
        * Reduces "back button" spam
        * Lower bounce rate on deep pages
      </Accordion>

      <Accordion title="Breadcrumb alignment strategy">
        **Start (Left-Aligned) - Recommended:**

        * **Standard web pattern:** Users expect breadcrumbs top-left
        * **Best for:** Most stores, traditional layouts
        * **Coordinates with:** Left-aligned page titles, standard navigation
        * **Reading flow:** Natural left-to-right reading

        **Center-Aligned:**

        * **Editorial feel:** Fashion-forward, magazine-style
        * **Best for:** Minimal designs, centered layouts, fashion/luxury
        * **Coordinates with:** Centered page titles, centered hero sections
        * **Caution:** Less conventional, may be less discoverable

        **Decision Guide:**

        * If page titles are left-aligned → Use Start
        * If page titles are centered → Use Center
        * If unsure → Use Start (safer default)
      </Accordion>

      <Accordion title="Breadcrumb navigation patterns">
        **Product Page Breadcrumbs:**

        * Shows full category path
        * Each element is clickable
        * Current page (product name) not clickable

        **Collection Page Breadcrumbs:**

        * Simpler path
        * Helps return to all collections

        **Blog Post Breadcrumbs:**

        * Shows blog hierarchy
        * Can link to blog category

        **Static Page Breadcrumbs:**

        * Simple two-level path
        * Direct navigation to homepage
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Navigation Aids">
    ### Back to Top Button

    Display a floating button that scrolls the page back to the top when clicked.

    **Default:** Disabled

    **Behavior:**

    * Appears after scrolling down the page
    * Fixed position (typically bottom-right corner)
    * Smooth scroll animation to top
    * Visible on all pages when enabled

    <Tip>Particularly useful for product pages with many reviews, long blog posts, or collection pages with hundreds of products.</Tip>

    <AccordionGroup>
      <Accordion title="When to enable back-to-top">
        **Enable Back-to-Top If:**

        **Long Product Pages:**

        * Product descriptions over 500 words
        * 20+ customer reviews
        * Multiple product videos
        * Large image galleries (10+ images)
        * Extensive size charts or specifications

        **Content-Heavy Pages:**

        * Blog posts over 1000 words
        * FAQ pages with many questions
        * About Us pages with team sections

        **Infinite Scroll Collections:**

        * Collection pages that load more products on scroll
        * 50+ products visible without pagination

        **Use Case Examples:**

        * Mattress store: Long product specs, many reviews
        * Fashion blog: Long-form content articles
        * Electronics: Detailed technical specifications

        **Disable Back-to-Top If:**

        * Short pages (everything above the fold)
        * Minimal content strategy
        * Mobile-first design (users expect to scroll)
        * Prefer clean, uncluttered interface
      </Accordion>

      <Accordion title="Back-to-top button best practices">
        **Positioning:**

        * Bottom-right corner (most common, expected location)
        * Fixed position (follows as user scrolls)
        * Doesn't obstruct content or CTAs

        **Visibility:**

        * Only appears after scrolling down (not visible at top)
        * Threshold usually 200-300px scroll depth
        * Fade in/out animation for smooth UX

        **Accessibility:**

        * Keyboard accessible (Tab to focus, Enter to activate)
        * Screen reader friendly label ("Back to top")
        * Sufficient color contrast for visibility

        **Mobile Considerations:**

        * Button size: Large enough for thumb (44×44px minimum)
        * Not too close to screen edge
        * Doesn't cover mobile navigation or CTAs

        **When It's Overkill:**

        * Pages under 2 screens of content
        * Already using sticky navigation
        * Disrupts minimalist design
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Currency Display">
    ### Show Currency Codes

    Display currency codes alongside prices throughout the store.

    **Default:** Enabled

    **Effect:**

    * Enabled: "\$49.99 USD", "€39.99 EUR", "£29.99 GBP"
    * Disabled: "\$49.99", "€39.99", "£29.99"

    <AccordionGroup>
      <Accordion title="When to show currency codes">
        **Enable Currency Codes If:**

        **International Selling:**

        * Selling to multiple countries
        * Using Shopify Markets
        * Multi-currency enabled
        * Customers from different regions

        **Ambiguous Currency Symbols:**

        * \$ symbol (could be USD, CAD, AUD, SGD, etc.)
        * £ symbol (could be GBP, EGP, SYP, etc.)
        * \$ especially ambiguous - 20+ countries use it

        **Clarity Needed:**

        * Running international ads
        * Social media followers from multiple countries
        * International shipping offered

        **Example Scenarios:**

        * US store selling to Canada: "\$49 USD" clarifies vs CAD
        * UK store with EU customers: "£29 GBP" vs "€35 EUR"
        * Australian store: "\$99 AUD" clarifies it's not USD

        **Disable Currency Codes If:**

        **Single Market:**

        * Only sell in one country
        * All customers use same currency
        * Currency symbol is unambiguous (€ for EU-only store)

        **Cleaner Design Preference:**

        * Minimal aesthetic priority
        * Currency is obvious from context
        * Already display "All prices in USD" notice
      </Accordion>

      <Accordion title="Currency codes and Shopify Markets">
        **Shopify Markets Integration:**

        Shopify Markets automatically handles:

        * Currency conversion
        * Currency selector
        * Localized pricing

        **When to Show Codes with Markets:**

        * **Show:** If selling to countries with same symbol (US + Canada, UK + EU)
        * **Show:** During currency conversion to avoid confusion
        * **Hide:** If each market sees only one currency

        **Currency Display Patterns:**

        **With Currency Codes:**

        **Without Currency Codes:**

        **Best Practice:**
        If using multi-currency, show codes. If single currency, consider hiding for cleaner look.
      </Accordion>

      <Accordion title="Currency code formatting">
        **Standard Format:**

        * Price before code: "\$49.99 USD"
        * Space between: Always included
        * Code after: ISO 4217 three-letter code

        **Where Codes Appear:**

        * Product cards in collections
        * Product page prices
        * Cart subtotal and total
        * Checkout (if theme controls)
        * Sale prices and compare-at prices

        **Localization Notes:**

        * Currency codes always in English (USD, EUR, GBP)
        * Not translated (universal standard)
        * Position may vary by theme implementation
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Timing">
    ### Timezone (GMT)

    Set your store's timezone offset for accurate countdown timers.

    **Range:** -12 to +12 (GMT offset in hours)
    **Default:** 0 (GMT/UTC)

    **Affects:**

    * Countdown timers in announcement bar
    * Sale countdown sections
    * Limited-time offer timers
    * Flash sale displays

    <Warning>Incorrect timezone settings cause countdown timers to end at wrong times. Set this to match your store's business timezone.</Warning>

    <AccordionGroup>
      <Accordion title="Setting the correct timezone">
        **Common Timezone Offsets:**

        **North America:**

        * **-8:** PST (Los Angeles, Seattle, Vancouver)
        * **-7:** MST (Denver, Phoenix, Calgary)
        * **-6:** CST (Chicago, Mexico City, Dallas)
        * **-5:** EST (New York, Toronto, Miami)

        **Europe:**

        * **0:** GMT (London, Lisbon)
        * **+1:** CET (Paris, Berlin, Madrid, Rome)
        * **+2:** EET (Athens, Helsinki, Istanbul)

        **Asia:**

        * **+5.5:** IST (India) - *Note: Sahara uses integer only, use +6*
        * **+8:** CST (China, Singapore, Hong Kong, Perth)
        * **+9:** JST (Japan, Seoul)

        **Oceania:**

        * **+10:** AEST (Sydney, Melbourne)
        * **+12:** NZST (Auckland)

        **How to Find Your Offset:**

        1. Google "what is my timezone GMT offset"
        2. Or: Check your city on worldtimebuddy.com
        3. Count hours difference from London (GMT)
      </Accordion>

      <Accordion title="Why timezone matters">
        **Use Cases for Countdown Timers:**

        **Flash Sales:**

        * "Sale ends in 3 hours"
        * Must end at correct local time
        * Example: End sale at 11:59pm store local time

        **Product Launches:**

        * "Available in 2 days"
        * Launch simultaneously across store
        * Example: Release at 9am EST

        **Limited Offers:**

        * "Offer ends tonight"
        * Clear deadline in store timezone

        **Shipping Deadlines:**

        * "Order in next 4 hours for same-day shipping"
        * Based on warehouse timezone

        **What Happens With Wrong Timezone:**

        * Timer says "3 hours left" but actually 6 hours left
        * Sale ends too early or too late
        * Customer confusion and complaints
        * Lost sales from unclear deadlines
      </Accordion>

      <Accordion title="Countdown timer best practices">
        **Setting Timers:**

        1. Set timezone BEFORE creating countdown timers
        2. Test countdown by checking end time
        3. Verify across different user timezones

        **Where Timers Appear:**

        * Announcement bar: "Sale ends in 2:34:15"
        * Product pages: "Limited time offer"
        * Countdown sections: Visual timer displays

        **Technical Details:**

        * JavaScript Date object uses local timezone
        * Your timezone setting offsets to store time
        * User sees countdown in their local time
        * But counts down to YOUR timezone's deadline

        **Example:**

        * Store timezone: EST (-5)
        * Sale ends: 11:59pm EST
        * User in PST sees: "Ends in 3 hours" (8:59pm PST)
        * User in GMT sees: "Ends in 5 hours" (4:59am GMT next day)

        **Recommendation:**
        Always display timezone in countdown text: "Sale ends 11:59pm EST"
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

<img src="https://mintcdn.com/digifist/3KkBT-t6Ampd2IuI/images/theme/sahara/sections/theme-settings/features-overview.png?fit=max&auto=format&n=3KkBT-t6Ampd2IuI&q=85&s=0b6dec3a4f5b5ffc2760ea206e7b6c25" alt="features settings overview" width="3280" height="2186" data-path="images/theme/sahara/sections/theme-settings/features-overview.png" />

## Best practices

1. **Enable breadcrumbs for SEO**\
   Breadcrumbs improve site structure understanding for search engines and users. Keep enabled unless minimal design is critical.

2. **Use back-to-top on long pages**\
   If product pages exceed 2 screens of content or reviews, enable back-to-top button for better UX.

3. **Show currency codes for international stores**\
   If selling to multiple countries or using Shopify Markets, display currency codes to avoid confusion.

4. **Set accurate timezone**\
   Countdown timers depend on correct timezone. Set to your store's business hours location.

5. **Align breadcrumbs with page titles**\
   If page titles are left-aligned, use start alignment. If centered, use center.

6. **Test countdown timers**\
   After setting timezone, test a countdown to verify it ends at the correct time.

7. **Consider mobile for back-to-top**\
   On mobile, users expect to scroll. Back-to-top is less critical but still helpful on very long pages.

8. **Coordinate with Markets strategy**\
   If using Shopify Markets, showing currency codes reduces support questions about pricing.

9. **Breadcrumbs help large catalogs**\
   Stores with 100+ products across multiple categories benefit most from breadcrumbs.

10. **Keep defaults for most stores**\
    Sahara's defaults (breadcrumbs on, currency codes on, back-to-top off) work for most stores.

## Common use cases

<AccordionGroup>
  <Accordion title="International e-commerce store">
    **Settings:**

    * Breadcrumbs: **Enabled** on all pages
    * Breadcrumb alignment: **Start**
    * Back-to-top button: **Enabled** (if long product pages)
    * Currency codes: **Enabled**
    * Timezone: **Set to warehouse/HQ location** (e.g., -5 for EST)

    **Why:**

    * Breadcrumbs for navigation and SEO
    * Currency codes prevent confusion (USD vs CAD vs AUD)
    * Timezone ensures flash sales end at correct time
    * Back-to-top if product pages have many reviews

    **Best for:** Shopify Markets stores, international shipping, multi-currency
  </Accordion>

  <Accordion title="Content-heavy store (blog + products)">
    **Settings:**

    * Breadcrumbs: **Enabled** on all pages
    * Breadcrumb alignment: **Center** (editorial feel)
    * Back-to-top button: **Enabled**
    * Currency codes: **Enabled or Disabled** (depends on market)
    * Timezone: **Set to content team location**

    **Why:**

    * Breadcrumbs help navigate blog categories
    * Center alignment for magazine-style aesthetic
    * Back-to-top essential for long blog posts
    * Countdown timers for content releases

    **Best for:** Fashion blogs, lifestyle brands, content marketing focus
  </Accordion>

  <Accordion title="Minimal/simple store">
    **Settings:**

    * Breadcrumbs: **Disabled**
    * Breadcrumb alignment: N/A
    * Back-to-top button: **Disabled**
    * Currency codes: **Disabled**
    * Timezone: **0 (GMT)** if no countdown timers used

    **Why:**

    * Clean, uncluttered design
    * Simple navigation structure doesn't need breadcrumbs
    * Short pages don't need back-to-top
    * Single-market store, currency is obvious

    **Best for:** Small catalogs (under 50 products), single-category stores, minimal aesthetic brands
  </Accordion>

  <Accordion title="Flash sale / limited-time offer store">
    **Settings:**

    * Breadcrumbs: **Enabled** (SEO benefit)
    * Breadcrumb alignment: **Start**
    * Back-to-top button: **Enabled** (collections with many products)
    * Currency codes: **Enabled** (international urgency marketing)
    * Timezone: **CRITICAL - set exactly to store timezone**

    **Why:**

    * Countdown timers are main feature
    * Timezone accuracy is business-critical
    * Currency codes for international flash sale ads
    * Back-to-top for long sale collection pages

    **Best for:** Daily deal sites, seasonal sales, product launch stores
  </Accordion>
</AccordionGroup>

## Related settings

* [Layout](/themes/sahara/theme-settings/layout) - Page structure affects breadcrumb placement
* [Typography](/themes/sahara/theme-settings/typography) - Breadcrumb and button text styling
* [Buttons](/themes/sahara/theme-settings/buttons) - Back-to-top button appearance
* [Social Media](/themes/sahara/theme-settings/social-media) - Another "features" type setting

***

**Need help?** Test features with your actual content. Enable breadcrumbs and browse your site, enable back-to-top and scroll long pages, verify countdown timers end at correct times.