Ella - Multipurpose Shopify Sections Theme

1. Add Unit Prices

2. Join HaloThemes Community for upcoming Events, Promotions!

3. Language Tutorial.

4. HOW TO ADD CUSTOM FONT IN ELLA 6.X

5. Move the collection description to the bottom of the collection page

6. How to set up the "Portfolio Page" in Ella Shopify Theme?

7. How to set up the "Password Page" in Ella Shopify Theme?

8. How to set up "Free Shipping Threshold" function in Ella Shopify Theme?

9. How to set up the "Contact Page" in Ella Shopify Theme?

10. How to update Ella Shopify Theme?

11. How to set up the Variant Image Grouped function in Ella - Multipurpose Shopify Theme OS 2.0?

12. LIQUID ERROR on Top of Header

13. How To Start an Online Store in 2023 with Shopify?

14. How to set up "Pre-Order Product" function in Ella - Multipurpose Shopify Theme OS 2.0?

15. How To Set Up Different Product Description For Different Product Variant in Ella Shopify Theme?

16. How to set up "Multi-Level Categories" function in Ella - Multipurpose Shopify Theme OS 2.0?

17. How to set up Bundle (Frequently Bought Together)?

18. How to set up the Product Property By Metafields in Ella - Multipurpose Shopify Theme OS 2.0?

19. How to set up "Quick Edit Cart" function in Ella - Multipurpose Shopify Theme OS 2.0?

20. How to set up Advanced Mega Menu Layouts in Ella Shopify Theme?

21. CHANGE VENDOR LINKS IN ELLA 6.X

22. How to set up Sub-Categories on the Category Page?

23. How to set up Dynamic Browser Tab function in Ella Shopify Theme?

24. Set Up Footer Layouts for 26 Homepage Layouts in Ella Shopify Theme from version 6.5.0

25. How to set up the "FAQs Page" in Ella Shopify Theme?

26. How To Set Up Different Product Description For Different Product Variant in Ella Shopify Theme?

27. Guide to fix the "Customer_service_text" error in Ella Shopify Theme

28. How to set up "About Us Page" in Ella Shopify Theme?

29. How To Set Up "Ask an Expert" Function In Ella Shopify Theme

30. How to set up "Search" in Ella Shopify Theme?

31. How to set up "Quick Shop" function in Ella - Multipurpose Shopify Theme OS 2.0?

32. How to set up Product Combo?

33. How to update Ella Shopify theme?

34. How to set up "Exit Intent Popup" function in Ella Shopify Theme?

35. Adding custom CSS to your Shopify theme

36. How to install Ella Shopify Theme for your store?

37. How To Set Up "Product Badges/ Labels" In Ella Shopify Theme

38. How to set up Complementary Products in Ella - Multipurpose Shopify Theme OS 2.0?

39. How to set up "Multiple Languages" function in Ella Shopify Theme?

40. How to set up "Sticky Navigation Toolbar" in Ella - Multipurpose Shopify Theme OS 2.0?

41. How to set up "Local Pickup" function in Ella - Multipurpose Shopify Theme OS 2.0?

42. How to set up "404 Page" in Ella Shopify Theme?

43. How to edit menu items in Ella Shopify Theme?

44. How to set up "Notify Me Out Of Stock" function in Ella - Multipurpose Shopify Theme OS 2.0?

45. How to set up "Add to cart" Actions in Ella Shopify Theme?

46. How to update theme?

47. Set Up Header Layouts for 26 Homepage Layouts in Ella Shopify Theme from version 6.5.0

48. HOW TO SHOW IMAGES FOR BRAND TAB SECTION IN ELLA 6.X

49. How to set up "Customization Product Option" in Ella Shopify Theme?

50. How to set up A Different Mobile Menu in Ella - Multipurpose Shopify Theme OS 2.0?

Unit price is compulsory in Germany. If you want to include Unit prices for the product on the product page, please follow instructions below:

• Go to Editor -> Theme settings -> Multiple Layouts -> Product Page -> Product Page Layout 

