How can I effectively customize the Recharge widget for my e-commerce site?

[zando09]

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!!

[Niklas_g]

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]

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]

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]

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]

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]

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

It seems that they get overwritten...

[Niklas_g · 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]

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!!!!!

[Hey_Jak]

Customize Recharge subscription widget on Shopify