Menu

Free resources for photographers & creatives

Add a Shopify Single Product via WordPress Widget

When you want each Shopify product to have a high level of customization on your ProPhoto website, use the Shopify “Buy Button” Single Product code via a WordPress widget.

What kind of site does this work for?

This setup is ideal if you manage very few Shopify products (less than 3 is best) and each product requires a different page layout and design.

Example of this setup

For example, if you are a photographer who wants to add a “book now” button to collect payment from customers but you also sell a digital art print, then you may want each of the pages to be setup differently.

It’s possible that you want your “book now” product page to have multiple sections with lots of rich information and even a welcome video. However, on your digital art product you only want a simple setup with the images and Shopify product information.

Is this setup for me?

This setup is for you if you need each of your Shopify product pages to be highly custom and different from each another.

If you don’t need each product layout to be custom, then use the Shopify Buy Button via WordPress page method or Shopify Shop Collections method instead.

What do I need to know about this setup?

This setup requires that you create a unique WordPress Page and a unique ProPhoto layout for each of the Shopify products.

Because you must create a unique ProPhoto layout for each product there is a lot of manual customization required. If you manage more than 3 Shopify products this setup could be very time intensive.

Tutorial:

  1. Add a “Buy Button” sales channel
  2. Create Shopify Product
  3. Create Shopify “Buy Button” for Single Product
  4. Customize the “Buy Button”
    1. Take special note of the “Layout” options. Most likely you will want to select “classic” or “full view.”
    2. With this setup you most likely will want to select “direct to checkout” since it is unlikely the customer would add other products to the cart
  5. Create the “Buy Button” embed HTML code
  1. Open your WordPress website dashboard
  2. Hover over Appearance and then click “Widgets
  3. Drag and drop an HTML widget into the “ProPhoto” box section
  4. Paste the HTML code (from Shopify) inside the HTML Widget box
  5. Optionally add a title to the widget
  6. Click save
  7. Create a new WordPress page by hovering over “Pages” and click “Add New
  8. Type in a title for your product
  9. Add a featured image for this page. Preferably the featured image is an image of the product or service you are selling.
  10. Click the blue “Publish” button
    1. PLEAE NOTE: in this setup we will NOT add any info inside the WordPress page itself. This page will act as a placeholder only pulling the title, permalink, category information and featured image. The rest of the content will be controlled by ProPhoto.
  1. Open the ProPhoto customizer
  2. Click layouts from the left panel
  3. Click + add new layout to create a layout from scratch OR hover over an existing layout and click the copy icon to duplicate the layout
    1. PRO TIP: duplicating layouts is a faster way to design a page without having to add the small settings from your website. When you duplicate a layout you can delete out any block you don’t want and keep linked block (such as a header or footer) on the page layout.
  4. Once you have the layout (either new or duplicated) click the title of the layout to rename the layout
    1. PRO TIP: stay organized and rename your layout either “product” or the actual product name so you know what type of layout it is
  5. Click the Assignments setting icon for that layout
  6. From the “WordPress Pages” listing click to select the WordPress page you created previously. When it is selected the page will be highlighted in green
  7. Click the blue “save” button (top right)
  8. Navigate to the page you just linked
    1. PRO TIP: click on the page title highlighted in orange and underlined listed in the layout assignments. This will keep the ProPhoto customizer open but navigate you quickly to that page
  9. If needed, delete any unwanted blocks from the page layout or add new blocks to the page
    1. Remember, because you’ve created a new layout the changes you make will not effect the other pages on your website. Adding or deleting blocks will be specific to this layout only.
    2. If there are linked blocks on the page take not of their linked relationship. Making changes to a linked block on this layout will also cause changes on all other layouts that the block is linked with.
    3. Optionally, you can unlock a block and click “make unique” to copy the block content but make it only unique to that layout page. Any changes you now make will not effect the other linked blocks.
  10. From the ProPhoto menu on the left, click “elements” then click and drag a widget module onto one of your blocks (from step 9 above)
  11. From the widget drop-down select the Shopify “Buy Button” HTML embed widget you created from the steps above
    1. PLEASE NOTE: the ProPhoto customizer will not display the HTML code in the backend customizer. To see your changes you must save the page layout and then click “exit” “view page” to see the Shopify “Buy Button” live view.
    2. Any design changes you want to make on this Shopify “Buy Button” is controlled by Shopify so you must go back to the Shopify customize interface to customize the appearance and functionality of the Shopify “Buy Button.”

Mark Brand Boutique

Mark Brand Boutique serves photographers, videographers and small business creatives in all 50 states and worldwide.

secure payments by: