I am having trouble while creating a module that add a text between swatch configure and swatch attribute name load by default, I want to add it only on a specific swatch if I have more than one. And what if it an input. How Can I do that?
For exmaple: we have [attribute name] [attribute configure]
I want to add a text between them
[attribute name] [text] [attribute configure] How can I do this, thanks
enter image description here

  • Do you want to load it by default OR on On click swatches? And also please add screen here what exactly you expect?
    – Ravi Soni
    Jul 2, 2019 at 6:38
  • I want to load it by default, but really do not know how to do it
    – sekiro
    Jul 2, 2019 at 6:39
  • Can you please add screenshot what do you want OR on which page?
    – Ravi Soni
    Jul 2, 2019 at 6:55
  • @RaviSoni I just add it, thanks
    – sekiro
    Jul 2, 2019 at 7:02

1 Answer 1


You can add below code in swatch-renderer.js

Override this file in your custom theme and add custom code in below funciton.


_init: function () {
    if (_.isEmpty(this.options.jsonConfig.images)) {
        this.options.useAjax = true;
        // creates debounced variant of _LoadProductMedia()
        // to use it in events handlers instead of _LoadProductMedia()
        this._debouncedLoadProductMedia = _.debounce(this._LoadProductMedia.bind(this), 500);

    if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '') {
        // store unsorted attributes
        this.options.jsonConfig.mappedAttributes = _.clone(this.options.jsonConfig.attributes);
    } else {
        console.log('SwatchRenderer: No input data received');
    this.options.tierPriceTemplate = $(this.options.tierPriceTemplateSelector).html();
    if ($(".swatch-attribute.color")[0]){
        $('.swatch-attribute.color').after('<span>Some text</span>');

Here 'Some text'

Now color is your specific swatch code. "You can add your attribute code here"

Please check this.

  • and what if in a product there are many swatches how can I choose a specific swatch attribute and add some text to it. I can understand your code however, it work with every swatch attribute, but not with an individual swatch attribute
    – sekiro
    Jul 2, 2019 at 8:00
  • Check now I have updated my code
    – Ravi Soni
    Jul 2, 2019 at 8:25
  • Oh thanks, I want to ask what is number 0 mean in this line if ($(".swatch-attribute.color")[0])
    – sekiro
    Jul 2, 2019 at 8:28
  • I add your code to my module however, it not display next to swatches attribute name it display under them
    – sekiro
    Jul 2, 2019 at 8:45
  • Oh. here I come to solution with your code. $('.swatch-attribute.color > .swatch-attribute-label').after('<span>Some text</span>') it will place next to swatches attribute name. Thanks for your help
    – sekiro
    Jul 2, 2019 at 8:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.