How to Customize Magento 2 Social Login Buttons Design on Specific Forms

The Magneto 2 Social Login Pro extension provides the ability to select a default design for social login buttons. However, it changes the design on all forms at once. This article describes how to change the design of social login buttons for a specific form only, without changing the default setting for other forms.

Setting Custom Design for Social Login Buttons on a Specific Form

The Social Login Pro extension provides a custom_design parameter in the \Plumrocket\SocialLoginPro\Block\Buttons block in version 4.0.4 and later. We recommend changing it using layout:

<referenceBlock name="social_buttons_block_name">
        <arguments>
                <argument name="custom_design" xsi:type="string">square</argument>
        </arguments>
</referenceBlock>

The custom_design argument takes one of the following values: default, square, round.

Example: Changing Social Login Buttons Design On the Login Page

To customize the buttons on the login page, you will need to customize the customer_account_login.xml layout. Please use the official guide on how to customize layouts and do the following customizations on the layout xml:

<referenceBlock name="pslogin.customer.form.login.buttons">
        <arguments>
                <argument name="custom_design" xsi:type="string">square</argument>
        </arguments>
</referenceBlock>