Hi, I need help adding a custom code.
We have recently updated our theme version and the old custom code looks different if I added it to the backend.
This is the old version
There is a custom code on the “product-grid-item.liquid”
{%- assign variant_has = false -%}
{%- for variant in product.variants -%}
{%- unless variant.title contains 'Default Title' -%}
{%- if variant.available -%}
{%- assign variant_has = true -%}
{%- endif -%}
{%- endunless -%}
{%- endfor -%}
{%- comment -%}
{%- if settings.quick_shop_enable -%}
<div class="quick-product__btn quick-product__btn--not-ready js-modal-open-quick-modal-{{ product.id }} small--hide">
<span class="quick-product__label">{{ settings.quick_shop_text }}</span>
</div>
{%- endif -%}
{%- endcomment -%}
{%- if product.available -%}
{%- render 'webcast-add-cart', product: product, variant_has: variant_has -%}
{%- endif -%}
And there is an added liquid “webcast-add-cart” under snippets
{%- liquid
assign current_variant = product.selected_or_first_available_variant
assign default_text = 'products.product.add_to_cart' | t
assign button_text = 'products.product.add_to_cart' | t
unless current_variant.available
assign button_text = 'products.product.sold_out' | t
endunless
-%}
<div class="quick-product__btn webcast-variant-box">
{%- if variant_has == true -%}
<div class="webcast-quick-variant-wrapper">
{%- for variant in product.variants -%}
{%- if variant.available -%}
<div class="webcast-variant {% if variant == product.selected_or_first_available_variant %}selected{% endif %}" data-variant-id="{{ variant.id }}">{{ variant.title }}</div>
{%- else -%}
<div class="webcast-variant crossed" disabled="disabled">{{ variant.title }}</div>
{%- endif -%}
{%- endfor -%}
</div>
{%- endif -%}
<span class="quick-product__label webcast-atc" data-variant-id="{{current_variant.id}}">{{ button_text }}</span>
</div>
When I copied and added those codes on the new version of the theme, it looks like this
Please help. Our website is billycartkids.com.au
Hi, @VA-Laurice
You also need to transfer the style code from the old version to the new version.
Yes, I have added this under assets - “custom.css”
.quick-product__btn.webcast-variant-box {
background-color: transparent;
}
.webcast-quick-variant-wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.webcast-variant {
border: 1px solid #effbff;
padding: 5px;
border-radius: 5px;
margin-right: 10px;
color: #02a4e1;
background-color: #effbff;
word-spacing: 100vw;
}
.webcast-variant.selected {
border: 1px solid #02a4e1;
color: #effbff;
background-color: #02a4e1;
}
.webcast-variant.crossed {
opacity: 0.4;
cursor: not-allowed;
text-decoration: line-through;
}
.webcast-variant-box span.quick-product__label {
margin-top: 10px;
display: inline-block;
background-color: var(--colorBtnPrimary);
width: 100%;
padding: 10px;
}
@media only screen and (max-width: 768px) {
.quick-product__btn.webcast-variant-box {
display: block !important;
}
.webcast-quick-variant-wrapper {
overflow: scroll;
}
}
.page-width > .free_shipping_card_wrapper_clem6ehat458401otpuv3jadye {
display:none!important;
}
.page-width {
margin-top:10px!important;
}
.free_shipping_card_product_cta_clem6ehat458401otpuv3jadye {
color:#fff!important;
}
Can you share the store link after adding the code?
Hi, you can check it on the live page now. I have added the custom code. Also when it is clicked, it’s not working
But unfortunately, I couldn’t find it in the live page.
Still not displayed. Please confirm that you have added it to the online store.
Yes, it is currently live and is showing on my end
I’m not sure why it’s not showing on your end. But it is showing even in my incognito browser. And when I hover over the products on the home page - it is also showing
Just a note that you need to hover over the product for it to show as it is not always visible
Hi @VA-Laurice ,
When checking with screenshot it seems to be missing CSS code when you move.
Please send me preview link, I will check it for you
Hi there, can you check if you can access this: https://lwguawk7u5lye37n-37813911684.shopifypreview.com
And let me know if I’m missing something
This should be how it looks: https://ne6o5zz9paxx3scj-37813911684.shopifypreview.com
namphan
September 3, 2024, 2:02pm
14
Hi @VA-Laurice ,
Please go to custom.css file and move code here:
Hope it helps!
What’s the difference?
I have a custom css already on the backend:
.quick-product__btn.webcast-variant-box {#effbff ;#02a4e1 ;#effbff ;#02a4e1 ;#effbff ;#02a4e1 ;@media only screen and (max-width: 768px) {
.page-width > .free_shipping_card_wrapper_clem6ehat458401otpuv3jadye {
.page-width {
.free_shipping_card_product_cta_clem6ehat458401otpuv3jadye {#fff !important;
namphan
September 3, 2024, 2:45pm
16
Hi @VA-Laurice ,
You need to declare it again in theme.liquid file, it will display well.
Great! It’s shows how it supposed to! https://lwguawk7u5lye37n-37813911684.shopifypreview.com
However, it seems that it’s not doing the action which is adding the product to cart?
namphan
September 3, 2024, 3:07pm
18
Hi @VA-Laurice ,
You will need to add declaration for custom.js at theme.liquid file, it will work
namphan
September 3, 2024, 3:18pm
20
Hi @VA-Laurice ,
Can I send you a collaborator invitation? It will help me check and give you detailed instructions.
