Customise the Donation Product Page (OS 2.0)

Introduction

In this tutorial, we'll see how you can set a specific product template for your donation product that will hide the variant details, the Add to Cart and the Buy it now buttons from your donation product to give it a cleaner look. In OS 2.0 themes, you'll be using the App Block to display your donation options to your customers so these items are redundant in your theme.

Ready? Let's Go!

The details we are going to get rid of

What we are going to remove

Step 1:

From your Shopify Admin > Online Store > Themes select the Theme you wish to edit and select Customize.

Step 2:

From the dropdown box at the top centre of the screen, select Products and Create Template. Enter a name for the new template, and select the template on it to be based. The name can be anything you like but take note of what it is for later. Press Create Template.

Step 3:

You'll be shown a new product template page, but it may not be your donation product. On the top left, select Change. Now choose the donation product that you'll be working with. I'm working with my product called Donation.

Step 4:

Now we can edit the Product Information section on the left. I'm going to remove the Price, Variant picker, Quantity Selector and Buy buttons. Select each element and click the Remove Block button on the bottom right (red arrow).

Step 5:

Now that the Product information is just showing the title and the description, we need to add in the ability for the customer to add a donation. From the bottom of the column on the left, select Add Section and scroll down until you see the Donation Widget. Insert one of these.

Step 6:

Follow these instructions to link the widget to the appropriate donation product, then deselect the Show title, Show description and Show image options. You'll now have a properly configured donation template. Make sure you click Save in the top right.

Step 7:

Now that we have our product template ready, we need to assign this template to our donation product. This will only impact the products that you assign the template to, which is why we created a new template in step 2. Select the donation template from step 2 and click Save.

🎉 Finished! You can now preview your product.

As always, if you have any questions or comments, just drop me an email at support@donatemate.app - I'm here to help!