Solved

Customise Recharge Widget

zando09
Excursionist
14 0 9

Hello,

I want to make the Recharge widget consistent with the look and feel of our e-commerce (eg. change the Background color). An apparently simple task is becoming really frustrating since CSS and JavaScript don't seem to work. The Recharge documentation is quite outdated and does not apply anymore for this case. I think this customization issue is due to HTML data- attribute found in the widget HTML. Does anyone of you know how to manipulate correctly this case?

Link to the store (product where we are testing Recharge) -> https://www.gogofresh.it/products/essenziale-di-gogofresh

 

Thanks!!

Accepted Solution (1)
Niklas_g
Shopify Partner
31 8 20

This is an accepted solution.

Hey Zando, I tested 

[data-v-ddaa0f43] {
background:blue!important;
}

and it works fine for me. Mabey try to add this code to the bottom of your base.css. (without the <style>-tags)

 


Did you fix the error in line 13690? Mabey that will change a lot. 

 

If that dont works, feel free to send another preview link and ill have a look at it again.

View solution in original post

Replies 8 (8)

Niklas_g
Shopify Partner
31 8 20

Hey Zando, 

 

you can make some basic changes in recharge when you go in the menu Storefront/Subscription Widget.

If you need further customization you can add CSS. You Css does not work, because you forgot a closing clamp in line 13690.

label, .cart-items__heading, .product-section legend {font-size: 100%!important;
}

 

i hope that helps 🙂

zando09
Excursionist
14 0 9

Thanks! Despite the adjustment on a copy of the theme I still cannot access some elements of the widget. By running this simple code on the console, after the page is loaded, I can see the background color changing, but when I place it in the theme.liquid file nothing happens. What am I doing wrong?

 

var element = document.querySelector('.rc-radio--active[data-v-ddaa0f43]');
element.style.backgroundColor = 'blue';

 

Niklas_g
Shopify Partner
31 8 20

I would not recommend to style the components with JS. 

 

Mabey the code gets excuted before the DOM is ready. You can try this:

document.addEventListener("DOMContentLoaded", function() {
//add your code here
});

 you should be able to select the element with css like this 

[data-v-60777bd8] {
background:blue;
}
zando09
Excursionist
14 0 9

Bad luck also this time. I added this code before closing body tag.

<script>

document.addEventListener("DOMContentLoaded", function() {
[data-v-ddaa0f43] {
background:blue;
}
});

</script>

 The widget still loads with the default color. See this preview link of the theme I am working ->  https://www.gogofresh.it/products/essenziale-di-gogofresh?_pos=1&_psq=+l%27esse&_ss=e&_v=1.0&selling...

 

What could be a possible cause for this to happen?

Niklas_g
Shopify Partner
31 8 20

Sorry thats not what i meant. 

 

The solution for js should look like this: 

<script>document.addEventListener("DOMContentLoaded", function() {
var element = document.querySelector('.rc-radio--active[data-v-ddaa0f43]');
element.style.backgroundColor = 'blue';
});
</script>

but you can also use css (i would recommend that solution)

<style>
[data-v-ddaa0f43] {
background:blue;
}
</style>

 

zando09
Excursionist
14 0 9

I tried both but unfortunately still no effects. What could be the cause?

It seems that they get overwritten...

Niklas_g
Shopify Partner
31 8 20

This is an accepted solution.

Hey Zando, I tested 

[data-v-ddaa0f43] {
background:blue!important;
}

and it works fine for me. Mabey try to add this code to the bottom of your base.css. (without the <style>-tags)

 


Did you fix the error in line 13690? Mabey that will change a lot. 

 

If that dont works, feel free to send another preview link and ill have a look at it again.

zando09
Excursionist
14 0 9

It worked! Such an easy solution! Probably there was still an error in line 13690, I commented it and everything worked directly with CSS!

Thank youuuuu!!!!!