• Go to the Admin -> Edit Code -> Sections / main-product.liquid -> find the corresponding template then click the arrow to go to the file to be changed. Follow the picture below.

• In the file that needs to be changed, please paste the code below into the end file as shown in the image below:

   {% assign current_variant = product.selected_or_first_available_variant %}

   {%- if current_variant.unit_price_measurement -%}

     {{ current_variant.unit_price | money }} <span class="separator">/</span>

       <span>

{%- if

 current_variant.unit_price_measurement.reference_value != 1 -%}

    {{- current_variant.unit_price_measurement.reference_value -}}</span>

   {%- endif -%}                                

    {{ current_variant.unit_price_measurement.reference_unit }}

 {%- endif -%}

 </div>

• Go to the Admin -> Edit Code -> Sections / main-product.liquid -> please paste the code below into file like image.

{% if product.selected_or_first_available_variant != '' %}

   if (variant.unit_price !== 'undefined') {

   var unit = Shopify.formatMoney(variant.unit_price,          

"{{ shop.money_format }}");

var unit_v = variant.unit_price_measurement.reference_value +           variant.unit_price_measurement.reference_unit;

$(".unit-price").html(unit + ' / ' + unit_v); 

    } else {

        $(".unit-price").html('');

    }

{% endif %}

• Also in Sections / main-product.liquid file, please paste the code below into file like image.

 if( '{{product.selected_or_first_available_variant}}' == ' {{product.selected_or_last_available_variant}} ' ){        

   $('.unit-price').html('{{ product.selected_or_first_available_variant }}');

   $('.unit-price').html('Code');

}

Dear our Customers,

Happy to launch our Official HaloThemes Community where you can find our newest news, information about upcoming events, promotions!

• This group is more than a forum. Your place to connect and collaborate with other businesses near you, like you, or at your stage of growth.

• Ask questions and join conversations around popular topics, and find solutions for common issues.

• Discover insightful talks and networking opportunities, whether online or in person.

• Browse the latest blog posts on commerce and platform.

From HaloThemes Team with love!

By default, the main language in Ella theme is English.

You can switch to using another different language or set up your store to use multiple languages.

Follow our next instructions to set up a different language from English or set up multiple languages for your store.

01. How to set up a different language?

- Language function is a default function in Shopify themes, not a custom built-in function. 

- By default, we copy the English texts for other languages to avoid any issues with 'translate missing' when switching to another language from English. 

- Please follow the instructions below to fill in the texts in your preferred language. While this process requires manual setup, it is easy to do.

Change the default language of your online store

You can change the default language of your store. Your default store language is used in your Shopify admin and in your store's checkout and theme.

Steps:

1. From your Shopify admin, go to Settings > Languages.
2. In Published languages, click Change default beside the language that is your current default language.
3. Select a language from the menu.
4. Click Save.

Note

If you publish a language to your store without adding translations, then you'll receive a message prompting you to add translations. Languages that are published without adding additional translations will only show the provided translations for the theme and checkout, and the default language for all other content.

Steps:

From your Shopify admin, go to Online Store -> Themes -> Edit default theme content

Start translate the English texts within the red highlight tabs into your language or you can click Localize button to translate by the app:

At here, you will replace the English texts by your preferred language and Save your changes.

02. How to set up Multiple Languages?

Before setting up Multiple Languages, please refer to these links for reference:

• Localization and translation

• Managing languages

• Shopify Translate & Adapt app

Language function is a default function in Shopify themes, not a custom built-in function. 

To use Multi Language Function, you must install an App. Shopify releases Translate & Adapt app to support you translate 2 languages automatically for free.

Here are the key features: 

• Manually add, edit, and review translations with the side-by-side editor.
• Auto-translate 2 languages with Google Translate (cloud.google.com/translate).
• Adapt content to reflect spelling and messaging variations between markets.
• Localize directly from the theme editor, or any resource page in your admin.
• Manage localized store content seamlessly from your Shopify admin.

How to set up Multiple Languages?

