3.1.1. Integrating with Shopify 2.0 Themes 🆕

Integrating the YouPay components in your 2.0 theme.

Don't Forget to add your Gift Card Template before you go Live with YouPay! Follow the guide here: Adjusting your Gift Card email Template

Before you can add your buttons, login to your Shopify Admin Portal, and head to ’Online Store' > ‘Themes’. Find the theme you want to edit, then click ‘Customize’.

1. Add the YouPay 'Share' button to your theme via the customizer tool in the 'Default Product' page.

Navigate through the above dropdown to the 'Default Product' page to add the YouPay 'Share button'.

Click the ' + Add block' button located underneath the 'Product information' dropdown heading -> add 'Share Button' and drag the button into a comfortable position (typically placed under the 'Buy Button') -> click 'Save'.

 

2. Add the YouPay 'Callout and pop-up' button to your theme via the customizer tool in the 'Default Product' page.

Stay within the 'Default Product' page -> Click the ' + Add block' button located underneath the 'Product information' dropdown heading -> add the YouPay 'Callout and Pop-Up' button and drag the button into a comfortable position (typically this is placed under 'Price') -> click 'Save'.

Screen Shot 2022-06-09 at 11.56.38 am

 

3. Add the YouPay 'Share' button to your theme via the customizer tool for your 'Cart' page.

Navigate through the above dropdown to the 'Cart' page and repeat the process for adding the 'Share Button' from Step 1.

Click the ' + Add block' button located underneath the 'Subtotal' dropdown heading -> add 'Share Button' and drag the button under the 'Checkout button' -> click 'Save.

 

Clicking on the YouPay 'Share button', you'll also notice that you can adjust and customise the YouPay button to reflect our brand or yours with the design options on the right.

 

4. Adding the YouPay button for your Flyout Cart (Only required IF you have a Flyout Cart on your Store).

Refer to the 'App embeds' integration method within the Shopify Vintage Integration support article here and navigate to Online Store -> Themes -> Customize (on relevant theme) -> Theme settings -> App embeds -> 'enable button' under 'Flyout/minicart/drawer cart settings'.

If you're still missing a few YouPay buttons throughout your store, you can navigate to our Integrating Shopify Vintage support article and add the missing buttons using the 'App Embed' method. 

Once all your YouPay buttons are integrated, you can continue on to adjust the Gift card activation section to ensure your customers receive appropriate updates and receipts on their YouPay orders before going live!

Still need help?

Contact us to integrate YouPay into your 2.0 theme at support@youpay.co.