Set Up an Account Page Share Widget in Shopify

William Harper Updated by William Harper

Overview

These instructions are to help simplify the set up of an account page share widget in Shopify.

Instructions

  1. Establish the desired location of the widget on both mobile and desktop.
  2. Use browser developer tools to identify the markup surrounding the desired location.
  3. In Shopify, go to Online Store => Themes => Actions => Edit Code.
  4. Open the file that contains the code for the account page, usually customers/account.liquid.
  5. Insert the <div> that contains the class or ID that will trigger the widget, as well as any surrounding markup required to ensure the widget appears as desired by the client or designer.
  6. Open the main, non-minified stylesheet, often styles.css, but the naming can be highly variable.
  7. Add any CSS required to reach the desired appearance.
  8. Save any altered files.
  9. Open the account page in the browser and ensure that it looks as desired. If changes are required, go back to the files in Shopify and modify them as needed.
  10. If the widget needs to be inserted in different places for mobile and desktop, repeat the steps and add CSS or markup to show/hide each widget as needed.

How did we do?

Contact