Theme settings

Theme styles

Theme settings

Theme styles

on May 15, 2024

1. What are theme styles? Theme styles refer to the predefined design elements and visual settings that are included with a theme. These styles typically encompass various aspects of the website's appearance, such as typography, color schemes, button styles, layout options, and more.  Note: Theme styles only differ in their default combinations, resulting in different layouts, but fundamentally, they use the same set of configurations. Therefore, store owners can freely select any of the five presets without concern that choosing one will restrict their ability to set up another. Theme styles provide store owners with a convenient way to customize the look and feel of their website without the need for extensive coding or design expertise. They allow for consistency across different pages and elements of the website, ensuring a cohesive and professional appearance.  2. How to switch theme styles? To switch theme styles, follow these steps: Go to Online Store > Themes in your Shopify admin. Click Customize next to the theme you want to edit. Navigate to Theme settings > Styles. Choose your desired theme style options from the drop-down menus. Click Save to apply the changes. For more detailed instructions and information, you can refer to the Shopify help guide. To ensure you don't lose any setup data for your header and footer, refer to the guide located in Theme settings > Advanced of Eurus theme. 3. Eurus theme styles Here are the five style presets offered by the Eurus theme along with a brief overview of what each is best suited for: Breeze: This style preset is ideal for clothing stores. With its clean and modern design, it highlights apparel products effectively, allowing customers to focus on the clothing options available.   Breath: Designed for outdoor and garden-related stores, Breath brings a fresh and natural aesthetic to your website. It's perfect for showcasing outdoor furniture, gardening tools, plants, and other related products.   Swirl: Swirl is tailored for baby and kids' stores. Its playful and vibrant design appeals to parents looking for cute and charming products for their little ones, making it a great choice for showcasing children's clothing, toys, and accessories.   Whiff: This style preset is specifically crafted for jewelry and accessories stores. With its elegant and sophisticated design, Whiff accentuates the beauty of jewelry pieces, helping to create a luxurious and enticing shopping experience.   Puff: Puff is best suited for health and beauty stores. Its clean and minimalist layout puts the focus on skincare, makeup, and wellness products, allowing customers to browse and shop for their favorite beauty essentials effortlessly.

Custom CSS

Theme settings

Custom CSS

on Mar 13, 2024

This feature allows you to input custom CSS for all pages except the checkout page.    For detailed instructions and examples, you can refer to the Shopify documentation on adding CSS.

Checkout

Theme settings

Checkout

on Mar 13, 2024

Eurus Theme provides extensive customization options for styling the checkout page, allowing you to create a seamless and branded shopping experience.  Here's a brief overview of the major sections you can style: Banner and Logo: Customize the banner and logo displayed on the checkout page. Ensure your brand identity is consistent throughout the entire shopping process. Background Color and Typography: Adjust the background color to complement your brand palette. Fine-tune the typography settings to enhance the readability and visual appeal of text elements on the checkout page.

Advanced

Theme settings

Advanced

on Mar 13, 2024

1. Adding custom code to <head> tag Adding custom code to the <head> tag is a feature that allows admin to incorporate additional tracking codes or custom scripts that apply to the entire site. Here's how you can use this feature: How to Add Custom Code: Navigate to your theme settings. Look for the section “Custom CSS” in the “Advanced” section group. Insert your custom code in the provided space. Placement: The custom code added here will be inserted at the end of the <head> tag in the HTML of your website. Note: If you are not familiar with technical aspects or coding, and you need assistance with adding custom code, feel free to contact us. Click on this link to create a support ticket. Our team will be happy to help you.  2. Systems Changing the preset in Theme Settings => Theme Styles will change the default configs in Theme Settings, potentially losing data that was set up before the switch.  To retain data in the Header and Footer, follow this logic: After changing the theme style, go back to the Theme Settings => Advanced => System => Selected Preset config to revert to the initial preset and preserve the originally configured data. Example: Steps to change the theme style without losing data configured in the Header and Footer: Change the theme style from Breeze to Breath. In the selected preset config, choose the Breeze. This ensures that the settings in the Header and Footer are retained from the initial setup in Breeze.

Currency formats

Theme settings

Currency formats

on Mar 12, 2024

In order to enhance clarity, admins can choose to either display or hide the currency code next to the product price. This is particularly useful in scenarios where multiple markets share the same currency symbol or to avoid confusion. Adding the currency code provides a clear distinction. Disable “Show currency codes” Enable  “Show currency codes”

Scroll to Top

