Theme settings
Theme settings
Theme settings
This guide will walk you through various functions and configs available within the Cart section (Minicart & cart page), which allows you to show discount breakdown (list of all discount codes applied), grand total, and more. 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 prevents customers from accessing the cart page. For mobile, you can adjust the Cart drawer size on mobile with three options: Fullscreen, Medium, and Small. 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. Note: Due to Shopify's restrictions, customers won't be required to tick this checkbox when checking out with a dynamic payment button. 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. 5. How to show the Payment method on Minicart & Cart page? In Theme Editor, click on Theme Settings (the Gear icon ⚙️ on the 2nd position on the left sidebar). Tick on the Enable payment icon box. The default payment icons from Shopify will be displayed. (Optional) You can customize your preferred payment icons by adding or replacing them with SVG code. Click Save when done. 6. How to show the saving amounts for the order on cart? Showing savings on your cart page and mini cart can motivate customers to buy more by letting them know how much money they save. Here’s how: In Theme Editor, go to Theme Settings (or the Gear icon) > Tap on Cart > Tick the box that says Show savings amount > Click Save. 7. How to hide the minicart/cart page? Why You Might Want to Hide the Cart: For businesses selling wholesale or to other businesses, it may be preferable to have customers contact sales representatives directly rather than using an online cart. Some stores may want to display their products purely for informational purposes without allowing purchases directly through the site. When a store is preparing for a launch or running a preview, the cart can be hidden to build anticipation while displaying the product catalog. In Theme settings => Cart => Catalog mode, tick this checkbox to hide the cart: When Hide Cart is enabled: Mini cart icons will not be displayed on both desktop and mobile. Quick add options will be hidden. Add-to-cart button will not be shown on product pages, featured products, or quick view. 8. How to Enable Save & Share Cart? The "Save & Share Cart" feature allows your customers to save their cart items and generate a unique link. By enabling this feature, you can enhance the shopping experience for your customers, making it easier for them to share their carts with friends and family. ✍️ To enable this feature: Step 1: Navigate to your Shopify admin and open the Theme Editor. Step 2: Click on "Theme Settings", or the gear icon on the left sidebar. Step 3: Scroll down to the "Cart" section. Step 4: Find and tick the checkbox labeled "Enable Save & Share Cart". ✍️ Once enabled: Customers can save & share their cart by clicking the “Share cart” text link. A unique link will be generated, which can be copied and shared. When someone accesses the link, they will see the saved cart items, ready to checkout. 9. How to Show the Countdown Timer on the Cart? Add a cart countdown timer to create urgency and encourage faster purchases. This shows shoppers how long items’ information like quantity, and prices are reserved. Step 1: Enable the Cart Timer Go to Theme Settings > Cart > Find the Countdown timer section > Toggle Enable cart timer to activate the countdown. Step 2: Customize the Countdown Message Default message: 🔥 Items in your cart are reserved for {timer}. Change the content inside the Message field for a custom message. Add {timer} to dynamically show the countdown. Step 3: Set the duration Adjust the Timer (minutes) setting to choose how long items stay reserved. Step 4: Choose what happens when time expires Select an action under Action after time expired: Repeat the countdown – The timer restarts automatically. Hide the message – The countdown disappears when time runs out & restarts when customers edit their cart (add/remove items) Clear the cart – Items are removed from the cart once the timer expires. Step 5: Click “Save” when done. 10. How to disable the minicart display after adding to cart? The "Show minicart after adding to cart" feature automatically displays the minicart (covering half the screen) when customers add an item to their cart. This feature is enabled by default, but you can disable it to show a simple popup notification instead. When enabled (Default) When disabled ✍️ To disable this feature: Step 1: In the Theme Editor, go to Theme Settings (gear icon ⚙️) > Cart. Step 2: Disable"Show minicart after adding to cart". Step 3: Click "Save."
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
1. Social accounts 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 fields (Twitter, Facebook, Pinterest, Instagram, TikTok, Tumblr, Snapchat, YouTube, Vimeo, LinkedIn, Email address, Phone number)Display Locations: Once you've entered your social media links, the corresponding icons can be displayed in the following sections across your theme: header, announcement bar, email signup, and mobile menu. 2. Sharing options The Sharing Options feature enables customers to easily share product details across various platforms like Facebook, Twitter, Pinterest, WhatsApp, Telegram, Email, and SMS. Note: To display the sharing options on your product pages, you need to add the Social Sharing block in the Product Information section of your theme. In addition to product pages, social sharing options are also available in blog posts.You need to add a "Back to Blog" block and tick the "Show Social Share" option. Note that social sharing must be enabled in the theme settings first. For more details, please refer to the relevant guide on enabling social sharing options. This functionality helps boost product visibility and reach by allowing quick and effortless sharing directly from the product page.
Theme settings
1. How to customize the product cards' look? To optimize product cards' look in the Theme Editor, follow these steps: Navigate to Online Store > Themes > Customize in your Shopify Admin. Go to Theme settings > Product. Set the desired Title size and Price size (from 50-200%) Set the desired padding for desktop/mobile view. This sets the space between the text and the edges of the product card. Choose a background color for light/dark mode. 2. 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) 3. How to reveal next product images on the product cards? This guide will help you configure your Shopify theme to reveal the next product images on product cards using various effects and customization options. Under Image hover effect, 3 options include: Option name How it works Example Image Carousel Multiple images will be displayed in a carousel. (You can adjust how many images appear by changing the setting of Number of additional images) Hover to Reveal Second Image The second product image will be displayed on hover. None No additional images will be displayed on hover. You can also set up some effects and styles: 1️⃣ Product card image reveal effect: Choose the transition to reveal the next image in product cards, which is to be Fade or Slide. 2️⃣ Navigation (light/dark): Set the color for Navigation (transition arrows) when Image Carousel is enabled (for both light and dark backgrounds) 3️⃣ Next/Previous arrows”: Turn on/off to customize the appearance of the next and previous arrows: When ticked: The left and right arrows will appear above the product images when you hover over them. When unticked: The pagination will appear on top of the product images. 4️⃣ Change slides every: Set the duration for each slide in the carousel between 0 to 4 seconds to control how long each slide remains visible in the carousel. This works only when the "Next, previous arrows" setting is enabled. If you set "Change slides every" to 0, autoplay will be turned off. 4. How to alter the inventory stock status? ✍️ What is a low stock threshold? 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 shows a "Low stock" signal in Inventory status block on the product page. ✍️ How to set up the low stock threshold? In Theme Editor, go to Theme Settings, select Products, look for the Inventory status section, and find the config "Low Stock Threshold” Adjust the low stock threshold according to your preference. This threshold can typically be set within the range of 10 to 200 units. (Note: It must be a whole number). Result: Case Result When the number of products > or = Low stock threshold When the number of products < Low stock threshold ✍️ How to set up the “In stock message” and “Low stock message”? In Theme Editor, go to Theme Settings, select Products, scroll down to the Inventory status section, then fill in the personalized message you want in the right field: In stock message: Showing when the number of products > or = Low stock threshold value. Low stock message: Showing when the number of products < Low stock threshold value. ✍️ How to set up the “In stock message” and “Low stock message”? In Theme Editor, go to Theme Settings, select Products, and scroll down to the Inventory status section. You can also customize the color of the text message in both light and dark versions. 5. How to show the price range on the product cards? To show the minimum and maximum price range of a product with multiple variants, follow these steps: Step 1: In Theme Settings > Product > Product price. Step 2: Toggle on the Enable price range setting. Step 3: Click “Save”. 6. How to link a Price Guide Popup next to the price range on the product cards? You can allow your shoppers to view additional price-related information using a popup link: Step 1: In Theme Settings > Product > Product price, toggle on the Enable price range setting. Step 2: Create a page in Online stores > Pages. Step 3: Enter the URL to that page in the Price guide popup page link field. Step 4: Click “Save”. Then, an "Info" icon (!) will appear on the product card. Clicking it opens the linked popup page. 7. How to customize the price format under each product card? Step 1: In Theme Settings > Product > Product price. Step 2: Entering into the Custom price format field using these placeholders: {price}: The product's current price. {max_price}: The highest price value. {middle_price}: The mid-range price value. {min_price}: The lowest price value. ⚠️ Note: You can hide the price on the product cards using this setting. For example, fill in: “Open to offer”. However, the actual price will still be visible on the product page. Step 3: Click “Save”.
Theme settings
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. Setting for "Swatches types on product card" has 3 options: text/color/both. You can display swatches using both text labels and/or colored squares on the product cards. 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', 'Square' and 'Natural' 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. Choose the swatch size from the following options: Small, Medium, Large. The default size is set to Small. This setup is required to display them across the site. Step 5: Adjust the default number of swatches displayed on product cards by using the setting: “Swatches shown by default”. Choose a number between 0 and 12 to determine the number of swatches shown by default on the cards. The default setting is 4. Selecting 0 will display all available swatches on the product cards, allowing customers to view all options directly. Each row can accommodate a maximum of 6 swatches. The swatches will automatically wrap to the next line if they exceed the card width. 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 color code as above, Eurus also offers you the ability to show images as color swatches. In Admin > Content > Files, upload the image file with a file name that matches the color name, replacing spaces with hyphens. For example, for the 'Gray' color variant, upload 'grey-color.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. 6. How to use variant images as product swatches? To use variant images as product swatches, follow these steps: Step 1: Add Variant Images in Admin: Go to your Shopify admin panel and navigate to the product you want to edit. Ensure each variant of the product has an image assigned to it. This will be used as the swatch image. Step 2: Enable Swatches in the Theme Editor: Open the Theme Editor and navigate to Product Swatches settings. Enable the option "Replace color options with variant images" to use variant images as swatches. Enable the setting “Enable on product cards” to display variant images as swatches on product cards throughout your store. Step 3: Enable Swatches in Specific Sections: For Product Information, Quick View, or Featured Product sections, navigate to these sections in the Theme Editor. Ensure the Swatches option is enabled in the Variant block to show variant images as swatches in these areas. By following these steps, variant images will be displayed as swatches across your store, enhancing product visualization and making it easier for customers to see different variants.
Theme settings
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 a) Colors & Colors for the dark theme Summary of color customization options: General Colors: These settings allow you to customize the overall appearance of your store by defining colors for various elements such as backgrounds, headings, titles, text, links, prices, error/success messages, borders, cart dots, and rating icons. Button Colors: Customizing button colors includes setting colors for primary and secondary buttons, as well as their hover states. Header Colors: Defining header colors involves adjusting the background, text, and line colors of the header section. Footer Colors: Adjusting footer colors includes setting the background, heading, title, text, links, and line colors of the footer. Image Treatment: Configuring overlay and text colors on images across the site You can also set up colors similarly for the dark theme. b) Typography Typography Customization: Body: Choose the font and base size for the main text to ensure readability and a consistent appearance across all text in the body of your website. The right font and size help in creating a pleasant reading experience for users. Headings: Select the font, base size, and text transform settings for headings to define how titles and section headers are displayed. This helps in establishing a clear visual hierarchy, making it easier for users to navigate and understand the content structure. The Heading Size configuration primarily controls the size of the H1 heading. Other heading tags (H2, H3, etc.) are automatically adjusted as a percentage relative to the H1 size. For example, if you set the H1 size to 100px, the H1 on your site will follow this setting, H1 is set to 170% of H2 in the theme logic. Each section within your theme has its own configuration for heading and text sizes. These are expressed as a percentage of the value selected in the main typography settings. Example: If this section has a heading size set to 50% and uses an H2 tag, the heading size for this section would be calculated as: 50% × (H1 Size/170%)~30px, with H1=100px, configured in Theme Settings > Typography > Headings. Others: Customize the fonts used for menu items and buttons to maintain a cohesive design that aligns with the overall style of your site. In conclusion, by customizing both color and typography settings, you can create a visually cohesive and engaging experience for your store's visitors. These settings provide flexibility to enhance the overall aesthetic and usability of your store. 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. Icon In Theme Settings, you can choose the style for the whole icon set inside your theme. There are 2 styles to choose: Classic Modern Below is an example of the differences between 2 styles: Note: Whether you choose the Classic or Modern style, the list of icons to choose remains the same. If an icon is missing in one style, it's shown in the other. (Example: You choose DNA icon → it will always show the DNA icon of the Modern style.) 4. 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. Enable page transition: When this setting is enabled, a smooth page transition effect will be applied, displaying a black screen briefly before revealing the page content. 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. 5. 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. 6. Scroll bar A scroll bar is a graphical user interface element that allows users to navigate through content that extends beyond the visible area of a window or a webpage. The main scrollbar of the Eurus theme is located on the side and appears on all pages. To customize the width of the main scroll bar in your theme, follow these steps: Go to Theme settings > Design > Scroll bar. Eurus theme provides the following options for the Main scrollbar width: Default/ Very Thin/ Thin/ Medium/ Large/ Very Large Note: Due to the limited styling capabilities of each platform, custom scrollbars aren't fully supported on iOS 14+ devices and the Firefox browser.
