Change Style "Next Page" Button in "Buy Button" (Embed collection in website)

[eldorado_amrum]

Hi,

i embedded my collection through the "Buy Button" Option in Shopify. The "Next Page" Button is standardized the same style as all the other buttons. Therefore it´s difficult to see, especially on mobile. I added some code to change the language to german. But all my tries to change the color and style failed. here is the code i added.

"productSet": {
"text": { "nextPageButton": "NÄCHSTE SEITE",
"styles": {
"products": {
"@media (min-width: 901px)": {
"margin-left": "-20px"

Could you help me to change at least the color to #207178

Thanks a lot.

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

[eldorado_amrum]

Hi,

the url is

https://eldorado-amrum.de/shop

Best regards,

Jonas

[PageFly-Noah]

Hi @eldorado_amrum  Please add code here to chang background button:

<style>
.shopify-buy__collection-pagination-button{
  background-color: red !important; //color background your want;
  color: white !important; //color text your want;
}
</style>

[eldorado_amrum]

Hi, thanks a lot. I don´t know where to add the code exactly. 🙂 Here is the complete code:

<div id='collection-component-1712776840826'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }
  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src=scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }
  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'b828f4-ba.myshopify.com',
      storefrontAccessToken: '1bd7554d60b3b5dfb4110fdbad001309',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('collection', {
        id: '633274728788',
        node: document.getElementById('collection-component-1712776840826'),
        moneyFormat: '%E2%82%AC%7B%7Bamount_with_comma_separator%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px",
          "width": "calc(25% - 20px)"
        },
        "img": {
          "height": "calc(100% - 15px)",
          "position": "absolute",
          "left": "0",
          "right": "0",
          "top": "0"
        },
        "imgWrapper": {
          "padding-top": "calc(75% + 15px)",
          "position": "relative",
          "height": "0"
        }
      },
      "title": {
        "font-family": "Lato, sans-serif"
      },
      "button": {
        "font-family": "Lato, sans-serif",
        "font-weight": "bold",
        ":hover": {
          "background-color": "#cda300"
        },
        "background-color": "#e4b500",
        ":focus": {
          "background-color": "#cda300"
        },
        "padding-left": "44px",
        "padding-right": "44px"
      },
      "price": {
        "font-size": "16px"
      },
      "compareAt": {
        "font-size": "13.6px"
      },
      "unitPrice": {
        "font-size": "13.6px"
      }
    },
    "buttonDestination": "modal",
    "contents": {
      "options": false
    },
    "text": {
      "button": "DETAILS / FARBEN"
    },
    "googleFonts": [
      "Lato"
    ]
     
  },
   "productSet": {
    "text": { "nextPageButton": "NÄCHSTE SEITE",
      "styles": {
       "products": {
          "@media (min-width: 901px)": {
           "margin-left": "-20px"              
          }
        }
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "button": false,
      "buttonWithQuantity": true
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "font-family": "Lato, sans-serif",
        "font-weight": "bold",
        ":hover": {
          "background-color": "#cda300"
        },
        "background-color": "#e4b500",
        ":focus": {
          "background-color": "#cda300"
        },
        "padding-left": "44px",
        "padding-right": "44px"
      },
      "title": {
        "font-family": "Lato, sans-serif",
        "font-weight": "bold",
        "font-size": "26px",
        "color": "#4c4c4c"
      },
      "price": {
        "font-family": "Lato, sans-serif",
        "font-weight": "normal",
        "font-size": "18px",
        "color": "#4c4c4c"
      },
      "compareAt": {
        "font-family": "Lato, sans-serif",
        "font-weight": "normal",
        "font-size": "15.299999999999999px",
        "color": "#4c4c4c"
      },
      "unitPrice": {
        "font-family": "Lato, sans-serif",
        "font-weight": "normal",
        "font-size": "15.299999999999999px",
        "color": "#4c4c4c"
      },
      "description": {
        "font-family": "Lato, sans-serif"
      }
    },
    "googleFonts": [
      "Lato"
    ],
    "text": {
      "button": "IN DEN WARENKORB"
    }
  },
  "option": {
    "styles": {
      "label": {
        "font-family": "Lato, sans-serif"
      },
      "select": {
        "font-family": "Lato, sans-serif"
      }
    },
    "googleFonts": [
      "Lato"
    ]
  },
  "cart": {
    "styles": {
      "button": {
        "font-family": "Lato, sans-serif",
        "font-weight": "bold",
        ":hover": {
          "background-color": "#cda300"
        },
        "background-color": "#e4b500",
        ":focus": {
          "background-color": "#cda300"
        }
      }
    },
    "text": {
      "title": "Warenkorb",
      "total": "Gesamt",
      "empty": "Dein Warenkorb ist Leer",
      "notice": "Versand und Rabatt werden im nächsten Schritt berechnet.",
      "button": "ZUR KASSE"
    },
    "googleFonts": [
      "Lato"
    ]
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-family": "Lato, sans-serif",
        "font-weight": "bold",
        "background-color": "#e4b500",
        ":hover": {
          "background-color": "#cda300"
        },
        ":focus": {
          "background-color": "#cda300"
        }
      }
    },
    "googleFonts": [
      "Lato"
    ]
  }
},
      });
    });
  }
})();
/*]]>*/
</script>

[PageFly-Noah]

Iam sorry about that. You can add code in file theme.liquid and above tag </head>