Theme settings
Theme settings
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 => Metafields and metaobjects => 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 Metafields and metaobjects => 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. 7. How to optimize the swatch display layout? To keep your product cards clean and well-organized, you can control how many variant swatches are displayed by default, like this: Open Theme editor > Theme settings > In Swatches shown by default, choose how many variant swatches are displayed on product cards by default. Use 0 here if your products have only a few variants and you want to display them all.
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: Type of animation How is this animation used? How to set up Affected areas Button animation Enable the primary button effect when hovered. In the Primary button hover animation setting, 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. All the positions where primary buttons appear. Carousel Animation Carousel elements in the site can feature this animation (a bouncing effect), enhancing visual dynamic appeal. Untoggle the Disable carousel animation setting. Logo list, Social feeds, Testimonials with cards, Collection list, Collection list carousel, Featured collections, Product attribute table, Product bundle, Video shopping, Promo code list, Promotion grid, Collage, Media gallery, Text columns with icons, Text columns with images, and Video hero. Wide Image Parallax Effect Wide images on the site can feature a parallax effect, enhancing visual appeal. Untoggle the Disable parallax effect setting. Slideshow, Promotion banner, Media with text, Collection banner, Map, and Age Verification popup. Image Zoom-In Animation Enable zoom-in animation with images. Untoggle the Disable image zoom-in animation setting. Product card images, Collection card images, Media gallery, Promotion grid, Promotion popup, and Text columns with image Heading and Subheading Animation Enable fade-up effect with headings and subheadings. Untoggle the Disable heading and subheading animation setting. Headings and subheadings of almost all sections on the theme Page transition animation Apply a smooth page transition effect, displaying a black screen briefly before revealing the page content. Toggle the Enable page transition setting. Transition at all pages on the site. 🤔What happens if you disable the animations? You have the option to disable parallax effect and zoom-in animations, heading and subheading 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. 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.
