Theme settings
Theme settings
Theme settings
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.
Theme settings
1. Color settings: The colors are divided in 5 main groups: General: Including all general theme colors , such as : Back ground, lines, borders, headings, body text, icons. Buttons: Used for all button colors, including primary and secondary buttons. Header: Used to change header or navigation background color, text and cart dot. Product: Used for price , labels, rating stars and stock colors. 2. Typography: With Ironworks, you have total control over the typography of your store. You can set one font for your headings and one font for any other typographic elements like body text. Headings Font : Select your font for headings. Size : Starting at 50% you can increase the headings’ scale up to 200%. Body Font : Select your font for body text. Size : Starting at 50% you can increase the headings’ scale up to 200% 3. Animation: The "Enable image zoom when hover" setting is applied for sections such as Featured collection, blog posts, collection list,...
Theme settings
1. Image Image ratio: Image ratio can be adjusted from the available options, including Natural (original ratio), Square (1:1), Standard (4:3), Classic (3:2), and Wide (16:9), to customize the visual presentation of your product images. Natural (original ratio) Square (1:1) Standard (4:3) Classic (3:2) Wide (16:9) 2. Vendor This setting will display vendor name as product information 3. Inventory Show product inventory: If product is available, then status is In stock. If product is sold out, then status is Sold out. If product is sold out, but has the "Continue selling when out of stock" , then status is Restock incoming. Show available product stock: Shows number of available products with stock status . Eg: In stock (96 units). The "Show product inventory" setting must be selected to display this setting. Low inventory threshold: When the number is below the threshold, the inventory quantity will be shown in red. Eg: Only 20 units left. 4. Quick buy This setting will show an Add to cart button on your product card. 5. Product label Show product label: Used to display product label with the discount amount type as selected in Show discount label as To display custom label, you need to follow these steps: Fill custom label name in setting below Setup conditions for products to display custom labels, they can be in collections , having tags, or created within days.
Theme settings
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”
Theme settings
1. Cart type Drawer: Same as Mini cart , only display when customers click on Add to cart button Page: Whenever customer clicks on Add to cart button or Cart icon on header , it will go to the Cart page. 2. Empty button This button is only displayed when the cart is empty. Empty button link: Used to redirect customers to a page as attached link. Empty button text: Used to customize button label . If you leave this field blank , the button will not be displayed. 3. Checkout button If the cart type is cart drawer, the checkout can be shown when you select Show checkout button. 4. How to show the discount code field on the mini cart & cart page? Give customers the option to enter their discount code upfront, so they can enjoy their savings instantly – no need to wait until checkout! In Theme setting > Cart > tick the box “Enable discount code field” to enable this feature.
Theme settings
Color swatches allow you to display actual colors instead of color names on product options. Enable color swatches: Activates color swatches on the Featured product section, Featured collection section, Product section ( on the product page ), and Product grid section ( on the collection page ). Swatch icon shape: Used to change shape of swatch icon Circle Square To define color for a variant option , you need to follow these steps: Fill option name ( accepted in different languages) : For example : Color, Colour, Couleur,... The next step is to define color list that you use for variants . Follow the format 'color name:color code'. Note that up to 3 color codes can be used to define a color White:#FFF Dark sage:#556B2F Teal:#31906E Red Blue Stripes:#e22#22e#22ee
Theme settings
Under Theme settings > Social Media Currently the following social media are available: Facebook Instagram LinkedIn Pinterest Snapchat LinkedIn TikTok Tumblr Twitter (X) Vimeo YouTube Simply fill in your details and visit the Footer , Announcement bar, or Header section. Enable the option Show social icons option.
Theme settings
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.
Theme settings
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.
Theme settings
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.
Theme settings
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.
Theme settings
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”
Theme settings
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.
Theme settings
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. 6. Add value for after-sale with Parcel Panel App If you want to reduces your after-sales costs while keeping your customers satisfied and driving revenue conversion, Parcel Panel is your choice. Parcel Panel is the #1 tracking app: auto sync, tracking & update, branded tracking page, shipping notifications, upsell, 24/7 live chat support. Especially, it's completely compatible with Eurus Theme and can work right out of the box. >>> Try the app for free
Theme settings
Estimated delivery rates in cart page/minicart
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.
Theme settings
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.
Theme settings
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.
Theme settings
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.
Theme settings
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.
Theme settings
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:
