By default, widgets are automatically placed on a specific page and location when you click “Connect”. For most widgets, that’s below all sections on your Product Detail Page; for Round-Up, it appears at the top of the Cart page.

However, you may want to:

• Move the widget to a different location on the page

• Display it on a different page entirely

• Troubleshoot a widget that isn’t showing (especially if you're using a custom or complex theme)

You can do this in one of two ways, depending on your Shopify setup:

Option 1: Using Shopify 2.0’s Visual Theme Editor

If your store uses Shopify 2.0, you can use Shopify’s built-in Visual Theme Editor to place your widget anywhere in your theme. Steps:

1. Set your campaign to Manual:

• In your Shop for Good dashboard, set the campaign’s Publish setting to Manual, then click Connect.

2. Copy your Campaign ID:

• While editing the campaign in your dashboard, look at the end of the browser’s URL. Copy the numeric ID and save it for later.
  

3. Open the Shopify Theme Editor:

• In your Shopify Admin, go to Online Store > Themes under Sales Channels, then click Customize on your current theme.
  

4. Select the page where you'd like to place your widget from the dropdown at the top.

5. Add the widget block:

• Click Add Section in the left panel

• Choose Apps > Shop for Good

6. Click the new Shop for Good app block in the sidebar

7. Configure the block:

• Select the appropriate campaign type from the dropdown

• Paste in your Campaign ID

8. The widget will now appear in the preview.

9. You can further adjust positioning and width in your Shop for Good dashboard.

10. Don’t forget to Save your changes in the theme editor.

11. Go to your store and confirm the widget appears where expected.

Option 2: Manual Code Placement (Non-Shopify 2.0 Themes)

Developer required

If you aren't on Shopify 2.0, you'll need to have a developer manually place the code snippet for the widget in your store's theme code where you want the widget to appear. The following instructions can guide your developer through this process. Please note that the specific filenames (i.e., "product-template.liquid") may differ across themes. We have used the most common filenames in the instructions, but yours may vary slightly. 

This video and instructions below use the Portion of Sales widget as an example, but the process is the same across campaign types - you will just use a different code snippet for different campaign types. You can find the correct code snippet in your Shop for Good dashboard in the campaign you are setting up, or you can copy it from the table below.

Portion of Sales Manual Placement Video Tutorial:

Manual Placement Steps Summary:

General Instructions:

1. Set your campaign to Manual and click Connect in your Shop for Good dashboard.

2. Copy the appropriate code snippet for your campaign type:

⚠️ Reminder: Use the correct snippet for your campaign, either from this table or from your dashboard.

    3. Then hit SAVE!

Example 1: Adding the Widget Below Payment Buttons on Product Pages

1. In Shopify Admin, go to Online Store > Themes > Actions > Edit Code

2. Open the file product-template.liquid (or your theme’s equivalent)

3. Paste the code snippet where you'd like the widget to appear—typically below the payment buttons

4. Save your changes

5. Refresh your product page to confirm the widget appears

   • If it doesn’t, try moving the snippet slightly up or down in the code (refer to our video tutorial for visual help)

     
     
     

Example 2: Adding the Widget to the Cart Page

1. Open cart-template.liquid or your theme’s equivalent

2. Paste the widget snippet above the <form> tag to show it at the top of your cart

3. Save and refresh your Cart page to verify
   
   

Attachments (1)

Cart.jpg
113 KB