Theme settings

Scroll to Top

on Mar 12, 2024

The Scroll to Top button is a handy feature in the Eurus theme that provides users with a smooth and quick way to return to the top of a webpage. This enhances the overall user experience by eliminating the need for manual scrolling. The Scroll to Top button can be easily enabled for both desktop and mobile devices. Admins have the flexibility to tailor the user experience based on the platform. By default, the Scroll to Top button icon is an arrow. However, admins can personalize this icon to better align with their brand or design preferences. This customization is achieved through the use of the Custom SVG config. For assistance with custom SVG code or fixing issues that arise from custom SVG code, please contact our support. Tips: When setting up the Scroll to Top button, it's essential to be mindful of other elements present on the webpage, such as chat widgets or popups. Ensuring these elements do not obstruct the button enhances visibility and functionality.

Estimated delivery time

Theme settings

Estimated delivery time

on Mar 12, 2024

1. Overview Estimated Delivery Time (EDT) is a feature designed to enhance the shopping experience by providing customers with an estimated timeframe for order delivery. With this feature, admins can establish delivery time parameters for all orders and all products. The feature also considers cut-off times for daily shipping operations, ensuring real-time updates based on the current time. 2. How to set up the minimum and maximum days for delivery? To set up the minimum and maximum days for delivery for all orders and products, follow these steps: Step 1: Open Theme Settings and expand the “Shipping and delivery” config group.Step 2: Enter the minimum and maximum number of days required to ship all orders and products universally.  Example: If the standard shipping time is 3 to 5 days, enter "3" as the minimum and "5" as the maximum. If a customer places an order on March 7, the Estimated Delivery Time would be displayed as "Between March 10 and March 12." This indicates that, based on the configured shipping parameters, the customer can expect their order to be delivered within that specified timeframe. Result: Note: If your store caters to multiple markets with distinct shipping times, use semicolons to differentiate the shipping days for each market. Example: Suppose it takes 6 days to ship orders to the US and 3 days to the UK, enter "US:6;GB:3". By applying these steps, you can establish specific shipping timeframes for all orders and products while accommodating variations for different markets through the use of semicolons. 3. Set up specific delivery times for individual products: If you want to tailor the delivery time or messages for individual items, providing more specific information to customers during the shopping experience, follow these steps: In the Shopify admin, go to Settings => Custom data => Metafield Definitions => Products, add a definition. Create two metafields which have Namespace and key 'custom.delivery_date_min' and 'custom.delivery_date_max' with the type 'Text' if you want to set up specific delivery times. Or: Create a metafield with the namespace and key 'custom.delivery_date_message' to customize the delivery message for the product . For each product that requires a specific metafield, go to its admin settings. Enter the desired minimum and maximum delivery days or delivery messages in the created metafields.  If a product doesn't have values for these metafields, it will follow the general configuration set in the theme settings. 4. How to display the Estimated Delivery Time (EDT) on different pages? a) Show EDT on Product Page: Navigate to the product page where you want to show the Estimated Delivery Date. Add the block named "Estimated Delivery Date” in the Product Information Section. To customize the message for each product in this block, you can create a metafield with the key 'custom.delivery_date_message' and type 'Rich text'. Moreover, the admin can customize the message and tooltip to provide additional information, also style the message according to your preferences using the styles section, where you can choose colors for the background, text of the content box, and colors for the tooltip.  b) Show EDT on Cart Page/Minicart: Open Theme Settings and expand the “Shipping and delivery” config group. Find the config for "Show Estimated Delivery Time in Cart" Enable this option to display the EDT in the cart. Customize the message and tooltip to provide additional information. You can style the message according to your preferences using the Styles section. These steps allow you to effectively communicate the estimated delivery time to customers at different stages of their shopping journey.  5. How to set up a cut-off time for delivery? Cut-off time refers to the specific point within a day when a business or shipping service stops accepting orders or processing shipments. It serves as a deadline for customers to place orders if they want their items to be shipped on the same day. Cut-off times are crucial for logistical planning and ensuring timely deliveries. For example, if a customer places an order after the cut-off time, the shipment will be processed on the next business day. Implementing a cut-off time helps businesses manage their workflow, maintain shipping schedules, and provide accurate Estimated Delivery Times to customers. Please follow these steps to set up: Open Theme Settings and expand the “Shipping and delivery” config group. Locate the option for "Cut-off Time" Choose the time within the day (Hour & Minute) when shipping activities stop. Example Scenario: If the current time is before the cut-off, the EDT displayed will be Min days_Max days. If the current time is equal to or after the cut-off, the EDT displayed will be Min days+1_Max days+1. This configuration helps manage customer expectations based on the time of day, providing accurate and reliable estimated delivery information.

