Weekender

Product Data in Strapi

Category

After you create more products, you will want to make sure that you add them to whatever Category they belong in. When you are on the Category page in Strapi, click on the category and look for the “products” input field at the bottom, you will see some other products that are already linked to that category. Just click on the dropdown menu that says “Add relation” and add whatever products you need. This will then make that product show up under that category on the live website.

Products

“alt_images” Field

You can upload multiple images in this section and this is what will be used for the thumbnails on the product page. You don’t need to upload the main product image again, as by default, there will already be a thumbnail with that image on the page. You will just need to upload any alternate images for that product, or whatever you want the thumbnails to be.

“features” Field

The text for the features section needs to be added as paragraph (<p></p>) tags. Here is an example:

<p>Headboard features square, buttonless tufting and added padding</p>
<p>Sturdy wood legs and frame with a soft linen-finish fabric</p>
<p>Slat roll with three-inch slat gap evenly support mattress; no box spring required</p>
<p>Assemble with a Phillips-Head screwdriver and included Allen key</p>

“spec_dimension” Field

This is for the Dimensions section under Specifications on the product page. You will need to use a <h3></h3> tag for the header and then for the content you will need to use a <p></p> tag and give it the class name “sub-paragraph” (class="sub-paragraph"). Here is an example:

<h3>Dimensions</h3>
<p class="sub-paragraph">Cal King: 74.5 x 89 x 46</p>
<p class="sub-paragraph">Full: 56 x 80 x 46</p>
<p class="sub-paragraph">King: 78.5 x 85 x 46</p>
<p class="sub-paragraph">Queen: 65 x 85 x 46</p>
<p class="sub-paragraph">Twin: 41 x 80 x 46</p>
<p class="sub-paragraph">Twin XL: 41 x 85 x 46</p>

“spec_materials_warranty” Field

This is for the Materials and Warranty section under Specifications on the product page. You will need to use a <h3></h3> tag for the headers and for the list you will use the <ul></ul> tag and the <li></li> tags for each list item. If you need to use a paragraph tag (<p></p>) for content like for the Warranty section, it does not need any classes. Here is an example:

<h3>Materials</h3>
<ul>
<li>100% Polyester</li>
<li>MDF Frame</li>
</ul>
<h3>Warranty</h3>
<p>3 year warranty. <a href="/warranties">View here</a></p>

“size_color_price” Field

This is the data that is used in the dropdown menus on the product page for picking the size and color of the item. It also uses this data to change the price according to what the user picks. The options for “sizes”, “prices”, and “colors” will need to be added inside of square brackets [] and be enclosed in quotation marks. Separate each one with a comma ,.

For the “prices”, each position that its in on the list, correlates to the same position for the “sizes” choices. What I mean by this, like in the example below, the “Cal King” size is the first of the list options for “sizes”, and in “prices”, “600” is the first in the list of options for that. This means that the Cal King is $600 and it will be essentially linked to that on the product page. So if you have 6 “sizes” options, you will need to also have 6 “prices” options. See the example below for help as well. You can even just copy and paste this as a template and just edit what you need to.

PLEASE NOTE: It is VERY important that the data be added the same exact way as the example shown below.

{
  "data": [
    {
      "sizes": [
        "Cal King",
        "Full",
        "King",
        "Queen",
        "Twin",
        "Twin XL"
      ],
      "prices": [
        "600",
        "500",
        "600",
        "550",
        "450",
        "450"
      ]
    },
    {
      "colors": [
        "Blue Gray",
        "Dark Gray",
        "White Gray",
        "Tan"
      ]
    }
  ]
}