Skip to main content

Advanced Setup: Button Location Override

Updated

If you are unable to add the registry and wishlist buttons using the standard "Add block" method, or if you need to place the buttons at a specific location on your product page, Gift Reggie provides a Button Location Override feature. This is particularly useful for custom-built pages or highly customized themes.

When to Use Button Location Override

Use this feature if:

  • You have a custom-built product page that doesn't support the standard block addition method
  • The "Add block after" option doesn't place the buttons where you want them
  • You need precise control over button placement
  • Your theme structure prevents standard button integration

How to Configure Button Location Override

  1. From your Shopify admin, navigate to Online Store → Themes
  2. Click Customize on your active theme
  3. Click on the App embeds icon (puzzle piece) in the left sidebar
  4. Locate Registry and Wishlist and ensure it is toggled ON

  5. Click on Registry and Wishlist to access its settings

  6. Scroll down to find the Button Location Override section

Setting Up the Override

In the Button Location Override section, you will need to provide:

1. Element Identifier

Enter either the ID or class name of the HTML element where you want the buttons to appear:

  • For ID: Enter the ID with a # prefix (e.g., #add-to-cart-button)
  • For Class: Enter the class name with a . prefix (e.g., .product-actions)

2. Button Placement Position

Choose how the buttons should be positioned relative to your specified element:

  • Inside the matching element: Buttons will be placed within the specified element
  • Before the matching element: Buttons will be placed immediately before the specified element
  • After the matching element: Buttons will be placed immediately after the specified element

Important Requirements

CRITICAL: The buttons must be placed within the product form to function correctly. When selecting an element ID or class name:

  • Ensure the element is located inside the <form> tag on your product page
  • The element must be part of the product form structure
  • Buttons placed outside the product form will not work properly

Example Configurations

Example 1: Place buttons after the Add to Cart button

  • Element Identifier: #add-to-cart-button
  • Position: After the matching element

Example 2: Place buttons inside a custom product actions container

  • Element Identifier: .custom-product-actions
  • Position: Inside the matching element

Example 3: Place buttons before the Buy Now button

  • Element Identifier: .shopify-payment-button
  • Position: Before the matching element

How to Find Element IDs and Class Names

If you're not sure what ID or class name to use:

  1. Visit your product page in a web browser
  2. Right-click on the element where you want the buttons to appear

  3. Select Inspect or Inspect Element

  4. Look for the id or class attribute in the HTML code

  5. Copy the ID or class name (without the # or . prefix)

  6. Add the appropriate prefix (# for ID or . for class) when entering it in the Button Location Override settings

Testing Your Override

After configuring the Button Location Override:

  1. Click Save in the theme editor
  2. Visit a product page on your live store
  3. Verify that the buttons appear in the correct location
  4. Test the buttons to ensure they function properly
  5. If the buttons don't appear or don't work, verify that the element is within the product form

Troubleshooting Button Location Override

Buttons are not appearing:

  • Double-check that you've entered the ID or class name correctly with the proper prefix
  • Verify that the element exists on your product page
  • Ensure the App embed is still toggled ON

Buttons appear but don't work:

  • Confirm that the selected element is inside the product form
  • Check your browser console for any JavaScript errors
  • Try selecting a different element that is clearly within the form structure

Buttons are in the wrong position:

  • Try changing the placement position (Inside/Before/After)
  • Consider selecting a different parent element

 

Need More Help?

If you continue to experience issues or have questions not covered in this guide, please contact Modd Apps support for assistance. Our team is ready to help you get the most out of Gift Reggie.

Thank you for choosing Gift Reggie by Modd Apps!

Related articles