Estimated delivery rates in cart page/minicart

Theme settings

Estimated delivery rates in cart page/minicart

on Mar 12, 2024

The normal delivery rates usually appear on the checkout page only. With Eurus theme, for customer convenience, admins can choose to display these rates directly on the cart page. To set it up: Admin Configuration: You can open theme settings and enable the option to display estimated delivery rates. Storefront Display: Customers can input their address in either the mini cart or cart page. Then, they can view instantly applicable delivery rates based on the entered address. By following these steps, you provide customers with quick access to estimated delivery rates, improving their shopping experience.

Free shipping bar

Theme settings

Free shipping bar

on Mar 12, 2024

The Free Shipping Bar feature in Eurus Theme helps communicate to customers how close they are to qualifying for free shipping, encouraging them to add more items to their cart.  By keeping customers informed about the benefits of reaching the free shipping threshold, the Free Shipping Bar contributes to increased order values and customer satisfaction. Here's a quick guide on setting it up: Step 1: Before using the Free Shipping Bar, set up a free shipping rule in your Shopify admin. Refer to the Shopify documentation for detailed instructions on creating free shipping rules. Step 2: In the Eurus Theme settings, find and enable the Free Shipping Bar feature. Step 3: Specify the amount customers need to reach to qualify for free shipping. Note that if your store uses multiple countries and currencies, ensure the amount matches the one set in your admin.  The amount (e.g., 100) for orders from any country and currency without a specified amount. Currency code:amount (e.g., USD:100) for orders from any country using USD without a specified amount. Country code:currency code:amount (e.g., US:USD:100) for orders from the US with the currency USD. Step 4: Check the Storefront Display in Minicart, Cart page and Check out page Case 1: When the cart doesn't meet the free shipping threshold, the bar prompts customers to add more items. Case 2: When the cart qualifies for free shipping, showcase how the bar communicates the achievement.

Cart

Theme settings

Cart

on Mar 05, 2024

This guide will walk you through various functions and configs available within the Cart section (Minicart & cart page). Open the Theme Editor and navigate to the Theme Settings. Then, select the Cart section. 1. How to show a mini cart as a popup? Eurus theme provides two options for presenting the minicart: drawer and popup, with the default setting being the drawer style.  Popup type: Drawer type: Additionally, if you wish to hide the "View Cart" button, simply tick the "Hide 'View Cart" button" option within the config settings. This config prevents customers from accessing the cart page.  Tips:  If the tracking data shows that many users go directly from the minicart to the checkout page, using this feature can eliminate one step, making the checkout process smoother and reducing cart abandonment rates. 2. How to show cart note/cart instructions in mini cart and cart page? Cart note is a feature designed to allow customers to input additional notes during the ordering process. These notes are then stored within the order information in the backend, enabling the admin to review and act accordingly. To activate this feature, simply tick the "Enable cart note" config. In the backend: 3. How to show terms and condition checkbox in minicart/cart page? "Terms and Conditions Checkbox" serves the same purpose as in any other online platform. It is used during the checkout process to ensure that customers actively acknowledge and agree to the terms and conditions, privacy policy, or any other legal agreements before they can proceed with a purchase.  To enable it in the Eurus theme, you just need to tick the "Enable terms and conditions checkbox" config. Additionally, you should add a page for the terms and conditions. Click the "Select page" button to choose the link that leads to your terms and conditions page. 4. How to modify the "Continue shopping" link when the cart is empty? Locate the "Continue shopping" option. You can select a link that directs users to products, collections, or any preferred page. Conclusion:  By customizing minicart styles, enabling features like cart notes, and configuring the "Continue Shopping" link, you can tailor the cart and minicart section to match your brand and improve user convenience. These features not only help create an attractive cart interface but also streamline functionality to meet the specific needs of your e-commerce platform.

Favicon

Theme settings

Favicon

on Mar 04, 2024

A favicon is a small icon, used to represent a website or bookmarked page in browsers' favorites lists, address bars, and search results. It enhances brand recognition and adds a professional touch to a website. For users, it facilitates easy identification and management of opened browser tabs. How to Upload a favicon? Open the Theme Editor and in the Theme Settings, select the Favicon section. Favicon images should be in PNG or ICO file format. The ideal size for a favicon is either 16×16 pixels or 32×32 pixels.

