When you want a simple solution to add your entire Shopify product collection to your ProPhoto website, use the Shopify “Buy Button” for Collections code via a WordPress Page.
What kind of site does this work for?
This setup is great for a medium to large size shop 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 large online shop selling multiple Lightroom photo presets then you may want an easy and straightforward Shopify solution to display all your products in a traditional “shop” view.
Is this setup for me?
This setup is for you if your products are similar or related and don’t require advanced page layouts and you like the popup 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 single WordPress Page for the “shop” or “collection” and that you have a ProPhoto layout with a WordPress Content module setup inside it to display that “collection.”
The overall setup is easiest of all Shopify setup options; however, each product will not have a unique page URL on your website. This can be a disadvantage for SEO and will limit you from directly linking to specific products.
- Add a “Buy Button” sales channel
- Create Shopify Product
- Create Shopify “Buy Button” for Collections
- Customize the “Buy Button”
- Take special note of the “Layout” options. You will select “classic” or “basic.”
- The button action must be set to “Open product details” in order to display the product info
- 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 shop page
- Add a featured image for this page. Preferably the featured image is an image of the types of products or service you are selling.
- Paste the Shopify Embed HTML code for collections 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 the product or shop display 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 “Shopify Collection”
- 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 collection. When it is selected the page will be highlighted in green
- Click the blue “save” button (top right)
- Navigate to the page 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 only pulls the content from in the WordPress page and display it in the “WordPress content Module.” Each product will not have a unique link or URL. Shopify will control all the display and design of the product layout in popup view.
Selecting an E-Commerce Provider
Setup WooCommerce on your ProPhoto Website
Setup Shopify on your ProPhoto Website