Nexus Shopify Theme Documentation

Favicon:

A favicon is a small icon that appears in the browser tab of your store. It helps in brand recognition and gives your site a professional look.

• Favicon image: Upload a square image (recommended 32x32px). Shopify will automatically scale it to the correct size for browser tabs and bookmarks.

Typography:

Typography plays a crucial role in your store's branding. You can customize the fonts and sizes for headings, body text, and navigation to create a cohesive and professional look.

• Headings: Select the font family and adjust the base font size for all headings across your store.
• Body: Choose the primary font and size for descriptions, product details, and general text content.
• Navigation: Customize the font for your menu links and navigation elements to ensure optimal readability.

Layout:

Adjust the overall structure and spacing of your store to ensure a balanced and visually appealing design.

• Page width: Set the maximum width for your store's content to control how much screen space it occupies.
• Horizontal spacing: Used to set the gap between grid items horizontally, such as in the collection list, product grids, and other multi-column sections.
• Vertical spacing: Used to set the gap between grid items vertically, ensuring consistent spacing across your store's grid layouts.

Colors:

Color schemes are a powerful way to manage your store's branding globally. Instead of setting colors for each element individually, you define "schemes" that contain a harmonious set of colors for backgrounds, text, buttons, and more.

What Color Schemes Do: They allow you to quickly change the entire look of a section by selecting a different scheme. For example, you can have a "Light" scheme for your main content and a "Dark" scheme for your footer or specific promotional banners.

• Custom Schemes: Customize multiple schemes with specific colors for backgrounds, text, headings, links,buttons and borders.

Badges:

Badges are an effective way to highlight product status, such as "Sale" or "Sold Out," directly on product cards to catch the customer's attention.

• Show badges: Enable or disable badges globally across all product cards.
• Badge position: Choose the corner where the badge will be displayed (e.g., Top left, Bottom right).
• Color schemes: Assign specific color schemes for "Sold out" and "Sale" badges to ensure they stand out or match your brand.
• Sale badge style: Choose between displaying "Sale" text or the actual percentage discount (e.g., 20% OFF).

Color swatches:

Color swatches allow customers to see available product colors visually, enhancing the shopping experience on both product cards and product pages.

• Enable color swatches: Toggle this option to display color swatches across your store.
• Swatch shape: Choose between Circle or Square styles for your color indicators.
• Visual Feedback: Selecting a swatch can automatically update the product image to match the chosen variant.

Border radius:

Customize the roundness of various elements throughout your store to match your brand's style—whether it's sharp and modern or soft and organic.

• Buttons border radius: Set the corner roundness for all buttons.
• Images border radius: Adjust the corner radius for product images and other media.
• Badge border radius: Control the roundness of product status badges.
• Inputs border radius: Customize the corner roundness for form fields and search bars.
• Drawer border radius: Adjust the roundness of side drawers like the cart drawer.

Drawers:

Drawers are sliding panels that appear from the side of the screen, commonly used for the cart, search or navigation menus.

• Color scheme: Assign a specific color scheme to your drawers to create a distinct look that complements your theme.
• Smooth Interaction: Drawers provide a fast and seamless way for customers to view their cart or menu without leaving the current page.

Breadcrumbs:

Breadcrumbs provide a secondary navigation path, helping customers understand their current location within your store and easily navigate back to previous categories or the homepage.

• Enable breadcrumbs: Toggle this option to show or hide the navigation trail on collection and product pages.
• Include collection name: Choose whether to display the collection name in the path for more detailed navigation context.

Pagination:

Pagination helps organize your store's collection and search result pages by dividing large numbers of products into manageable pages.

• Color scheme: Select a color scheme for the pagination buttons to ensure they are clearly visible and consistent with your theme's design.

Social media:

Connecting your social media accounts allows you to display icons in your footer and other areas, helping you build a community and stay connected with your customers.

• Social Accounts: Enter the full URLs for your social media profiles (e.g., Facebook, Instagram, YouTube, TikTok, X/Twitter, etc.).
• Auto-Display: Once URLs are entered, social media icons will automatically appear in the footer and other designated social areas of the theme.

Search drawer:

The search drawer provides a quick and interactive way for customers to find products while highlighting key collections for easier discovery.

• Collections Heading: Customize the title for the suggested collections shown below the search bar.
• Select Collections: Choose specific collections to feature as quick-access buttons within the drawer.
• Show image background: Enable this to add a consistent background to product images within the search results. This is especially useful for products that have transparent backgrounds.
• Image background color: If the background option is enabled, this specific color will be applied behind the product images in the search results.

Cart:

Configure how your cart functions and what information is displayed to customers to optimize the checkout process.

• Cart type: Select between a Drawer that slides out or a separate Page for the cart.
• Show cart note: Enables a text area for customers to add special instructions or notes to their order.
• Hide cart note on drawer: If enabled, the cart note will only be visible on the cart page and hidden in the drawer.
• Show tax info: Displays tax and shipping information messages in the cart area.
• Show discount option: Adds a discount code input field directly within the cart drawer.
• Show view cart button: (Works on cart drawer) Adds a dedicated button that takes the user to the full cart page.
• Show free shipping bar: Displays a progress bar showing how much more the customer needs to spend to qualify for free shipping.
• Hide shipping bar on cart drawer: If enabled, the free shipping bar will be hidden in the drawer but still visible on the cart page.
• Free shipping threshold: Set the minimum order amount required to trigger the free shipping offer.
• Show image background: Adds a background to product images in the cart (useful for transparent images).
• Image background color: Choose the specific background color for product images in the cart.

Scroll to top:

The "Scroll to top" button provides a convenient way for customers to quickly return to the top of the page, improving the user experience especially on long pages.

• Show scroll top: Toggle this option to enable or disable the scroll-to-top button across your entire store.
• Color scheme: Select a color scheme for the button to ensure it is visible and matches your theme's branding.