Product Information

1. What is product information?

Product information is the essential content displayed on a product page, providing customers with details about the product's features, specifications, dimensions, materials, and more. It helps shoppers understand what the product is, what it offers, and whether it meets their needs or preferences. 

Additionally, product information may include images, videos, reviews, and other media to offer a comprehensive view of the item. This information is crucial for customers to make informed decisions and feel confident about their purchases. This post will walk you through the steps to set up the product information section, allowing you to personalize your product page.

2. How to set up the Product information section?

a) How to enable image zoom?

To enable image zoom, simply check the "Enable image zoom" option in the setting settings.

b) How to enable video looping?

To enable video looping, you first need to ensure that the video autoplay setting is enabled. Once that's done, you can activate looping by checking the "Enable video looping" option in the settings.

   Note: When looping and autoplay are enabled, the video will automatically mute. Customers can manually unmute the video using the video player controls if they wish to hear the audio.

c) How to show breadcrumbs on the product page?

To show breadcrumbs on the product page, you can:

• Enable the “Show breadcrumbs” setting to display breadcrumbs.
• Choose whether to include borders around the breadcrumbs for a defined appearance.
• Expand the breadcrumbs to the full width of the desktop screen for enhanced visibility with “Make breadcrumbs full width on desktop” setting. 

d) How to show a sticky add-to-cart bar?

  To show a sticky add-to-cart bar, follow these simple steps:

Step 1: In the “Product information” section, add the "Sticky add to cart" block to your product page.

Step 2: Customize the following key settings:

• Choose how the add-to-cart bar appears on desktop screens by using setting “Desktop display type” (Popup/Full width)
• Enable the quantity selector for customers to adjust the quantity of items they want to add to their cart.

Full width:

Popup

3. How to show multiple images for each product variant?

Want to show off multiple images for each product variant? Shopify’s one-image-per-variant rule might cramp your style. The Eurus theme 6.6.0 update lets you easily add as many images as you want.

a) How It Looks on Your Store

b) Setting Up the Product

Step 1: Access your product in Shopify

1. In Shopify admin, go to Products.
2. Select an existing product or click Add Product to create a new one.

For detailed instructions, check Shopify’s guidelines.

Step 2: Upload images & update variants

1. In the Media section, upload all the images you need.
2. In the Variants section, enter the option name and option values for your product.

Step 3: Edit ALT text

1. Click the image to edit the ALT text
2. Select Add alt text and type in the ALT text:

• The ATL Text is the same with Option value you set above, MUST follow this format:

#option-value #: hashtag character option-value: written in lowercase, replace spaces by hyphen “-”

Example: Inside the option name "Color", there is an option value called "Mint blue," then for all images representing this Mint blue option, enter #mint-blue for your alt tag and click "Save alt text."

• All images related to one Option value use the same ALT text 

 

❓ What about my ALT text for SEO purposes? Simply type your desired text in the ALT field before the # symbol, like this: Example: Super attractive and comfortable #mint-blue.

c) Setting Up the Eurus Theme

Step 1:

Go to the Theme editor and navigate to the Product Page.

Step 2:

• On the right panel, scroll down and enable "Only show media associated with the selected variant".
• Fill in the Option name in "Option to classify variant media" and click SAVE.

Important note:

• The text must exactly match the Option name in Shopify admin
• Enter all languages available on your site, separated by semicolons (e.g. Color; Colour; Couleur)

Note: ✅ Works only for Product information and Featured Product sections. ✅ If ALT tags are set up, the default variant image added in Shopify admin won’t be shown as product featured image. In this case, images which do not have any option name's alt tag will be hidden. ✅ Images display on your storefront in the same order arranged in the Shopify admin media list.

 

d) How to Show Variant Images on the Page First Load

Make a great first impression with your customers! Learn how to immediately show the most relevant images when customers land on your product page.

Step 1:
In the Theme editor under the Product information section, enable the "Show variant images on page load" option.

This makes sure that when a customer first visits the product page, the variant images show up according to the ALT tags you’ve set up.

Step 2:
Choose how you want to display variant images on the first visit:

Status of	The result on first page load
Enable	Only the images related to the first product variant will be shown.
Disable	The Shopify default variant image will be shown.

 

Need Help?
Contact support if you encounter any issues.

4. How to show product basic information (title, price, description, etc.)?

