Updated 12 May 2020

Product Page Buildout

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

Product title isn't unique enough
(make sure it's correct not just by name) - not just product title as there can be old and new versions of the same product sometimes with vastly different product shapes.

Step 2. Build Copy block

Copy Block Html Example



  • main copy
  • materials
  • dimensions
  • features - these are shown below next to the image grid.
Size Charts & Care Instructions
These are not added in the copy. Please see below of where those are added, but do not put them in here as they won't show.

Step 3. Images

Image Notes
- variant images must be above the "all" images - webp downloads won't work to be uploaded into Shopify - if you are getting webp doewnload then switch to Firefox to download and you'll get jpgs
  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. Alt tag 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
What About Additional Tags?
Additional tags like colors, sizes available, price range and more will be added dynamically by the Smart Tags app

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

Most of the time this won't be needed
If you're migrating or working on products we shoudl use this time to also make sure the collections are made that match these products, but if the collection is already made (by a previous product) or this is just a new product - then this step is unnecessary.

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.

Powered by archbee