1. From your Shopify admin, go to Online Store -> Themes.
2. Find the theme that you want to edit, and then click Customize.
3. Click Theme settings -> Multiple Languages.

4. Click "Enable Right To Left Layout" to show Right To Left layout if your language requires RTL

Ensure that you're ready to translate

You must provide the translations when adding languages to your store. Before you add a new language, ensure that you have your translations ready, or that you have a translation app installed and have assigned the language to a market.

Add new languages to your online store

Before you begin, make sure your store meets the requirements for selling in multiple languages.

Steps:

Note:

If you need to create a new active market, then follow the steps to add a market.

• From your Shopify admin, go to Settings > Languages.
• Click Add Language.
• Choose a language from the drop-down menu, then click Add.
• Select an active market to add your language to.
• Do either of the following:
  1. Use the Translate & Adapt app to import your translated content into Shopify.
  2. Visit the Shopify App Store and install a translation app to your store. Follow the steps in the app to translate your online store's content and publish new languages.
• Click Preview to view different languages in your online store. You can preview both published and unpublished languages.

Note

Adding a language only adds translations in supported languages to supported themes and checkouts. If you want to add translations to other store content, then you need to import translations or use an app.

Publish a language to your online store

Steps:

1. From your Shopify admin, go to Settings > Languages.
2. In Unpublished languages, click Publish beside the language that you want to make available to customers in your store.
3. Click Save.

Note

If you publish a language to your store without adding translations, then you'll receive a message prompting you to add translations. Languages that are published without adding additional translations will only show the provided translations for the theme and checkout, and the default language for all other content.

Manage languages for markets

By default, each new market that you create uses your store's default language.

You need to assign newly published languages to a market before they become visible to visitors on your online store.

Add a language to a market

1. From your Shopify admin, go to Settings > Languages.
2. Click More actions beside the language that you want to add to a market.
3. Click Add to market.
4. Click Done.

Remove a language from a market

1. From your Shopify admin, go to Settings > Languages.
2. Click More actions beside the language that you want to remove from a market.
3. Click Remove.
4. Click Done.

Unpublish a language in your online store

You can also unpublish a language, which hides the language from customers. Any links to the store in that particular language result in a 404 “Page not found” error, so create redirects for any of your unpublished languages.

Steps:

1. From your Shopify admin, go to Settings > Languages.
2. In Published languages, click Unpublish beside the language that you want to make unavailable.
3. Click Unpublish.

By unpublishing a language, you also remove that language from any markets that it was added to.

Delete a language in your online store

If you're confident that you don't need translations in that language, then you can also delete the language. Deleting a language also deletes all translations of that language permanently. If a language is re-enabled in the future, then the translations need to be added again.

Steps:

1. From your Shopify admin, go to Settings > Languages.
2. In Unpublished languages, click the delete icon beside the unpublished language that you want to remove from your store.
3. Click Delete.

By deleting a language, you also remove that language from any markets that it was added to.

"Please note: This tutorial provides technical instructions and is not covered by our free support service. If you require assistance, please open a ticket for custom work requirements."

If you have your own font files, then follow these steps to include the font in your theme:

1. Go to Online Store -> Theme -> Edit code

2. Assets -> upload your custom font all font type = WOFF, WOFF2

3. Create a @font-face CSS rule so that you can reference the font. Use the asset_url filter to output the URL for the font file:

@font-face {

  font-family: "Font name";

  src: url({{ [font-file-name] | asset_url }}) format("[font-format]");

}

Example:

@font-face {

    font-family: 'Neue Haas Grotesk Display Pro';

    src : loccal('Neue Haas Grotesk Display Pro 65 Medium'),

          url('Neue Haas Grotesk Display Pro 65 Medium.eot?#iefix') format('embedded-opentype'),

          url('Neue Haas Grotesk Display Pro 65 Medium.woff') format('woff'),

          url('Neue Haas Grotesk Display Pro 65 Medium.woff2') format('woff2');

  font-weight:100;

  font-style: italic;

  }