a) Product title and Vendor name

By default, the product title and vendor name are displayed in the product page. The vendor name appears above the product title. 

If you want to rearrange this order, follow these steps:

• Disable the "Show product title" and "Show product vendor" settings in the section settings. 

• Then, add two separate blocks for the product title and vendor name. Additionally, you can adjust the size of the product name as needed (Vendor name cannot be resized.

You can link the vendor name to a page showcasing the vendor's corresponding products on the product page. Additionally, you have the option to link to a popup page without leaving the current page, or to an external URL. 

To provide more details about a product's vendor, you can set it up following the priorities below:

• Link Vendor to Associated Collection: When you tick the "Link vendor to associated collection" option, either in a specific section or block, depending on where vendor details are displayed or added. The vendor name on the product page will link directly to a collection of products by that vendor. This offers a seamless way for customers to explore more products from the same vendor.

• Show Page Content in a Popup: If you prefer not to redirect customers away from the current page, you can select a page to display its content in a popup. This is especially useful when using metafields to show vendor collection in the admin. If this option is enabled, the link to the vendor's collection is applied automatically.

• External Link Option: If you want to provide an external link to more information about the vendor, you can fill in a URL that will direct customers to an external website or resource.

The preferred option is to link to the page containing the vendor's products, as the primary goal is to provide a direct link related to the vendor.

b) Product price

To display the product price, follow these steps:

• Add the "Price" block to your product page. This block will automatically display the price of the product.
• Configure Price Block: You can choose whether to include tax status and shipping policy information in the displayed price. Adjust the text size of the price to ensure it fits well with the overall design 

If you need more information, please read Shopify documentation for detailed instructions on Location-based tax settings

c) Product description

To add the product description with an option to show it as a collapsible tab, follow these steps:

• Add the "Description" block to your product page. 
• Configure Collapsible Tab Option: Within the description block settings, enable the option to display the description as a collapsible tab. This will help optimize space on the product page, especially for products with lengthy descriptions.

Note: If you want to display a long description in rich text format, you can use the Product Description section of the theme.

d) Product variants and Quantity selector

To include product variants and a quantity selector on your product page:

• Adding the "Variant Picker" block will automatically display all variants of the product. .You can configure this block to display variants either as a dropdown menu or as buttons, depending on your preference.

Type: Dropdown

Type: Button

• Add Quantity Selector Block to enable customers to specify the quantity of the product they wish to purchase. This block allows customers to adjust the quantity before adding the item to their cart, providing them with more control over their purchase.

5. How to set up Add to cart and Buy buttons?

a) How to show the "Buy it now" button?

The "Add to Cart" button will be shown by default when the product is available.

The "Buy it Now" button is a direct route to checkout, bypassing the mini cart or cart page entirely. To display this button, follow these steps:

• Add "Buy Buttons" Block: First, ensure you have the "Buy Buttons" block added to the product information section of your product page. This block typically contains both the "Add to Cart" button and the "Buy it Now" button.
• Enable "Buy it Now": Look for the option labeled "Show dynamic checkout buttons" and turn it on. This action will not only display the "Buy it Now" button but also any other dynamic checkout buttons provided by payment methods like PayPal, Amazon Pay, and more.

Keep in mind that enabling this option will allow customers to proceed directly to checkout without going through the mini cart or cart page, enhancing the shopping experience with faster transactions.

b) How to show store pickup options?

Pickup availability refers to the option for customers to collect their purchases directly from a store location, instead of having them delivered to their address. The benefits of offering pickup availability include:

• Convenience & Customer satisfaction: Customers have the flexibility to choose a pickup location and time that suits them best, avoiding the need to wait for delivery or worry about missing packages.
• Cost savings: Offering pickup options can help reduce shipping costs for both the merchant and the customer, particularly for local orders.

To set up the store pickup feature, first follow the instructions provided here:Shopify's guide on setting up local pickup. Then, enable the store pickup option in the respective block settings to display it on your website.

Additionally, you can tick the box "Hide when pre-order is enabled" which means the option will be hidden when the product is not available and can be pre-ordered. This may result in not offering the pickup option. Guide for Pre-order features can be found below.

Result:

6. How to show Pre-order buttons?

7. [Gift card] How to show gift card recipient form?

This feature is applicable only for gift card products. To display the gift card recipient form, follow these steps:

