Product Page Buildout

Read time56 min

Explainer Video Walkthrough

Example Product

Live product we're working from - https://www.dakine.com/en-us/bags/backpacks/street-backpacks/mission-25l-backpack/

Step 1. Find Product (if transferring)

Search for product sku in Shopify admin

Step 2. Build Copy block

Copy Block Html Example

HTML

Structure

  • main copy
  • materials
  • dimensions
  • features - these are shown below next to the image grid.

Step 3. Images

  1. Get all images uploaded into Shopify
  2. Put images in correct order
    1. Variant Images
      1. Front
      2. Back
    2. Product Detail Images (inside, zipper etc)
    3. Video Thumbnail
    4. Lifestyle Images
  3. Alttag the images
    1. Variant images = color name
    2. Product Detail images = blank
    3. Video Thumbnail = video url (not embed link just browser url)
    4. Lifestyle = lifestyle



Step 4. Tag the product

  • Size Chart (if needed) = example size-backpack
  • Care Instructions (if needed) = example care-backpack
  • Collection Handle (if migrating) - example col-new-backpacks

Step 5. Theme Customizer

5a. Adding Variant Swatches (colors and patterns)

  • To the Online Store > Themes and click customize on the active theme
  • In the dropdown at the top of the customizer (will be on Home page) select Product Pages
  • In the left Sections bar select "Product page swatches"
  • Scroll to the bottom and select "Add color swatches"
  • Now enter the color name and choose a hex color or upload an image.
  • Save

5b. Adding a Product Care Section

  1. First is there already a Product Care section created for the product type you are working on? If so you don't need to do this step, just make sure the tag is set on the product as details in Step 4. If not proceed to #2.
  2. Open a new tab and go to this url - we are going to make a blog post for easier updating - https://dakine-prod.myshopify.com/admin/articles
  3. Click Add blog post
  4. Title it with the product type and then Care Instructions, example Backpack Care Instructions
  5. Paste in the copy you would like into the copy block.
  6. Set the author to Scott Wickberg and the Blog to Care Instructions
  7. Set the visibility to Visible
  8. Hit Save and after it's saved, close this tab and go back to the customizer tab.
  9. In the customizer sections click on Product Care (make sure you are on a product page in the customizer as noted in 5a or this section won't be there)
  10. Click Add product group
  11. For Group Title put the product type this is for
  12. For tag put the tag you made for this (MUST START WITH "care-"), example care-backpacks
  13. Select the blog post you just created for this.
  14. Save.

5c. Add a Size Chart

  1. First is there already a size chart associated with this product type? If so you don't need to do this step. Just make sure the tag is set in Step 4.
  2. In the Theme Customizer select Size Charts (make sure you are on a product page in the customizer as noted in 5a or this section won't be there)
  3. Select Add grid
  4. Set the tag you want to use to show this for a product (MUST START WITH "size-"), example size-backpack
  5. You can add a title and copy intro for this section in the next two fields
  6. For the rows you will need to just put the items in in csv format, example size,height,width,length - that would give you 4 columns
  7. do the same for all your data in both inches and centimeters
  8. Then if this grid needs further information like images we will make a page with all this information and use the available link and button copy to link to that page



Step 6. Collection Build

We will use this collection again as an example - https://www.dakine.com/en-us/bags/backpacks/new-backpacks/

  1. Go to Products > Collections in the Shopify admin
  2. search for the collection name, in this example New Backpacks
  3. If it exists then you're done. If it doesn't then click "Create Collection"
  4. Give it the name, in this example New Backpacks
  5. In the conditions set it to product.tag > is equal to > (enter the tag you set in step 4) in this example, col-new-backpacks
  6. done.



doc powered bycompany wiki & knowledge base