4. Assets -> base.css -> Scroll all the way to the bottom of the file, and here’s where you’ll add your code. 

5. Use custom fonts:- You’ll want to decide what html elements or classes will use these fonts. You need to define where you want the font used.

- If the font custom hasn’t displayed, you must add extra properties “!important”.

To move the collection description to the bottom of the collection page, please follow instructions below:

• Please check which layout you are using: Editor -> Theme settings -> Multiple Layouts -> Category Page -> Category Page Layout.

• Go to Admin -> Edit Code -> Sections / main-collection.liquid -> find the corresponding template and click the arrow to go to the file to be changed. Please check the image below for more details.

• Please paste codes below at the end of the file.

- If you want to show entire collection description, please use this code:

 {% if collection.description != '' %}

      {{ collection.description }}

 - If you want to remove the image from the collection description, please use this code:

 {% if collection.description != '' %}

{% endif %}

- If you don’t want to show the content on the top of the page, please go to the Snippets/collection-header.liquid file and remove this code as shown in image below.

 

 

 

 

 

 

In this video, we will guide you on how to set up the "Portfolio Page" in Ella Shopify Theme

In this video, we will guide you on how to set up the "Password Page Page" in Ella Shopify Theme

In this video, we will guide you for how to set up "Free Shipping Threshold" in Ella - Multipurpose Shopify Theme OS 2.0

In this video, we will guide you on how to set up the "Contact Page" in Ella Shopify Theme

<

Hi Friends,

In this post, we will provide you an instruction video for how to update Ella Shopify Theme.

Ella Shopify Theme is #1 best selling theme on Envato so we always want to keep it updated regularly so if you want to update from Ella 6.0 to a higher version, this video is for you!

Note: The Logic of Updating a theme in Shopify platform:

Ella is the same as any other Shopify themes in Shopify platform. That is when a new update version released, it will be a core theme source, independent from the previous ones you are using. Thus, your changes on the previous versions will not be included in the update.

To update the theme to the latest version, you can follow our next instructions: https://halosoft.gitbook.io/ella-documentation/installation/update-theme. We will guide you how to update theme and help you save your settings, changes.

Any custom works/ customizations/ changes which are not available from theme core default will be lost and needs customization from the starting point. 

In this video, we will guide you for how set up the Variant Image Grouped function in Ella - Multipurpose Shopify Theme OS 2.0

if you are learning about open an online shop, you want to join the ecommerce platform, but you're still stuck and don't know where to start.

Every things is you should research carefully. Spend hours testing your ideas and planning.
Don't be discouraged, let Halothemes and this article suggest you step by step make and build your store.

In this video, we will guide you for how to set up Pre-Order Product Function in Ella - Multipurpose Shopify Theme OS 2.0

In this video, we will guide you for how to set up the different Product Description For Each Variant in Ella Shopify Theme

In this video, we will guide you for how to set up "Multi-Level Categories" Function in Ella - Multipurpose Shopify Theme OS 2.0

In this video, we will guide you for how set up Bundle function (Frequently Bought Together) in the Product Detailed Page

In this video, we will guide you for how to set up the Product Property By Metafields in Ella - Multipurpose Shopify Theme OS 2.0

In this video, we will guide you for how to set up Quick Edit Cart Function in Ella - Multipurpose Shopify Theme OS 2.0

In this video, we will guide you for how set up Advanced Mega Menu Layouts in Ella theme. Ella offers up to 08 different awesome Mega Menu Layouts

* If you want to change the vendor links on the product card:

Step 1: Go to Online Store->Theme->Edit code

Step 2:

- Default product card layout: Snippets -> product-card.liquid

- Other product card layouts: please find product card file corresponding layout you are using.

Step 3:

- Find this code: {{ product_card_product.vendor | link_to_vendor }}

- And change it to this code:

<a href="#"> {{ product_card_product.vendor }}</a>

- Replace # with your collection link you want.

* Note: If you change, all products will have the same vendor link.

========================================================================================

 * If you want to change the vendor links on the product detail page:

Step 1: Go to Online Store->Theme->Edit code

