FAQs

by Admin on Feb 16, 2024

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

  1. First, go to Theme settings > Product swatches 
  1. On configuration "Swatches type on product card" > select Color
  1. 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…).

  1. 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:

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 860
2-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:

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!