We regret to announce that the Wishlist Compare Plus app will be terminated from August 15, 2024 (GMT+7) due to it is no longer compatible with Shopify's updates.
To ensure a smooth transition, we recommend switching to our new app - SWishlist: Simple Wishlist app, which we believe is a more efficient solution for your needs. Please note that SWishlist: Simple Wishlist app includes only the wishlist function and does not have the compare function.
Below is the detailed information regarding the updating of the wishlist app on Electro:
- Version 11.0: We have added the code to the theme, you just need to follow the instruction in Theme settings > App Intergrations > Wishlist
- Version 10.0 (version X): Please follow the instruction to update the code. (Link)
- Older versions: Please contact us to get assistance.
If you are using Electro version 10.0 theme, when transitioning from Wishlist Compare Plus app to SWishlist: Simple Wishlist app you will need to edit your theme code to set up the app efficiently. Please follow the instruction below to update your theme code and intergrate the new app:
First of all, please install our new app SWishlist: Simple Wishlist. To prepare for editing your theme, we recommend that you should duplicate your theme to create a backup copy. This make it easy to discard your changes and start again if you need to. After you set up the theme code, you can push this theme live.
Disable compare function
Before you get started, you need to disable compare function because SWishlist: Simple Wishlist app does not have the compare function.
Steps:
1. From your Shopify admin, go to Online Store > Themes.
2. Next to the live theme, click Customize to access the Theme editor.
3. Open Theme settings section, tap App Intergrations
4. Uncheck Enable Compare and Save the change.
Edit your theme code
After you have disabled compare function, you will need to edit the code for your theme.
From your Shopify admin, go to Online Store >Theme > Find the theme you have just duplicated, click the ... button and then click Edit code
Once you are done each step, please remember to hit Save in the top right of the page to save your change.
Steps:
1. Look for the file named "theme.liquid" or type a keyword into the File filters... field to find the file. Once you find it, click on it.
In "theme.liquid" file, you need to find below code and remove it.
{% include 'arn_wl_cp_settings' %}
{% include 'arn_wl_cp_styles' %}
{% include 'arn_icons_define' %}
{% if shop.metafields.arena.wl_cp_settings.general_settings.app_script == false %}
<script defer crossorigin="anonymous" src="{{ 'arn-wishlist-compare.js' | asset_url }}"></script>
{% endif %}
{% if shop.metafields.arena.wl_cp_settings.value.general_settings.app_script == false %}
<script defer crossorigin="anonymous" src="{{ 'arn-wishlist-compare.js' | asset_url }}"></script>
{% endif %} 
2. Find the file named "header-snippet.liquid" and click on it.
In this file, press Ctrl+F on Windows, or Command+F on Mac to search the below code:
{%- render 'arn_wl_cp_buttons', type: 'wl_show_btn', product_handle: product.handle -%}
and replace all lines of that code with the new code:
<button class="st-wishlist-details-button" data-type="manually"> </button>
3. Find the file named "arn_wl_cp_custom_buttons.liquid" and click on it.
Remove the whole code in this file, then replace with the below code and save your code changes.
{% case type %}
{% when 'wl_add_btn' %}
<button class="st-wishlist-button" data-handle="{{ product_handle }}"></button>
{% when 'wl_add_btn_detail' %}
<button class="st-wishlist-button" data-type="details" data-handle="{{ product_handle }}"></button>
{% endcase %}
4. Find the file named "product-info.liquid" and click on it.
In this file, search the below code:
{%- render 'arn_wl_cp_custom_buttons', type: 'wl_add_btn', product_handle: product.handle -%}
and replace with the new code:
{%- render 'arn_wl_cp_custom_buttons', type: 'wl_add_btn_detail', product_handle: product.handle -%}
5. Find the file named "product-extended-info.liquid" and click on it.
In this file, search the below code:
{%- render 'arn_wl_cp_custom_buttons', type: 'wl_add_btn', product_handle: product.handle -%}
and replace with the new code:
{%- render 'arn_wl_cp_custom_buttons', type: 'wl_add_btn_detail', product_handle: product.handle -%}
6. Find the file named "themes.css" and click on it.
Scroll down to the last line of the file and insert the below code.
body .header .wishlist-target .st-wishlist-details-button {
padding: 0;
display: flex;
position: relative;
color: var(--header-mobile-text-color)
}
@media (min-width: 992px) {
body .header .wishlist-target .st-wishlist-details-button {
color:var(--text-header-color);
}
}
body .header .wishlist-target .st-wishlist-details-button svg {
width: 26px;
height: 26px;
color: inherit !important;
}
body .header .wishlist-target .st-wishlist-details-button .st-number {
position: absolute;
top: auto;
right: -9px;
bottom: -10px;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
transform: translate(0);
align-items: center;
justify-content: center;
background: var(--bg-color-mobile-number-icon);
color: var(--color-mobile-number-icon);
font-size: 12px;
font-weight: var(--font-bold);
}
@media (min-width: 992px) {
body .header .wishlist-target .st-wishlist-details-button .st-number {
background:var(--bg-number-icon);
color: var(--text-number-icon);
}
}
body .product-card .product-buttons .product-wishlist {
max-width: 50%;
padding: 0 4px;
display: flex;
align-items: center;
overflow: hidden;
font-size: calc(var(--body-font-size) - 1px);
font-weight: var(--font-body-weight);
cursor: pointer;
}
body .product-card .product-buttons .st-wishlist-button {
padding: 0;
}
body .product-card .product-buttons .product-card_quick-view svg {
width: 24px;
height: 24px;
margin: 0 5px;
}
body .product-card .product-buttons .product-wishlist svg {
margin: 0 5px;
}
@media (min-width: 1025px) {
body .product-card .product-buttons .st-wishlist-button:hover {
color: var(--body-link-hover);
}
body .product-card .product-buttons .st-wishlist-button:hover svg {
color: currentColor;
}
}
body .product-info .product-wishlist-compare>button {
padding: 0;
}
body .product-card .product-buttons .product-card_quick-view span,
body .product-card .product-buttons .product-wishlist span {
display: none;
}
@media (min-width: 1025px) {
body .product-info .product-wishlist-compare>button:hover {
color: var(--body-link-hover) !important;
}
}
body .product-info .product-wishlist-compare>button.st-is-added {
color: var(--body-link-hover) !important;
}
body .product-info .st-wishlist-button .label:not(:empty) {
margin: 0;
margin-inline-start: 5px;
}
We hope that these detailed instruction will help you successfully set up SWishlist: Simple Wishlist app on Electro 10.0.
If you have any questions or require further assistance, please do not hesitate to contact our support team by emailing: support@arenathemes.com
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article