• Navigate to the "Buy Buttons" block in the theme settings.
• Tick the option to show the gift card recipient form.

This will allow customers to directly send the purchased gift card to the email address entered in the form, along with a personalized message.

Result:

In the email of recipient:

8. How to show product Inventory status?

To display the inventory status of products or variants, follow these steps:

• Go to the theme settings. Then, navigate to the "Products" section.
• Look for the option labeled "Inventory status".
• Configure the settings according to your preferences to show the stock status of products. You can choose to display whether a product is in stock, out of stock, or low in stock based on this setting.

For detailed instructions on how to alter the inventory stock status, refer to the guide provided here.

9. How to show Ratings?

The benefit of showing ratings is that it enhances trust and credibility for your products. To display ratings, please note that the theme itself cannot provide a built-in review feature. You'll need to use an app for this functionality. Once you've integrated the app, you can use app blocks to show ratings, stars, and the number of reviews for each product. 

Check this guide for more information.

Additionally, if you encounter compatibility issues with other review apps during use, please contact our support for assistance. We are happy to assist you!

10. How to show Labels and badges?

Follow the instructions provided in the guide here to set up product labels and badges.

11. How to show Estimated shipping date of the product?

To display the estimated shipping date of the product, go to the theme settings and locate the Shipping and delivery section. Detailed instructions and settings for this feature can be found in the guide of theme settings here.

12. How to create Collapsible tabs?

To create collapsible tabs for additional content in the description section, follow these simple steps:

• Add the block “Collapsible tab”
• Customize the title of the collapsible tab to describe the content it will contain.
• Add the content you want to display when the tab is expanded.
• Check the box "Open this tab by default" if you want the tab to be expanded automatically when the page loads.

Result:

Tips: You can also utilize metafields to dynamically populate content based on the product, providing more personalized information.

13. How to show Social sharing icons?

To display social sharing icons, follow these steps:

Go to theme settings. Then navigate to the "Social Media" section, you can see 3 Sharing Options.

• Share on Facebook
• Tweet on Twitter
• Pin on Pinterest

Once enabled, these options will appear on the product page for customers to share across different social media platforms.

14. How to show Trust badges?

Trust badges are symbols or images displayed on your store to enhance credibility and trustworthiness. They often include security seals, payment method logos, or quality certifications. These badges reassure customers about the safety and reliability of their transactions.

In the Product information Section, Add the Trust badge block. This block allows you to add badge images to your product pages. These badges can include various certificates, quality marks, or icons representing secure payment methods.

Admins can customize the trust badges by adding any image they prefer. This feature enables flexibility in displaying additional visual elements that may enhance trust or convey specific messages related to the products or brand.

15. How to show a Back-in-stock alert?

This feature allows customers to subscribe to notifications when a product becomes available again after being out of stock. It's handy for customers who are interested in purchasing a product that's currently unavailable.

In the Eurus theme, you can choose how the back-to-stock alert behaves. It can either show by default regardless of the stock status of the product, or only appear when the product is unavailable, based on your settinguration (Use "Only show when product is unavailable" setting).

Admins can customize the text and message displayed when customers subscribe to the back-to-stock alert. This allows for personalized communication with customers who are interested in the product.

After customers subscribe, the store owner receives an email notification about the subscription. However, it's essential for the admin to manually send an email to customers when the product is back in stock, as the theme doesn't handle this automatically. You can integrate with email automation systems such as Klaviyo for further customization.

16. How to create Customizable options?

Follow the instructions provided in the guide here to set up Customizable options.

17. How to show the Gift wrapping option?

Gift wrapping is a service that involves packaging items as gifts. Admins can create a gift wrap service product and offer it for sale alongside regular products. This adds a personal touch to their orders, making them suitable for special occasions such as birthdays, anniversaries, or holidays. Additionally, it can serve as an additional revenue stream for the store, as customers may be willing to pay extra for this convenient service.

Setup Instructions:

• Choose the product in the theme settings > gift wrapping section.

• Add the "Gift wrap" block to the product page.
• Checkbox Display: Once added, a checkbox will appear, allowing customers to opt for gift wrapping.
• Admins can configure the label of the heading in the block according to their preferences.

• When customers add a regular product to their cart on the storefront, the gift wrap service product is also added to the cart simultaneously, meaning they can buy the product and the service at the same time, or merchant can offer free gift wrapping in some occasions.

