Creating a shop page without the Boutiques plugin, or affiliate widgets

We often receive questions on how to create a Shop page featuring product thumbnails if you are not a member of LTK or ShopStyle. This may be beneficial for customers who exclusively use Amazon Associates as their primary affiliate network; however, regardless of which  affilate network you use, this article discusses how to create a dedicated shop page using the WordPress Block Editor, as well as a recommended third party plugin.

CREATE A SHOP WITH THE WP BLOCK EDITOR

If you're using the  block editor system that was released in WordPress 5.0+, you can create a new page and add columns, then add image blocks and heading or paragraph blocks in each column, corresponding to each product. Here's how:

1. Begin by adding a Columns block to your page. You may need to type in the word "Columns" into the Block search bar, then select it. We recommend a three column layout.

2. Next, in the first column, add an Image block. Again, you may need to type in the keyword "image" into the search field if the Image block does not automatically populate for you. Use the prompts to upload your product image, or select a previously uploaded image from your media library.

IMPORTANT: In order for your Shop to look clean and organized, we recommend uploading all images at the same pixel dimensions.

3. Underneath the Image block you just added, add your choice of a Paragraph block, or a Heading Block. You may choose which to add based on how you have styled fonts on your site. In the example below, we've opted to add a heading, using heading 5, so the font looks appropriate for our page. Be sure to change the alignment of your text to centered.

4. If desired, add links to your items, so that when users tap or click on them, they'll link to a product page and/or affiliate link. Both image and text must be linked to individually. We recommend linking to both, as some users will naturally tap/click on the product, and others will tap/click on the text. To do this:

  • Click on the image block, then click on the link icon. 
  • Paste or type in your URL. 
  • Use the dropdown menu to change whether the link should open in a new tab. 
  • Repeat this with the paragraph/heading block. Here's a video showing you these steps:

5. Repeat steps 2 through 4 in the remaining two columns. The result will look similar to this:

6. Then, repeat all the steps above to add a new row of products — add another column block, then additional images and paragraph or heading blocks. Repeat until you have created a product grid to your liking.

7. Before publishing, check your page attributes. If you wish for your Shop page to have its sidebar hidden, be sure to select the Full Width page attribute template:

8. Finally, preview and publish your page!

CREATE A SHOP WITH A PAGE BUILDER PLUGIN

If you're not using the new block editor, or you want a bit more control over the layout, install the Beaver Builder Lite plugin. This is a page builder plugin that will allow you to build the page visually. 

You'll start with a row that has the number of columns you want, then add in photo modules to upload your photos, and each photo module has the option to link to a custom URL. You can also control the spacing between photos/columns and have the photos auto-crop to squares.