Skip to main content

🌊 Hydration Product Page

Shopify Admin Configuration​

To get a hydration product added, you will first need to create a product in shopify that we can assign the hydration template to.

Inside the admin, open up the product tab and add a new product.

Open Products

Add Product Is usually found in the top right hand corner of the view

Edit The New Product​

  • Add a title
  • Do NOT add a description

Adding Title. NOTE you should NOT add a product description

  • Add the Tag "Hydration" to the product

Add Hydration tag to a product

  • Change the template to "hydration"

Set the product template to hydration

  • Upload all product / variant photos the media section

Upload product media

  • Add Color Swatch Option

    • Naming convention to get the swatch to appear must match the uploaded swatch's name to see results. For example, if you uploaded a swatch called traditional-fall-sunflower.png, the option value should be Traditional Fall Sunflower.

  • Add Shape Option

    • Naming convention to get the swatch to appear must match the uploaded swatch's name to see results. For example, if you uploaded a swatch called 24oz-straw-tumbler.png, the option value should be 24oz Straw Tumbler.

Color Swatch options

Shape Options

  • Assign Each variant the correct featured image for that given combination

Update Variant Image

Variants without images assigned will have the placeholder image.

  • Save all changes

INFO All Swatch file names should ideally be handles of the product option's value. Handle syntax requires all characters to be lowercase. Additionally, spaces are replaced with dashes. We recommend replacing all underscore characters with dashes so you don't need that character in the product option's title.

Configure Layout In Theme Editor​

With a new product added, we can now modify the look of the product template inside the theme editor. To get started....

  • Open Theme editor
  • Select Products
  • Select hydration

Select Products

Select Hydration

Hydration Header Section​

Section Settings:​

  • Logo Image - The image that appears at the top of the page. This also has the site url attached to it so you can navigate away from the page without hitting the back button.

Section Blocks : ​

  • Block Type: "Product Page"
  • Block Settings:
    • Title - The title of the block ( Theme editor only )
    • Image - The image that appears at the top of the page
    • Opacity When Out Of Focus - The Opacity of the image when its not in focus. When in focus, the opacity is set to 1.
      • Focused When...
        • Current page is one of the links in the top
        • When you tap / hover over an image
    • Link - The link of the page the image should point to

Header Section with Blocks

Missing Swatches?​

If you run into a swatch that appears as a question mark, it means that we could not find a file that matched the product option as a handle in Shopify's file system. We test for .png, .jpg, .jpeg, and .webp file extensions.

Some Swatches are missing

All Swatches names are matching an image asset in shopify

INFO Always double check the name of the product option against the name of your color swatch file. You will likely find that there was an unexpected underscore or slight name difference between the option name and file name.