We regret to announce that the Wishlist Compare Plus app will be terminated on August 15, 2024 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.
Here is the detailed information regarding the updating of the wishlist app on Zeexo theme:
- Version 3.1: We have added the code to the theme, you just need to follow the instruction in Theme settings > App Intergrations > Wishlist
- Version 3.0: Please follow the instruction below to update the code.
- Older versions: Please contact us to get assistance. (support@arenathemes.com)
If you are using Zeexo version 3.0 theme and Wishlist Compare Plus app, 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 customizing 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
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 changes.
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.
{%- if settings.enable_product_wishlist or settings.enable_product_compare -%}
{% 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 %}
{% endif %}
2. Find the file named "topbar.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 with the new code:
<button class="st-wishlist-details-button" data-type="manually"> </button>
3. Find the file named "header-snippet.liquid " and click on it.
In this file, search the code:
{%- render 'arn_wl_cp_buttons', type: 'wl_show_btn', product_handle: product.handle -%}
and replace all with the new code:
<button class="st-wishlist-details-button" data-type="manually"> </button>
4. Find the file named "lookbook-product-item.liquid" and click on it.
In this file, search the code:
{%- render 'arn_wl_cp_buttons', type: 'wl_add_btn', product_handle: product.handle -%}
and replace with the new code:
<button class="st-wishlist-button" data-handle="{{ product.handle }}"></button>
5. Find the file named "product-item.liquid" and click on it.
In this file, search the code:
{%- render 'arn_wl_cp_custom_buttons', type: 'wl_add_btn', product_handle: product.handle -%}
and replace with the new code:
<button class="st-wishlist-button" data-handle="{{ product.handle }}"></button>
Next, search the code:
{%- render 'arn_wl_cp_buttons', type: 'wl_add_btn', product_handle: product.handle -%}
and replace with the new code:
<button class="st-wishlist-button" data-handle="{{ product.handle }}"></button>
6. Find the file named "special-product-item.liquid" and click on it.
In this file, search the code:
{%- render 'arn_wl_cp_buttons', type: 'wl_add_btn', product_handle: product.handle -%}
and replace with the new code:
<button class="st-wishlist-button" data-handle="{{ product.handle }}"></button>
7. Find the file named "product-info.liquid" and click on it.
In this file, search the code:
{%- render 'arn_wl_cp_custom_buttons', type: 'wl_add_btn', product_handle: product.handle -%}
and replace all with the new code:
<button class="st-wishlist-button" data-type="details" data-handle="{{ product.handle }}"></button>
8. Find the file named "theme.css" and click on it.
Scroll down to the last line of the file and insert the below code.
.header .wishlist-target >button {
padding: 0;
display: flex;
}
@media (min-width: 992px) {
.header .wishlist-target>button .st-number {
background: var(--bg-number-icon);
color: var(--text-number-icon);
}
}
.header .wishlist-target>button .st-number {
position: absolute;
top: -12px;
right: -12px;
width: 20px;
height: 20px;
transform: translate(0);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 11px;
background: var(--bg-color-mobile-number-icon);
color: var(--color-mobile-number-icon);
}
@media (min-width: 1025px) {
.header .wishlist-target >button:hover .st-number {
animation-name: hvr-icon-bob-float, hvr-icon-bob;
animation-duration: .3s, .75s;
animation-delay: 0s, .3s;
animation-timing-function: ease-out, ease-in-out;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards;
animation-direction: normal, alternate;
}
}
.product-buttons .product-wishlist>button {
text-decoration: none;
padding: 0;
width: 36px;
height: 36px;
background: var(--body-bg-color);
color: var(--body-link);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.product-buttons .product-wishlist>button svg {
width: 16px;
height: 16px;
}
@media (min-width: 1025px) {
.grid-2-v2 .product-card .list-view-content .product-wishlist>button:hover {
color: var(--body-link-hover);
}
}
.grid-2-v2 .product-card .list-view-content .product-wishlist>button {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--body-bg-color);
color: var(--body-link);
padding: 0;
}
.grid-2-v2 .product-card .list-view-content .product-wishlist>button svg {
width: 15px;
height: 15px;
}
.grid-1 .product-card .product-wishlist>button {
display: flex;
align-items: center;
padding: 0;
}
@media (min-width: 768px) {
.grid-1-v2 .product-card .product-wishlist>button {
justify-content: center;
}
}
.grid-1-v2 .product-card .product-wishlist>button {
padding: 0;
display: flex;
align-items: center;
text-decoration: underline;
text-transform: uppercase;
font-weight: var(--font-weight);
font-size: calc(var(--body-font-size) - 3px);
}
.product-info .product-wishlist-compare>button {
font-size: calc(var(--body-font-size) - 3px);
font-weight: var(--font-weight);
text-transform: uppercase;
text-decoration: underline;
display: flex;
align-items: center;
}
.product-info .product-wishlist-compare>button>span {
margin: 0 !important;
-webkit-margin-start: 12px !important;
margin-inline-start: 12px !important;
}
.skin-market .grid-2-v2 .product-card .list-view-content .product-wishlist>button,
.skin-market .product-buttons .product-wishlist>button,
.skin-jewelry .grid-2-v2 .product-card .list-view-content .product-wishlist>button,
.skin-jewelry .product-buttons .product-wishlist>button,
.skin-glasses .grid-2-v2 .product-card .list-view-content .product-wishlist>button,
.skin-glasses .product-buttons .product-wishlist>button,
.skin-furniture .grid-2-v2 .product-card .list-view-content .product-wishlist>button,
.skin-furniture .product-buttons .product-wishlist>button,
.skin-market-light .grid-2-v2 .product-card .list-view-content .product-wishlist>button,
.skin-market-light .product-buttons .product-wishlist>button,
.skin-market-gray .grid-2-v2 .product-card .list-view-content .product-wishlist>button,
.skin-market-gray .product-buttons .product-wishlist>button,
.skin-tools-orange .grid-2-v2 .product-card .list-view-content .product-wishlist>button,
.skin-tools-orange .product-buttons .product-wishlist>button,
.skin-cosmetics .grid-2-v2 .product-card .list-view-content .product-wishlist>button,
.skin-cosmetics .product-buttons .product-wishlist>button,
.skin-carparts .grid-2-v2 .product-card .list-view-content .product-wishlist>button,
.skin-carparts .product-buttons .product-wishlist>button,
.skin-medical .grid-2-v2 .product-card .list-view-content .product-wishlist>button,
.skin-medical .product-buttons .product-wishlist>button {
border: 1px solid var(--body-border-color);
}
.st-product-card .st-atc-button, .st-product-card .st-more-details {
background: var(--btn1-bg-cl) !important;
color: var(--btn1-cl) !important;
}
We hope that these detailed instruction will help you successfully set up SWishlist: Simple Wishlist app.
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