18. How to show complementary products?

Complementary products refer to items that complement or go well together with a customer's main purchase. This can lead to increased sales and higher customer satisfaction as it helps shoppers discover related products they may be interested in. 

To utilize this feature, you need to install the Shopify Search & Discovery app. Follow the guide provided by Shopify here to add complementary products to your store: Customize product recommendations or follow our video guide here.
Once completed, you can add a Complementary block to your Product information Section. The main settings include:

• Customize the title or heading for the section. Choose whether to display the complementary products as a collapsible tab.
• Decide whether to show a background behind the complementary products section.
• Set the maximum number of complementary products to display. Specify the number of products shown per page if pagination is enabled.
• Additional settings that apply when using a carousel.
• Adjust the aspect ratio of the product images.
• Choose whether to display the vendor name for each complementary product.
• Decide whether to show the product ratings alongside the complementary products.

19. How to show highlighted information (optional icons)?

To showcase important product information like reviews, unique selling points, or key features on the product detail page, you can utilize the highlighted information blocks available in the theme. There are two types of blocks for this purpose:

• Text with icon: Ideal for longer texts, this block allows you to include custom icon images, adjust icon size, style text and background, and customize the overall appearance.

• Featured icon:
• This block is suitable for listing key features using short phrases or bullet points. You can modify settings such as heading size, icon size, line and border alignment, column content alignment, and choose colors. Each block can accommodate up to 6 features, and you can customize each feature individually, including the icon, heading, and text.
• The "Apply to Collections" setting allows you to add multiple blocks and icons with different appearances based on selected collections without needing multiple templates. You need to select collections to show this Featured icon block.
• 
  
  

  If no collection is chosen, the block will be hidden. You can select up to 50 collections to display the featured icon block.

20. How to add a collection link?

The purpose of displaying product collection links is to provide a way for users to navigate from a product page to a collection page where they can see other products belonging to the same collection.

• Provide a label that describes the link to the collection page. 
• Select colors for the background and text of the collection link that are suitable for both dark and light modes

Note

• Only one block can be added per product page to display the collection link.
• If a product does not belong to any collection, the block should be hidden to avoid confusion or unnecessary links.
• For products that belong to multiple collections: if the product is accessed from a collection page, it will use that specific collection. Otherwise, it will default to the first collection listed in the collection order

21. 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.

22. How to add Size chart?

a) General guide

A size chart is a visual or textual guide that helps customers determine the appropriate size to order based on measurements and fit preferences. Please follow these simple steps:

• First, create a new page in your Shopify Admin named "Size Chart" or similar. Follow Shopify's guide on creating pages here.
• Select or add a block named "Size Chart"
• Enter a heading for the size chart block.
• Choose the previously created "Size Chart" page from the dropdown menu.

b) Create size charts for different products:

To add different size charts for various products, follow these steps:

• Create separate size chart pages for each product or product type.

• Create a metafield of type 'Page' to store the size chart page for each product.

• Assign the appropriate size chart page to the metafield for each product.

• Add the metafield to the configuration in the Theme Editor to display the correct size chart page for each product.

23. How to show additional details?

The "Additional Details" block enhances product pages by offering a structured, collapsible area for extra information, keeping the page clean and organized. This feature allows you to add tabular information that can be utilized across various industries (e.g., Nutritional Facts for Food & Drink, Usage for Plants and Herbs, Product Specs for Jewelry, Fashion, Technology).

• Navigate to the Product Information section in your theme settings.
• Add a new block titled "Additional Details".
• There are configurations for the Left Column Label to set the label for the left column and the Right Column Label to set the label for the right column.
• How to Add Tabular Content: Fill in the Text Area configuration by following these rules:
• Separate the label and value with a colon :
• Shift + Enter to break to a new line for adding a new row.
• Use a dash - to indent the rows.
• Enter to add a new line and separate different tables.

For example:

24. How to show other blocks?

To display additional information about the product, you can use three different blocks:

• Text: This block allows you to add custom text to provide extra details about the product.
• Separator: Adding a separator line helps to distinguish between different sections of the product information, making it clearer for customers.
• HTML: If you need more customization options, you can use the HTML block to add custom content in HTML format. This block is more advanced and provides flexibility for embedding various types of content.