Step 2:

- Snippets -> product-info.liquid -> find this code: {{ product.vendor | link_to_vendor }}

Step 3:

- Change vendor code to: <a href="#">{{ product.vendor }}</a>

- Replace # with your collection link you want.

* Note: If you change, all products will have the same vendor link.

In this video, we will guide you for how set up Sub-Categories block on the Category Page

In this video, we will guide you for how to set up "Dynamic Browser Tab" in Ella - Multipurpose Shopify Theme OS 2.0

In this video, we will guide you on how to set up the Footer Groups for 26 Layouts of Ella Shopify Theme

In this video, we will guide you on how to set up the "FAQs Page" in Ella Shopify Theme

In this video, we will guide you for how to set up the different Product Description For Each Variant in Ella Shopify Theme

In this video, we will guide you on how to fix the "Customer_service_text" error in Ella Shopify Theme

In this video, we will guide you for how to set up "About Us Page" in Ella Shopify Theme

In this video, we will guide you on how to set up the "Ask an expert" function in Ella Shopify Theme

In this video, we will guide you for how to set up "Search" function in Ella Shopify Theme

In this video, we will guide you for how to set up Quick Shop Function in Ella - Multipurpose Shopify Theme OS 2.0

In this video, we will guide you for how set up Product Combo Function in the Product Detailed Page

In this video, we will guide you for how update theme from an old version to a new version (from Ella version 6.0.0 to the higher versions)

In this video, we will guide you for how to set up "Exit Intent Popup" or "Before You Leave popup" in Ella - Multipurpose Shopify Theme OS 2.0

This video we talk about one of the updates from Shopify recently which relates to Theme. It is "Adding custom CSS to your theme"

In this video, we will guide you for how install theme and apply the homepage layout you want for your store.

In this video, we will guide you on how to set up the "Product Badges/ Labels" in Ella Shopify Theme

In this video, we will guide you for how to set up Complementary Products on the Product Detailed Page in Ella - Multipurpose Shopify Theme OS 2.0

In this video, we will guide you for how to set up "Multiple Languages" function in Ella Shopify Theme with Shopify Translate & Adapt (Free app)?

<

In this video, we will guide you for how to set up Sticky Navigation Toolbar in Ella - Multipurpose Shopify Theme OS 2.0

In this video, we will guide you for how to set up Local Pickup Function in Ella - Multipurpose Shopify Theme OS 2.0

In this video, we will guide you for how to set up "404 Page" in Ella Shopify Theme

In this video, we will guide you for how to set up "menu items" for Header Navigation and Footer in Ella - Multipurpose Shopify Theme OS 2.0

In this video, we will guide you for how to set up "Notify Me Out Of Stock" in Ella - Multipurpose Shopify Theme OS 2.0

In this video, we will guide you for how to set up "Add to cart" Actions in Ella - Multipurpose Shopify Theme OS 2.0

In this video, we will guide you for how update theme from an old version to a new version (from Ella version 6.0.0)

In this video, we will guide you on how to set up the Header Groups for 26 Layouts of Ella Shopify Theme

To show images for Brand Tab section, please follow our instruction below:

Step 1:

- Prepare image of the collection items for each tab. Name it with the same name as the collection (please use PNG image).

- Rules:

  + Lower cap.

  + And use a hyphen "-" to replace white space if your collection name has the white space.

  + And use a "-" to replace “&” if your collection name has the “&” special characters.

- For example:

  + With the collection name "Ella Brand", the image name will be ella-brand.png

  + With the collection name "Coats & Jackets",  the image name will be coats-jackets.png

Step 2:

You need go to Content --> Files, upload images here.

In this video, we will guide you for how to set up "Customization Product Option" in Ella - Multipurpose Shopify Theme OS 2.0

The best menu layouts which are optimized well for Mobile, prevents your customers from feeling overwhelmed by a multitude of menu items from the traditional way.

In this video, we will guide you for how to set up Mobile Menu in Ella - Multipurpose Shopify Theme OS 2.0