Preferred Flooring: Adding New Lines of Products

Initial Steps for New Gallery Page (Product page) #

  1. Acquire/download new product photos (from Scott or the vendor)
  2. Choose 12-16 of the best images you believe will display nicely on the website.
  3. Open the new photos in Photoshop or your chosen image editor.
  4. Size them to the appropriate sizes (1024 x 660) for the product gallery.
  5. Save them for web (jpg) with the title format preferred-flooring_hardwoods_name-of-product.jpg
  6. Of the images you have downloaded, choose your favorite that you believe will work well for the header image (1920 x 1080).
  7. Save this larger image for web (jpg) and format the title as: preferred-flooring_product-name-header.jpg (this will go into the row containing the product title–top of page)
  8. The final step is to keep the chosen header image open, then export as a smaller image (700 x 500). This image will be the product image on the main category page: hardwoods, luxury vinyl planks, carpet, area rugs, etc. You can format this title as preferred-flooring_hardwoods_product-name-small.jpg

Updating/Editing/Creating New Gallery Page #

  1. Create new gallery page by duplicating/cloning an existing gallery page from the gallery category (Hardwoods, LVP, Carpet, etc.) you are working in.
  2. Begin making the necessary edits:
    • Change the title of the page (eg: Fabrica Hardwoods)
    • Edit slug below the title. Click the existing slug, delete the existing info (eg: mirage-exotic-2)
    • Click OK (the slug should now reflect the page title)
  3. Change the header image by clicking the edit button (pencil) on the top row of the layout.
    • Scroll down to where you can change the background image.
    • Click (+) to change the image, then upload the header image that you saved to the row background image section.
    • Click Save
  4. Click the Custom Headline (you should not need to change the style/font/etc), change that title to the new brand (eg: Fabrica Hardwood)
    • Click Save

Update the gallery module and publish page #

  1. Click the edit icon (pencil) on the gallery module. You will see the existing gallery from the page you just duplicated.
  2. Remove (click X) the existing images within the gallery module, until the gallery module is empty.
  3. Now begin uploading/updating this gallery module.
    • You can bulk upload the images via the gallery module.
    • Reminder: the file title format should be: preferred-flooring_hardwood_shady-oak.jpg (or similar).
  4. Once images have uploaded, you will need to change the titles to reflect the product names (you do this so the file name is not visible when browsing the gallery images)
  5. You can change these titles from the Media Library or within the gallery tool: in the title field, change it to Fabrica Hardwood Shady Oak, etc. (this will make the images titles less cryptic when viewing the gallery).
  6. Now the gallery has been updated.
  7. Click Publish.

Add Product to Main Category Page (Hardwoods, LVP, Carpet, Area Rugs, etc) #

  1. Navigate to the main category page: https://preferredflooring.com/our-products/hardwoods/ (you will see single images, names, and a button for each product)
  2. Click Edit Page at top of page in editor bar.
  3. Keep the products alphabetical and the same size throughout the page.
    • The format of these pages and rows are set to be 1/3 + 1/3 + 1/3. This is the optimal layout, BUT…
    • Occasionally the rows only have 1 or 2 products under the specific line. For example (DIXIE GROUP) has 2 products.
    • The row will need to be formatted as 1/6 + 1/3 + 1/3 + 1/6. This will keep the two lines centered on the page and retain their size and format.
    • If the row only has one product from the specific line, use 1/3 + 1/3 + 1/3 (insert the information into the middle column).
  4. This is where you insert the smaller images formatted to be 700 x 500.
    • You may duplicate the photo, title, and buttons from existing products.
    • Drag to the proper column(s)
    • Change the image (link), title, and button links. The links will navigate to the respective pages that you have just created (above).
    • Confirm all links are correct.
  5. Save/Publish.

Powered by BetterDocs