When you want each Shopify product to have the highest high level of customization on your ProPhoto website, use the Shopify “Buy Button” Checkout Link for ProPhoto tile buttons.
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 that is highly customized.
Most importantly, this setup does not pull any of the Shopify product information. All content, list pricing, information and images are controlled manually by ProPhoto.
Example of this setup
For example, if you are a photographer who wants to use Shopify for its easy backend use but you do not like the default “Buy Button” stylings and designs then you can create custom ProPhoto layouts for each product and use the ProPhoto tiles that link to the Shopify checkout cart only.
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 one another but want to keep the branding consistent across your entire website.
If you want the list price, images and product descriptions to be updated when you make changes on Shopify then use the Shopify Buy Button via Widget method.
This method only works for single variant options. For example, if you had a t-shirt. with 4 variants for size (small, medium, large, and X-Large) the checkout link can only link to a specific variant. When the customer checkouts the variant is selected “small” and cannot be changed. For this reason, this setup is not ideal for products with variant options. Use the Shopify Buy Button via Widget method if your products have variants.
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.
All information for the product, images and listed price are controlled by ProPhoto manually. Shopify only controls the checkout page.
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.
- 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.
- Click the blue “Publish” button
- 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.
- 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 the actual product name so you know what type of layout it is
- Click the Assignments setting icon for that layout
- 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
- 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 layout only.
- 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.
- 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 “tiles” then click and drag a tile button onto one of your blocks
- If you do not have an existing button available for use click the + Add Tile button
- Add the size of the button in the height and width. A good button size is on average width: 150px height: 50px
- Add a shape layer and optionally change the color of the shape background
- Add a text layer and type your button text into the dialog box.
- Optionally change the font styling
- Once the ProPhoto tile button is inside your layout block hover over the tile and click the setting icon
- Click the tile from the listing and paste the Shopify checkout link in the “links to” field
- PLEASE NOTE: the ProPhoto customizer will control the appearance of all elements on the product page. You must manually set all product images, pricing, text information and titles. Any changes to the products price in Shopify will also need to be changed manually in your ProPhoto product layout
Selecting an E-Commerce Provider
Setup WooCommerce on your ProPhoto Website
Setup Shopify on your ProPhoto Website