Common Guide
Common Guide
Common Guide
1. What is RTL support? RTL stands for Right-to-Left, which refers to languages where text is written and read from right to left, such as Arabic, Hebrew, and Persian. Supporting RTL languages involves the ability of a theme or system to display and adjust text and interface elements when users switch to languages that use RTL writing direction. This ensures that these languages are displayed correctly according to their text flow and preferences. What happens if a theme does not support RTL? In this case, when users switch to RTL languages, the interface and text may not fully display according to the user's language preferences. The Eurus theme includes this function, which proves especially advantageous in markets where text follows a right-to-left reading format. Thus, users of the Eurus theme can derive substantial benefits from this feature. 2. How to show RTL language on the site (without breaking the layout)? To show RTL languages on your site without breaking the layout, follow these steps: Step 1: Add RTL Language: Ensure you have at least one RTL language added to your Shopify store. Follow Shopify's guide to manage languages here. Step 2: Configure Theme Settings: Navigate to Online Store > Themes > Customize in your Shopify Admin. Go to Theme settings > Design > Layout > RTL languages. Enter the language codes for RTL languages you want to support (e.g., 'ar' for Arabic). All codes must follow ISO Language Code Table and separated using commas Step 3: Adjust Section Alignments (if needed): Note that some sections with alignment configurations may not automatically adjust for RTL languages. Manually adjust alignments where necessary, such as heading alignments, to ensure proper display. For a case study on how Eurus theme handles RTL language solutions, you can refer to the case study provided here. This approach will help you implement RTL language support on your Shopify site while maintaining a consistent and functional layout.
Common Guide
1. What are product siblings? Product siblings refer to the ability to link directly to other products as product swatches on a product detail page. This feature allows you to display swatches with images and information representing each variant option of a product. The result is a richer and more informative product detail page, enhancing the shopping experience by visually displaying related product variants. When viewing a sibling product, only the images, product details, and prices specific to that variant option are displayed. 2. How to set up product siblings? To set up product siblings, follow these steps: Step 1: Create individual products Create individual products, each with variants like sizes, materials, etc. These products will belong to the same sibling group. Step 2: Group Sibling Products into a Collection Organize the sibling products into a single collection. For multiple sibling groups, create multiple collections. Step 3: Define Custom Metafields to link products Sibling Collection Handle: Enter the handle of the collection containing the sibling products. The Eurus theme supports various types of product metafields. Sibling Option Metafield: Enter the name of the sibling option that will link the individual products (e.g., Color). Step 4: Update Metafield information for each product Update the metafield information for each product to ensure they are properly linked. Step 5: Add the Siblings block to the Product template Go to the Theme Editor and add the Siblings block to the product template. Enter the name of option sibling (e.g: Color,..) Enter the keys for the two metafields created in Step 3 into the block. By following these steps, you can set up product siblings to display linked product swatches with relevant images, details, and prices for each variant option. 3. How to show color swatches for siblings options? This setup is similar to the current logic used for color swatches in the theme. Refer to the Eurus theme's product swatches documentation for detailed guidance. Example: 4. How to show sibling options in cart, checkout and order detail page? The Eurus theme automatically supports the display of sibling options in the cart, checkout, and order detail pages. This ensures consistent product information across all stages of the shopping process. Example for the product “Long Lasting Cream Eyeshadow Stick” which has 3 variants: Orange/Pink/Red In cart page: In check out page: In other details page: Note The Eurus theme supports various types of product metafields. Supported option value metafields include: Multi text Single line text Ratings (one value evidence) URL (evidence) True/false (evidence) Color Partially supported Metafields (displayed as code/variables - to be updated in next updates): Rich text Metaobject product list Dimension (list value) Dimension (one value) Volume Weight (evidence) All list types (such as collection list, URL list, ratings list) Unsupported option value metafields include: Product/Product list Date/time Page/Page list Metaobject If a product belongs to a sibling collection but does not have a value in the sibling option metafield, it will not be displayed on the front end . Priority of option values: If there are duplicate names between sibling options and customizable options, only the last option (from top to bottom) will be shown in cart, checkout and order detail page.
Common Guide
All built-in functions of the theme work seamlessly as you install it, but if you want to have more advanced features, such as customized upsell products, you can add meta fields into the store following the guides below. Product custom data Cart upsell metafield To add upsell products for a product, you need to create a metafield. From you store backend, go to Settings > Custom data > Metafields > Choose Products to create metafields for products: Create a metafield by clicking onto Add definition button in the right corner: Fill in the following information: Name: Fill in the name of the metafield. This name will show up in product detail page in backend for you to see. We recommend you fill in the name "Cart upsell" to avoid misunderstanding when you edit other fields in products. Namespace and key: the key to identify the metafield in the database, and will be used to display upsell products in the frontend. The key MUST BE "cart.upsell" for the metafield to work. Description: this is optional field, you can add text here to help describe the purpose of the field. In Select type field, choose Product, and then choose List of products, so you can add as many products to be upsell products as you wish. After that, you can go to each product page in backend and scroll down to the bottom of the page. Click onto Metafield > Cart upsell and select a list of products to be the upsell products: For example, if you add product B, C and D to be the upsell products of product A, whenver you add product A to cart, product B, C and D will show up in the Cart upsell section Blog custom data Blog featured image If you wish to add the banner image for blog page, you can add a metafield to Blogs. From you store backend, go to Settings > Custom data > Metafields > Choose Blogs to create metafields for blogs. Create a metafield by clicking onto Add definition button in the right corner Fill in the following information: Name: Fill in the name of the metafield. We recommend you fill in the name "Featured image" to avoid misunderstanding when you edit other fields in blogs. Namespace and key: the key to identify the metafield in the database, and will be used to display blog featured image in the frontend. The key MUST BE "custom.image" for the metafield to work. Description: this is optional field, you can add text here to help describe the purpose of the field. In Select type field, choose File, and then choose One file and set up the rules that only accept Images: After that, you can go to each blog settings in backend and scroll down to the bottom of the page. Click onto Metafield > Featured image and select image to be the banner image of the blog page:
Common Guide
Search Engine Optimization (SEO)
1. What is SEO? SEO (Search Engine Optimization) is the practice of optimizing your online content to improve its visibility and ranking in search engine results. When it comes to the Eurus theme support for enhancing SEO for your store, there are several options available to boost your website's SEO. Some of these options may include customizing meta tags such as Image/Video Alt tags, Buttons, and Collection descriptions. By utilizing these SEO features within the Eurus theme, you can enhance your store's online visibility, attract more organic traffic, and potentially increase sales. 2. How to optimize SEO for your store using the Eurus theme? When it comes to optimizing a website for search engines, there are no specific rules to adhere to. The suggestions provided serve as a basic reference, but if you need more extensive assistance with your website's SEO, it might be beneficial to think about collaborating with an expert. a) Image/Video Alt Tag: When adding images or videos to your store, it's essential to include descriptive Alt Tags. Alt Tags provide alternative text that describes the content of the image or video. This not only improves accessibility for users with visual impairments but also enhances SEO. Use concise and relevant descriptions in Alt Tags, incorporating keywords related to the product or content. In the Eurus theme, you can usually find the option to input Alt Tags when uploading or editing images and videos in your Shopify store admin. Config “Video alt text”: In the frontend: By providing meaningful Alt Tags, you help search engines understand the context of your visual content, contributing to better search engine rankings and a more inclusive user experience. b) Button To enhance SEO for your store using the Eurus theme, pay attention to button optimization. When adding buttons to different sections, ensure the text is clear, concise, and relevant to the linked action or destination. Incorporate keywords into the button text for better search engine understanding. Avoid generic phrases, opting for specific and action-oriented language to improve both SEO and user experience. Let's consider a scenario where you have a collection of discounted winter jackets. Instead of using a generic button like "View More" you can optimize it for both SEO and user engagement by using a more specific and keyword-rich button text such as "Explore Winter Jacket Deals" This not only provides clarity to users about the action they are taking but also includes relevant keywords like "winter jacket deals" that search engines can recognize. Additionally, consider addressing any issues highlighted by PageSpeed Insights regarding generic button labels and text links in general by referring to the documentation provided here: https://developer.chrome.com/docs/lighthouse/seo/link-text c) Collection description To improve both user experience and SEO on your Shopify store, it's vital to effectively utilize the description for your collection pages, which is often neglected. This description presents an opportunity to include relevant keywords, thereby boosting the page's visibility in search results. Maintaining a careful balance between incorporating keywords and providing valuable information to users is crucial. Tips: Utilize tools like PageSpeed Insight to assess your website's SEO performance or explore various SEO audit tools. For more detailed information, you can refer to Shopify's FAQ on SEO.
Common Guide
1. What is cart upsell? With Cart Upsell, you have the ability to promote additional products or special offers directly within the shopping cart. This provides a valuable opportunity to showcase complementary items or exclusive promotions to encourage customers to add more to their cart. Additionally, you can customize the section label, determine the number of products to display, and choose whether to enable it in the minicart or not. This flexibility ensures you can tailor the upsell experience to match your store's unique style and layout, regardless of the minicart design. 2. Ways to show products to cart upsell a) Default setting: By default, if no specific setup is configured by the admin, the theme will automatically showcase suggested products in the Cart Upsell section. This feature relies on Shopify's inherent "related products" rule, taking into account the customer's purchase history and product descriptions. Please check out the Shopify guide for more information: Show related products on product pages This seamless integration ensures that your Cart Upsell section presents products based on relevant data, enhancing the shopping experience for your customers. b) Static Product Selection: If you wish to emphasize particular products, such as bestsellers or featured items, you have the option to manually choose products within the theme settings. Follow these steps: Open the theme settings then navigate to the cart section. In the group config for Cart Upsell, find the option to select products and choose the desired products. Products selected in this section will be set for all products in your cart. Please note that if you are utilizing a product metafield to add upsell products (as explained in the next section), you should leave this field blank. This customization lets you create a personalized list of products to display prominently in the Cart Upsell section. c) Advanced Customization with Metafields: For more advanced customization, enabling you to tailor the Cart Upsell section for each product, you can utilize metafields. Follow the guide below to add metafields: Navigate to your store backend and go to Settings > Custom Data > Metafields > Choose Products to create metafields for your products. Fill in the following information: - Name: Provide a name for the metafield. This name will be visible in the product detail page in the backend. We recommend using "Cart Upsell" as the name to avoid confusion.- Namespace and Key: These are identifiers for the metafield in the database and will be used to display upsell products in the frontend. The key must be "cart.upsell" for the metafield to work.- Description: This field is optional, and you can add text here to describe the purpose of the field.- Select Type: Choose "Product" and then select "List of Products" to add multiple upsell products. After setting up the metafield, go to each product page in the backend. Scroll down to the bottom of the page and click on Metafield > Cart Upsell. Here, you can select a list of products to be the upsell products. For instance, if you add products B, C, and D as upsell products for product A, whenever a customer adds product A to the cart, products B, C, and D will appear in the Cart Upsell section. Note: The three methods follow a priority order, with the third method having the highest priority. If all three are set up in a particular theme version/ product, the third method (metafields) will override the previous ones. This flexible approach empowers you to effortlessly manage and customize the Cart Upsell section based on your specific marketing and product promotion goals.
Common Guide
1. How to show color swatches? Color swatches is a feature which allows admin to show products’ color variants as swatches on product cards and product information sections. How to set up color swatches First, go to Theme settings > Product swatches On configuration "Swatches type on product card" > select Color Fill in the name of the product option that you've set as color variant in all existing languages in Color option name. For example, in the product detail page you have the “Color” option as color variants https://i.imgur.com/whKOjOI.png, fill “Color" into the Color option name field. If your site uses multiple languages and the option name is different for each language, input names in all languages in the field (e.g. “Colour” for French, “Farbe” for German…). After Step 3, Shopify by default provides the basic colors to show as swatches (e.g. Blue, Black…). In case the product's colors are different from those basic colors, the color swatch will be shown as blank swatch. To cover this, Eurus enables merchants to have all ranges of colors to be color swatches. In the Color swatch values field, input values based on this format: <option value>:<color code> For example, you have the colors: Azul, Rosado, Beige, Fucsia You need to fill in: Azul:#A3D1ED Rosado:#E4C6C7 Beige:#E0CEB8 Fucsia:#B85996 Especially, we also support custom images to be color swatches. Simply go to Content > Files and upload the color swatch image(s). Then in Theme editor > Theme settings > Product swatches > Color swatch values, input values based on this format: <option value>:<image name>, with <image name> being the name of the image file you have uploaded to Content > Files. For example: Azul:azul-image.png Rosado:rosado-color.jpg How to show color swatches on product cards After having finished the setup above, check the checkbox Enable on product cards. Color swatches will then be enabled on all product cards on all pages and sections. How to show color swatches on product page and product information sections To enable color swatches on each of the product section/page, go to the section/page and look for the Enable color swatches checkbox in the section’s setting (e.g.in Product page). 2. How to set up mega menus? Mega menu is the type of drop-down menu that can display multiple levels of links, images, or other content in a large and organized layout. Eurus designs a powerful, 4-level mega menu to serve large catalogs stores for a captivating navigation. Under Header section, there are 6 types of menu blocks for merchants to select https://i.imgur.com/PqY3hgc.png: Tabbed menu: Show submenu in vertical or horizontal tabs (e.g. https://i.imgur.com/R2uCi8U.png) Tree menu: Show items in classical tree menu (e.g. https://i.imgur.com/aFND9Te.png) Banner menu: Show up to 3 banners inside a menu item (e.g. https://i.imgur.com/P15YaJM.jpg) Product menu: Show product cards inside a menu item (e.g. https://i.imgur.com/l0pDk3N.png) Blog menu: Show blog posts inside a menu item (e.g. https://i.imgur.com/GXqyzcF.png) Contact menu: Show a contact form together with contact information, google map inside a menu item (e.g. https://i.imgur.com/tP6YcRb.png) Especially, merchants can add up to 4 levels of menu, instead of the default Shopify maximum of 3 levels. For details of how to setup menu, please refer to our video guide here. 3. How to remove “Powered by Shopify”? Go to Theme editor > Footer > untick the Show "Powered by Shopify" text setting https://imgur.com/Vadf86J. 4. How can customers leave reviews for my products? Please be noted that themes cannot allow customer reviews out of the box, so merchants will need to install a review app. Our theme has been compatible with the Judge.me Product Review app, which also provides a free subscription plan. 5. How to add product labels to products? Product labels are labels added on top of the product cards and on the product page, showing key information, ongoing promotions to help customers quickly identify products. To add labels and badges to the products, go to Theme editor > Overlay group > Product labels and badges > Add a label block. On clicking on the Product labels and badges section, a preview product cards will be displayed in Theme editor, including all label blocks added in the section https://i.imgur.com/Ac4pfk6.png. There are 4 types of labels merchants can add into a product cards: Sale label: automatically displayed for products on sale Sold out label: automatically displayed for products out of stock Image label: allow uploading an image to be label Text label: normal text label For more details of how to set up product labels, please refer to our video guide. 6. Can you recommend image sizes for the different image layouts of different sections in Eurus theme? Yes, absolutely. The Eurus theme is designed to have responsive image functionality, allowing the use of various image sizes across all sections. It means the theme itself can adjust images to look great on devices of any size, regardless of the original image size admin uploads. Recommended Sizes: For optimum quality, you can reference the image sizes used on our demo stores. Some examples include: Desktop (px) Mobile (px) Menu - Promotion image 750 x 500 - Menu - Banner menu 1500 x 2250 - Slideshow 1920 x 860 900 x 1290 Promotion banner 1 images: 1920 x 8602-3 images: 950x860 900 x 1290 Media with text 1400x900 - Text columns with image 750x750 - Collection list banner/Image comparison 1920 x 860 900 x 1290 Flashsale 1920x? (dynamic height based on content) 900x? (dynamic height based on content) Collection list carousel 1350 x 1900 - Promotion grid/Collage 1380 x 920 (standard 2 column-wide in 3-column layout) - Media gallery 400 x 400 (standard 4 columns) - Map 1920 x 860 - Collection banner 1920 x 860 - Video - Cover image 1920 x 860 - Popup 600 x 900 - Age verification popup 1920 x 860 - FAQ/Contact form 1400 x 900 - Email signup 1920 x 860 900 x 1290 Collection list/Collection page - Promotion block 900 x 1150 (standard 4-colum layout) - Tabs - Media with text 1400 x 900 900 x 1290 Event calendar 1400 x 900 - Shop the look Layered: 1920 x 860 Non-layered: 700 x 920 - Featured collections - Title card 1200 x 1800 (standard 4-column layout) - Flow - Media block 1400 x 900 - If you want to check image sizes on our Demo Store, please follow these steps: Visit the demo store: https://themes.shopify.com/themes/eurus/styles/breeze/preview Right-click on the image, choose "Inspect." Hover over the <img> tag, find "Intrinsic size" for reference: Note: Some sections offer options to adjust the height/width of added images (e.g., slideshow, promotion banner Image). Certain configurations may lead to distortion or enlargement, especially in fullscreen or "Adapt to first image" settings. Feel free to experiment with these settings to avoid display issues. For larger sections (like slideshows, promotion banners, grids, and collection banners), consider adding separate images for mobile viewing. This ensures your visuals remain effective and engaging on smaller screens, providing the best display possible across all devices. Explore these recommendations, and customize your images based on your preferences and specific section requirements. If you have any further questions, feel free to reach out! 7. How to add product siblings? Product siblings allow you to link directly to other products as product swatches. This creates a richer product detail page that includes swatches with images and information representing each variant option. This feature enhances the shopping experience by making it easier for customers to see and select different product variants. When viewing a sibling product, only the images associated with that variant option, along with the product details and prices for the variant, are shown. For detailed instructions and visual aids, please refer to the Product Sibling documentation in the common guide. 8. Does Eurus support right-to-left (RTL) languages? Yes, Eurus does support right-to-left (RTL) languages, which refers to languages where text is written and read from right to left, such as Arabic, Hebrew, and Persian. For more details, you can refer to the RTL guide.
Common Guide
1. What are customizable options? You can elevate your product customization with Eurus' unique Customizable Options feature. Unlike Shopify's default settings, each product is restricted to a maximum of 3 options to create variants. Additionally, these options are limited to the select format. Eurus enables admins to add multiple Customizable Option blocks to a single product. You can create a personalized shopping experience by selecting the type and quantity of Customizable Option blocks for each product. Details gathered through Customizable Options integrate into the cart, checkout, and order processes, ensuring a seamless transaction experience. Eurus stands out as the only theme offering such extensive Customizable Options. Say goodbye to the need for additional Shopify apps! 2. Types of customizable options Here are the types of customizable options in Eurus theme - Text: Allow customers to input custom text information about the product. Ideal for adding personalized text, such as engraving messages or custom labels. Text Options include: Text field Text editor - Select: Enable customers to choose from a list of options. Perfect for product configurations with a single-choice or multiple selection, like size or material. Select Options include: Checkbox Dropdown Radio button - File Upload: Permit customers to upload files. Useful for products where customers can provide specific files or images, such as custom designs or personal photos.- Swatches: Display color or text swatches for customers to select from. Swatches Option include: Color swatch Text swatch - Color Picker: Enable customers to pick a color using a color picker tool. Essential for products with color variations, allowing customers to visualize and choose their preferred color.- Date & Time: Allow customers to select a date, time, or both for a product. Commonly used for event-related products or services where customers need to specify a date or time. Conclusion:The customizable options feature in Eurus theme offer a diverse range of choices to enhance the shopping experience for customers. This flexibility empowers admin to create engaging and personalized product offerings, ultimately enriching the overall shopping experience for customers. 3. How to set up customizable options? Open the theme editor and navigate to the "Theme Sections”. In the "Product Information" section, add the "Customizable Options" block. Select the option type that best suits the customization needs of your product. In the "Option Name" configuration, provide a unique name for the customization option. Check the "Mark as Required" box if customers must select the customizable option in order to add the product to cart and checkout. You can also add a note or explanation for text options, select options, and file upload. Then, set up based on the chosen option type: a) Text options: Apply to Text type options such as Text field and Text editor. Input the maximum number of characters required in the "Maximum character length" field. This is only applicable if the option is required. Result: b) Select options: Apply to Checkbox, Dropdown, and Radio button options. Input values for Select type options in the "Option values" field, separated by a semicolon (e.g., Polo;V-Neck;Boat Neck). You can also set minimum/maximum values required to be selected, applicable only for Checkbox when the option is required. Result: c) File upload: Customers can upload a file in the "drop your file here, or browse" field (max file size 5MB). Result: d) Swatches: Input values for text swatch or color swatch options here. Each value should be on one line. For color swatch, input in 'option name:color code' format (e.g., White:#FFFFFF). You can select swatch style (round/squared), only applicable to color swatch and color picker options. Result: e) Date & Time: Admins can set up the earliest/latest allowed date. Users are only allowed to pick a date & time within this specified range. (Date format: YYYY-MM-DD). Result: 4. Limitations While this feature in Eurus Theme significantly enhances the product personalization experience, it's important to note a limitation: Customizable Options do not make any change to product prices and do not support the individual tracking of inventory for each customization option. Our team is actively researching and developing solutions to address this limitation, providing a more comprehensive inventory tracking feature.
Common Guide
Set up colors in section You could set up color for the elements in the section with the Styles configuration group. (Note: Styles configuration at Slideshow section) The Styles configuration has a Color palette which lets you select the colors for the elements in the section, usually including: text, button, and background. The number of elements that you can customize will vary depending on the section. (Note: Color configurations for Title card at Featured Collections section) Some sections also have the option to configure the colors of each element separately for both light and dark modes. For example: in Flash Sale section Note: The color/styles configuration in a section will override the color configuration in the theme settings. If you leave the color configuration in the section blank, then the color of each element will be determined by the theme settings.
Common Guide
This guide will show you how to customize the section layout of your online store using the Eurus Theme. The section layout determines how the content of each section is displayed on different devices, such as desktop and mobile. You can also adjust the width and the divider of each section to create a unique and engaging look for your store. This section layout could be divided into Desktop Layout and Mobile Layout 1. Desktop Layout The desktop layout controls how the section content is displayed on desktop devices, such as laptops and PCs. 2. Mobile Layout The mobile layout controls how the section content is displayed on mobile devices, such as smartphones and tablets. Basically, the mobile layout settings include the same options as the desktop layout settings. For example: The Desktop layout and Mobile Layout at Header section Slideshow section: Here’s how to configure it: Steps: Go to Theme editor In the left sidebar, click on the section you want to modify (e.g., “Header,” “Slideshow,” “Collection list”, etc.). Adjust the Desktop Layout configuration Preview and Save 3. Make section full width If you want to make a section full page width, you need to choose the Full page width option for the section width in both the desktop and mobile layout settings. This will make the section content span the entire width of the screen on both devices. Some sections have the Make section full width setting displayed in both the Desktop and the Mobile tabs. This means that you can configure this setting separately for each device. For example: Make section full width at Header section: At Featured collections section: At Promotion Banner section: 4. Show Section Divider If you want to show a section divider, you need to enable the Show section divider checkbox in the theme editor. This will add a thin horizontal line above the section heading, separating it from the section above. For example: Show section divider at Header section: At Logo list section: 5. Open link in new tab The "Open this link in a new window" configuration allows you to specify whether links from buttons, banners, or other elements should open in a new browser window or tab instead of the current window. This feature is useful for keeping users on your current page while providing additional information or resources from another source.
Common Guide
1. What is re-order? Why should I use it? The reorder feature in Eurus Theme offers your customers the convenience of reordering or replicating previously placed orders effortlessly. Instead of going through the entire shopping process again, this feature allows users to quickly add the same set of items to their cart. This feature is particularly beneficial for: Stores with Regular Large Orders: Ideal for businesses dealing with customers who frequently place large orders comprising various items. B2B Stores: Designed to cater to the needs of business-to-business stores where repeated orders of bulk quantities are common. Merchants Aiming to Reduce Abandoned Cart Rate: By offering a quick and easy reorder function, merchants can significantly decrease abandoned cart rates, enhancing overall user experience and customers royalty. 2. How to re-order with Eurus theme? Follow these simple steps to utilize the reorder feature with Eurus Theme: Step 1: Log In with Customer Account: Step 2: Navigate to the Order Grid, where users can view a summary of past orders. Step 3: Click “Reorder” Button: Look for the "Reorder" button, which automatically appears for every order that has been successfully completed. Simply click the "Reorder" button next to the desired past order. Note: When the order contains products that are not available/out of stock, pressing "reorder" will not add these products to the cart anymore. Step 4: Click “Add to Cart” Button: A popup appears, you can click “Add to cart”. This action will add all the products from that order directly to your shopping cart. By following these steps, users can efficiently use the reorder feature provided by Eurus Theme, making the process of repurchasing items quick and hassle-free.
