When you want a simple solution to add your Shopify products to your ProPhoto website, use the Shopify “Buy Button” Single Product code via a WordPress Page.
What kind of site does this work for?
This setup is great for a small to medium size shop (less than 10 is best) and each product does not require extra customization to the page layout.
Example of this setup
For example, if you are a photographer with a small online shop selling Lightroom photo presets then you may want an easy and straightforward Shopify solution.
The one key feature you would like to have is the ability to link to each individual product that you’re selling.
Is this setup for me?
This setup is for you if your products are similar and don’t require advanced page layouts and you don’t mind the built-in Shopify product design options.
If you need each product layout to be custom, then use the Shopify Buy Button via WordPress Widget method instead.
What do I need to know about this setup?
This setup requires that you create a unique WordPress Pages for each product and that you have a ProPhoto layout with a WordPress Content module setup inside it.
The overall setup is fairly easy. The only added step is creating unique Shopify “Buy Buttons” for each product. If you manage more than 10 products this could be a time intensive setup.
- Add a “Buy Button” sales channel
- Create Shopify Product
- Create Shopify “Buy Button” for Single Product
- Customize the “Buy Button”
- Take special note of the “Layout” options. Most likely you will want to select “full view.”
- 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
- Create the “Buy Button” embed HTML code
- Open your WordPress website dashboard
- Create a new WordPress page by hovering over “Pages” and click “Add New“
- Type in a title for your product
- Add a featured image for this page. Preferably the featured image is an image of the product or service you are selling.
- Paste the Shopify Embed HTML code directly into the WordPress page content area
- Click the blue “Publish” button
- PLEAE NOTE: in this setup ProPhoto does not control the content or the styling of this product in live view.
- Open the ProPhoto customizer
- Click layouts from the left panel
- 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
- 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.
- Once you have the layout (either new or duplicated) click the title of the layout to rename the layout
- PRO TIP: stay organized and rename your layout either “Shopify Products”
- Click the Assignments setting icon for that layout
- From the “WordPress Pages” listing click to select all the WordPress page you created previously for your products. When it is selected the page will be highlighted in green
- Click the blue “save” button (top right)
- Navigate to one of the pages you just linked
- 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
- If needed, delete any unwanted blocks from the page layout or add new blocks to the page
- 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 Shopify layout only.
- If there are linked blocks on the page take note 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.
- 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.
- From the ProPhoto menu on the left, click “elements” then click and drag a WordPress Content module (the one with the WordPress logo) onto one of your blocks in the layout
- Using the module settings, style your WordPress Content to fit your preferences
- PLEASE NOTE: the ProPhoto customizer will not display the Shopify HTML code in the backend customizer. To see your changes, save the page layout and then click “exit” “view page” to see the Shopify “Buy Button” live view.
- 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.”
- Also note that this ProPhoto layout will control all the pages you’ve assigned it to. Meaning, if you assign this layout to all your WordPress product pages then each of those pages will apply this layout. The only changes will be what is inside the WordPress Content Module. ProPhoto will pull the content in the WordPress page and display it in this section of the layout. Because each product page uniquely has its own Shopify “Buy Button” each product page will display its own product information controlled by Shopify.
Selecting an E-Commerce Provider
Setup WooCommerce on your ProPhoto Website
Setup Shopify on your ProPhoto Website