Social Media

Theme settings

Social Media

on Mar 04, 2024

Our theme provides a seamless way to integrate your social media presence across the entire platform. With the Social Media configuration options, you can display icons linked to your social accounts in various sections of your theme. Navigate to Theme Settings > Social Media to access the configuration panel.Fill in the corresponding social media links for each platform in the provided fieldsDisplay Locations: Once you've entered your social media links, the corresponding icons will be displayed in the following sections across your theme: header, announcement bar, email signup, and mobile menu.

Products

Theme settings

Products

on Mar 04, 2024

1. How to change product card image ratio? Open the Theme Editor and in the Theme Settings, select the Products section. For the option labeled “Products Image Ratio”, Product card image ratio can be adjusted from the available options, including Natural (original ratio), Square (1:1), Landscape (4:3), Portrait (2:3), and Wide (16:9), to customize the visual presentation of your product images. Natural (original ratio) Square (1:1) Landscape (4:3) Portrait (2:3)  Wide (16:9) Standard (3:4) 2. How to alter the inventory stock status? The low stock threshold serves as a predefined limit set by the retailer or admin to determine when a product's stock level is considered low. When the quantity of a particular product falls below the specified threshold, it triggers notifications or alerts to prompt actions such as restocking or reordering. Look for the config "Low Stock Threshold." Adjust the low stock threshold according to your preference. This threshold can typically be set within the range of 1 to 20 units. Result:

Product Swatches

Theme settings

Product Swatches

on Mar 04, 2024

1. What are product swatches? Types of swatches in Eurus. a) Definition of Product Swatch: Product swatches refer to the visual representations of different product variations that are displayed as clickable options for customers to select. These swatches allow customers to see the available options and make their selections directly from the product page, providing a more visual and interactive way to choose product variations before making a purchase. b) Types of Product Swatches: Eurus offers two types of product swatches: color and text. 2. How to add color swatch to collection/search page? Here's the user guide for setting up color swatch and text swatch in the theme settings: Step 1: Open the Theme Editor and navigate to the Theme Settings. Then, select the Product Swatches section. Step 2: Click the checkbox "Enable on Product Cards" to display color swatches on product cards, providing a quick and intuitive way for customers to view options. Step 3: If the admin selects color swatch, you can enter values in the Color option name and Color swatch values fields. If using text swatch, you can enter corresponding values in the Text option name and Text option values fields. Detailed setup instructions are clearly noted in the theme settings. Note: If the site has different languages, fill in the names of color/text options accordingly.  Phrases of different languages are separated by a comma. The admin should enter the corresponding swatch values for each language present on the site when setting up the site with multiple languages.            (E.g. Color, Colour, Couleur)            (E.g. Size, Taille) Step 4: Choose between 'Round' and 'Square' swatch styles to tailor the appearance to integrate with the overall theme of your online store. After enabling the settings, color swatches will appear on the collection page, search page, and product card throughout the site.  This setup is required to display them across the site. Tips: Ensure to choose the correct swatch type for effective setup  Text swatches will only appear on product cards in the collection page, search page. On the product page and product information sections, it already appears by default. Conclusion: Eurus empowers users to enhance the visual appeal of their products, ensuring a dynamic and user-friendly shopping experience by leveraging the versatility of color and text swatches. 3. How to add images as color swatches? Other than using RDB color code as above, Eurus also offers you the ability to show image as color swatches. In Admin > Content > Files, upload the image file with a filename that matches the color name, replacing spaces with hyphens. For instance, for 'Hot Pink' color option, upload 'hot-pink.jpg.' Open 'Products Swatches' in the theme settings and enter the corresponding color names together with their format in the 'Color Swatch Values' field. In this example, fill in "hot-pink.jpg". The swatch of that option on product cards and product information section should all show the uploaded image as color swatches. 4. How to add color swatch to product page? After enabling the settings mentioned above, go to the Product page, then navigate to the Variant picker block within the Product information section, and click the “Enable color swatches” checkbox. Note: In addition to enabling color swatches here, it's crucial to select the variant type as "Button" to display color swatches. The same applies to text swatches. Product page when disabling Color swatches: After enabling Color swatches: 5. How to filter with color swatch in collection/search page? Your customers can use color swatches to filter product searches.  By default, if the admin sets it up as mentioned above, they can add that option to the filter using a filter app. Navigating to the collection page, the filter will automatically display the swatch (text/color). If the admin wishes to adjust the size of the color swatch or create different patterns, they can utilize the metaobject by following these steps:Step 1: Create a metaobject definition In the Shopify admin, go to Settings => Custom data => Metaobjects Definitions. Click on "Add definition" and create a metaobject with fields that meet the following conditions: At least 1 text field of type Single line text, Decimal, Integer, or True or False. At least 1 color field or 1 file field with images. The color field can be a list. Set a name and choose "One value" if you want one image swatch corresponding to one text value. Save this metaobject definition. Step 2: Create a metafield definition that references the metaobject In Custom data => Metafield Definitions => Products, add a definition. Set a name, Namespace, and key. Select type as "Metaobject" and reference the metaobject created in Step 1. Choose "List of entries." Step 3: Create entries for the metaobject In Admin => Content => Metaobjects, select the definition created in Step 1. Add entries, providing a name for each text entry and uploading the corresponding image for the "Select file" field. Save the entries. Step 4: Set up the metaobject for each product Go to Admin => Products. For individual products, select the product, find the metafields section, and choose entries. Save the configuration. For bulk editing, select all products you want to set up. Add a column if not already present and choose the metafield created in Step 2. Step 5: Add the metafield to the filter Find the filter such as Search and discovery or similar and customize filters. Add a filter, select the source as "Product Metafields," and choose the metafield created in Step 2. Provide a label for customers to see in your store's filters. Set up logic conditions (Or/And) as needed. Select values for customers to filter by. Save the filter configuration. Step 6:  Eurus theme also allows you to adjust the size of images/visual filters on the site. You can choose whether to display text alongside visual filters in the theme's filter section using the configuration options here.

Design

Theme settings

Design

on Mar 04, 2024

1. Colors & Typography Basically, you can choose between two color schemes for the light and dark theme modes. This lets you tweak the colors of different elements across the whole site, especially in sections where you haven't made specific changes. To make these adjustments, head over to Theme Settings, where you can handle both Color and Typography settings. For more information on theme modes, check here: Header To read more about colors and typography in detail, visit this guide: Theme settings - BSS Commerce Wiki 2. General styles You have the ability to customize the appearance of all product cards and images by adjusting the corners to your liking. Additionally, you can harmonize the color palette of buttons site-wide, including primary buttons, button text, hover effects, and secondary buttons. Furthermore, you can refine the button styles by choosing between square, rounded, rounded corners or mixed options to enhance the visual appeal of your website's buttons. To ensure a consistent user experience across devices, consider enabling the display of button colors in a mobile-friendly format. This feature helps maintain a cohesive look and feel for visitors accessing your site on mobile devices.  By leveraging these customization options effectively, you can create a visually appealing and user-friendly website that reflects your brand identity and engages visitors effectively. 3. Animations In the animations section, let's explore the various animations available on the site: Button Animations: Make your website pop with engaging animations that catch the eye. Customize button animations with ease using the Primary button hover animation settings.Choose from: Slide: This animation type involves a sliding motion effect. Fill up: The button fills up from the bottom to the top. Sliced with icon: To implement this animation, you need to upload a custom icon in SVG format. Underline: Adds an underline effect to the text within the button. Wide Image Parallax Effect: Wide images on the site can feature a parallax effect, enhancing visual appeal. This effect is utilized in sections like Slideshow, Promotion banner, Media with text, Collection banner, Map, and Age Verification popup. Image Zoom-In Animation: Smaller images across the site, including Product card images, Collection card images, Media gallery, Promotion grid, Promotion popup, and Text columns with image, showcase a zoom-in animation effect for added visual interest. Disabling Animations: You have the option to disable parallax effect and zoom-in animations, which can help improve site performance and reduce potential discomfort for certain users. Consider exploring the benefits of reducing motion to understand the impact on user experience further. Note: The "reduce-motion" feature, when activated in web browsers, aims to decrease or eliminate decorative motion effects on websites. This option benefits users with visual sensitivities or those who dislike excessive motion, providing a more comfortable and less visually taxing browsing experience.  By customizing these animations according to your preferences and understanding their effects on user engagement and site performance, you can create a visually dynamic and user-friendly website tailored to meet your specific needs. 4. Layout In the Layout section of Theme settings, you can adjust the following: Section Spacing: You can customize the spacing between different sections on the webpage, with the option to set it anywhere between 0 to 100 pixels. Page Width: You have the flexibility to set the overall width of the page, ranging from 1000 to 1600 pixels.