Colors

One of the most important elements in creating a visually appealing and functional online store is the proper use of color. A well-designed color system helps reinforce your brand identity while also improving the overall shopping experience for your customers. In Opulence, color schemes allow you to define background colors, text colors, and accent colors that can be applied across different sections of your store. These color settings are used throughout general sections, as well as the header and footer, ensuring a consistent and professional look across your entire website.

Customize Your Colors to Match Your Brand

Personalizing your theme’s colors is simple with Opulence. You can easily adjust the available color schemes or create new ones to match your brand’s visual identity and give your store a unique and polished appearance.

Scroll to Top

The Scroll to Top setting allows you to enable a floating button that helps customers quickly return to the top of the page. This improves navigation, especially on long pages such as collection or product pages.

Scroll to Top Settings

You can control the visibility and appearance of the scroll-to-top button. These options allow you to match the button style with your store design while ensuring easy access for users browsing through your content.

• Show Scroll to Top Button – Enable this option to display the floating scroll-to-top button on the storefront.
• Color Scheme – Choose the color scheme used for the scroll-to-top button so it matches your theme's design.
• Border Radius – Adjust the roundness of the scroll-to-top button. Higher values create a more circular button style.

Quick Add Drawer

The Quick Add Drawer allows customers to view key product information and add items to their cart without leaving the current page. When a customer clicks the Quick Add button on a product card, a side drawer opens displaying the product image, price, availability status, and selectable options such as size or color. This feature improves the shopping experience by enabling faster product selection and reducing the number of page loads during browsing.

In the Opulence theme, the Quick Add Drawer can be customized through several settings that control how product information and inventory indicators are displayed. These options help you highlight stock availability, choose how product variants appear, and enable additional checkout features for a smoother purchasing process.

Quick Add Drawer Customization Options

• Show vendor – Displays the product vendor or brand name inside the quick add drawer. This is useful for stores that sell products from multiple brands or suppliers.
• In stock color – Choose the color used to indicate when a product is currently available in stock.
• Out of stock color – Set the color displayed when a product or variant is unavailable.
• Threshold color – Defines the color shown when product inventory reaches a low-stock level. This helps create urgency and informs customers when items are running out.
• Inventory threshold – Set the quantity limit that determines when the low-stock indicator appears.
• Options type – Choose how product variants are displayed inside the drawer. You can display options as a Dropdown or as Buttons for a more visual selection experience.
• Show dynamic checkout button – Enables dynamic checkout buttons such as Buy Now, allowing customers to proceed directly to checkout using supported payment methods.
• Show gift recipient form – Displays an additional form that allows customers to send gift card products directly to a recipient. This option is only applicable to gift card products.

Swatches

The Swatches setting allows you to control the appearance of color variant swatches in your store. These swatches are displayed on the product page and quick add sections, helping customers visually select different product colors.

Swatch Shape

This option lets you change the shape of the color swatches used for product variants. You can choose a style that best matches your store’s design and layout.

• Swatch shape – Select the preferred shape for color swatches displayed on product pages and quick add drawers.

Use Variant Image Instead of Color

This setting allows you to display the variant image instead of a color swatch. When enabled, the swatch will use the assigned product variant image rather than a color value.

• Use variant image instead of color – Enable this option to show the product variant image as the swatch instead of a color.

Custom color swatches

The Custom color swatches setting allows you to define specific colors for product variant options using custom names and hex values. This ensures that color swatches are displayed accurately across product pages and quick add sections.

Custom color values

This option lets you manually assign colors to variant names by entering color labels along with their corresponding hex codes. These custom values override default swatch detection and provide consistent color representation.

• Custom color swatches – Enter color names and their hex values in the format colorname:#hexcode, separated by commas. Example: red:#ff0000, green:#008000.
  ⚠ Important Note

  Always follow the correct format when adding custom color swatches.

  Format: colorname:#hexcode, colorname:#hexcode

  Example: red:#ff0000, green:#008000, blue:#0000ff

  Make sure to add one space after each comma before writing the next color.

  The color name must exactly match the product variant name to ensure proper swatch display.

  This feature works only with static variant values. Dynamic color values selected via metafields are not supported.

How it works

The theme matches the variant option values (such as "Red", "Green", etc.) with the custom entries defined in this field. When a match is found, the corresponding hex color is used to display the swatch.

• The color name entered in this setting must match the product variant value.
• If a match is found, the defined hex color is shown as the swatch.
• If no match is found, the theme may fall back to default behavior or text labels.

Social Media

The Social Media settings allow you to connect your store with your social media profiles. By adding your social profile links in this section, the corresponding social media icons will automatically appear in your store’s footer area.

How It Works

Simply paste the URL of your social media profile into the available input fields. When a valid link is added, the theme automatically displays the matching social media icon in the footer "Get in Touch" section of your storefront. If a field is left empty, its icon will not appear.

• Add Link – Enter the URL of your social media profile in the corresponding field.
• Automatic Icon Display – Once a link is added, the related social media icon will automatically appear in the footer.
• Hide Icon – If no link is provided, that social media icon will remain hidden from the storefront.

Search Drawer

The Search Drawer setting controls the appearance and functionality of the search panel that opens when customers click the search icon in the header. This drawer helps customers quickly find products by searching or selecting from suggested keywords and highlighted products.

Search Drawer Settings

You can customize the search input style and control the display of suggested keywords and featured products inside the search drawer. These options improve product discovery and make searching faster for customers.

• Input Border Radius – Adjusts the roundness of the search input field inside the search drawer.
• Show Keywords – Enable this option to display popular search keywords below the search bar.
• Keywords List – Add keywords separated by commas. These keywords appear as quick search suggestions in the drawer.
• Show Searched Products – Enable this option to display selected products inside the search drawer.
• Select Products – Choose products that will appear under the “Most Searched Products” section in the search drawer.

Cart & Cart Drawer

The Cart & Cart Drawer settings allow you to control how the cart behaves when customers add products to their cart. You can choose whether the cart appears as a slide-out drawer or as a separate cart page, and enable additional options like tax information, cart notes, and discount fields.

Cart Settings

These options help customize the shopping cart experience and provide additional information to customers before checkout.

• Cart Type – Choose how the cart is displayed. It can open as a slide-out drawer or redirect customers to the cart page.
• Show Tax Information – Displays tax and shipping information in the cart section.
• Show Cart Note – Allows customers to add special instructions or notes with their order.
• Show Discount Input – Displays a field where customers can enter their discount or promo codes.
• Empty Cart Drawer – When the cart is empty, selected collections can be displayed to recommend products and encourage customers to start shopping.