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 change the layout of the product media?

To change the layout of the product media, follow these steps:

• Choose between left or right layout for the media section on desktop devices.
• Select from different media layouts such as Thumbnail slider, Stacked, or 2 columns. Thumbnail slider option allows additional configurations like enabling arrow buttons for slide navigation and choosing the position of thumbnails.

Thumbnail slider

Stacked

2 column

• Customize the size of media displayed on mobile devices to ensure optimal viewing.

Tips: Consider enabling sticky content feature, which allows content to remain visible while scrolling, this will lead to enhancing customer engagement with your product content.

b) How to enable image zoom?

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

c) 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.

d) 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. 

e) 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 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.

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.

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.

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

5. How to show Pre-order buttons?

a) Show Pre-order button for all products

In “Buy buttons” block, enable the “Pre-order” setting to “Yes”

Once enabled, the "Add to Cart" button will be replaced with the "Pre-order" button for all products in your store. Customers will then have the option to pre-order products that are not yet available for immediate purchase.

b) Show Pre-order button for unavailable products only

To display the pre-order button only for unavailable products, choose the option that says "When product is out of stock."

Note: If 'When product is out of stock' option is selected, please make sure 'Continue selling when out of stock' is enabled in Shopify admin > Product detail page.

Additionally, you can customize the message and show dynamic checkout buttons for the pre-order button in the setting settings.

6. [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:

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

8. How to show Ratings?

The benefit of showing ratings is that it enhances trust and credibility for your products. Positive ratings and reviews from other customers serve as social proof, reassuring potential buyers about the quality and reliability of the products. This can lead to increased conversions and sales as customers are more likely to purchase from a store with positive feedback from previous buyers.

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. 

Some review apps compatible with Eurus theme include: 

• Fera Product Reviews App 
• Judge.me
• Shopify Product Review (deprecated)

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

9. How to show Labels and badges?

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

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

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

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

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

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

15. How to create Customizable options?

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

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

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

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

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