Instructions

DTS: Group Products
When creating collection for grouped products:

  1. Collection title:
    • The collection title should start with: "Grouped:" (optional).
      This is optional, just to help you easily know which collections are used for grouped products, which are normal collections. The code will remove this word on front-end.
    • The collection title (Excluding the word: "Grouped:") will be the title of all products in this collection.
  2. In collection description section, you'll add something like: "Colour++," with:
    • "Colour" is the fake option name you want to display. (Required)
    • "++" has no special meaning, just to separete the option name with the spliter.(Required if you have a special spliter)
    • "," is the special spliter for the collection.(Optional)
      Note: If there's not a special spliter, the default spliter: "-" will be used.
So for example, if you want to get "Beige" from product with title: "3pc Thermal Hot Food Containers Set 1 L, 1.5 L & 2.5 L, Beige", to display as colour value, then:
  • The collection description will be: "Colour++,"
  • We'll split the product title by "," and get the last value(Beige) to display as option value.
  • If you don't use a special spliter, then the default: "-" will be used.
    But as you can see, the title does not contains '-', so the value will be "3pc Thermal Hot Food Containers Set 1 L, 1.5 L & 2.5 L, Beige".
DTS: Colour matching sets builder
This is quite simple as you only need to:
1. Create collection for each colour - with products that have the colour.
2. Select the collections in Sections --> Matching Sets Page.

NOTE: All of the above have been done, so no extra works needed for this page.

If you add more colours, just follow the above steps to add the colour set to the page.


Look Builder 2 PARTS

We will now be able to create dynamic 2 PARTS Look Builder pages. So to create a 2 PARTS Look Builder page, please follow these steps "in their exactly order":

  1. Create products that have all the Main Look Images for the Look Builder page you will create.
    • Let's say you have 400 Main Look Images. So you can create 2 products - each has 200 images. (Can be any number less than 250 - the max number of images per product Shopify has set).

      These products don't need any settings like price, inventory..., as they will only be used to hold the images for Main Look.


  2. From theme editor, find the page called "LB 2 PARTS: CREATE SETS". I don't give a specific link because if we change the theme, this link will not apply to what you want to change.


    From there, you'll be able to select products for these parts, and create sets for a 2 PARTS Look Builder page.
    Once all sets are created, GENERATE the rules and save it somewhere.

  3. From theme editor, find the page called "LB 2 PARTS: LINKING IMAGES". This page is used to link MAIN LOOK images with their part images.
    You can select all MAIN LOOK images for this Look Builder page from theme editor --> GET IMAGES FROM. Once all images are linked with their right part images, GENERATE the rules and save it somewhere.

  4. Now it's time to create the Look Builder page to show to customers.
    1. When creating the page in admin pages, select the page template as "page.look-builder-2-parts", set the title and description as normal.
    2. Once the page is created, visit the theme editor and select it from the dropdown on top

    3. From theme editor, in the "LOOK BUILDER 2 PARTS" section, you can customise the new page by clicking "Add look builder page" at bottom, then select parts for this Look Builder, and the sets and linking images rules that were created right above.

    4. We're now ready to go with the new 2 PARTS LOOK BUILDER page.
    5. You can create as many pages as you want. Just follow all these steps.


IMPORTANT NOTES
  • If you have colour options with MORE THAN 1 WORD, please use the '-' character, not '/', a space or any special characters (' " > < . * % ...)
  • The option name (Size, Colour for example - not the option values) for products within a part MUST BE THE SAME so they can be groupable.


Look Builder 3 PARTS

We will now be able to create dynamic 3 PARTS Look Builder pages. So to create a 3 PARTS Look Builder page, please follow these steps "in their exactly order":

  1. Create products that have all the Main Look Images for the Look Builder page you will create.
    • Let's say you have 400 Main Look Images. So you can create 2 products - each has 200 images. (Can be any number less than 250 - the max number of images per product Shopify has set).

      These products don't need any settings like price, inventory..., as they will only be used to hold the images for Main Look.


  2. From theme editor, find the page called "LB 3 PARTS: CREATE SETS". I don't give a specific link because if we change the theme, this link will not apply to what you want to change.

    From there, you'll be able to select products for these parts, and create sets for a 3 PARTS Look Builder page.
    Once all sets are created, GENERATE the rules and save it somewhere.

  3. From theme editor, find the page called "LB 3 PARTS: LINKING IMAGES". This page is used to link MAIN LOOK images with their part images.
    You can select all MAIN LOOK images for this Look Builder page from theme editor --> GET IMAGES FROM. Once all images are linked with their right part images, GENERATE the rules and save it somewhere.

  4. Now it's time to create the Look Builder page to show to customers.
    1. When creating the page in admin pages, select the page template as "page.look-builder-3-parts", set the title and description as normal.
    2. Once the page is created, visit the theme editor and select it from the dropdown on top

    3. From theme editor, in the "LOOK BUILDER 3 PARTS" section, you can customise the new page by clicking "Add look builder page" at bottom, then select parts for this Look Builder, and the sets and linking images rules that were created right above.
    4. We're now ready to go with the new 3 PARTS LOOK BUILDER page.
    5. You can create as many pages as you want. Just follow all these steps.


IMPORTANT NOTES
  • If you have colour options with MORE THAN 1 WORD, please use the '-' character, not '/', a space or any special characters (' " > < . * % ...)
  • The option name (Size, Colour for example - not the option values) for products within a part MUST BE THE SAME so they can be groupable.


Inspiration page

From theme editor, find the page from the top dropdown menu. The rest
Group Products

To be groupable, products must:

  1. Have the same options (both name and position. For example: 2 options: Size and Colour)
  2. Belong to a collection - which starts with Grouped:
    (I created all these collections - so this is just needed for grouped products in the future)
    NOTE: This is optional in DTS, but is REQUIRED in TIA, as we'll check by collection title (you don't need to add content for description)
Custom related and recommended

To offer custom relalted and recommended for each products:

  1. Create a related collection and recommended collection for each product.
  2. Then, in theme customize product template, just select a product and the custom collections you want to feature with this product.
IMPORTANT NOTE:
  • I splited the "Custom Featured collections" and "Custom Size" sections to 4 different types (TOPS,SKIRTS,BELTS,DRESS) to make the number of products per section smaller.
  • So, for now, you'll need to visit 3 product pages ( 1 Top product, 1 Skirt product, 1 Belt product) to add all custom collections and custom sizes.


XP: Questions and Answers page

To setup the QA page, please follow these steps "in their exactly order":

  1. Create all Question and Answers here -->.(This must be done first)
    Once you have all the Question and Answers, generate the code and save it to Settings -> Global Data for Q&A --> All Questions and their answers options
    This step is very IMPORATANT and must be done FIRST as the data will be used for all the below rules.
    (The auto-load option is availabe for this page - which means you can create some, save, and edit or add more later. Just make sure to generate the code and save it to Settings, )
  2. Create all stacks(collections). Each should have an image and description.
  3. Add more conditions to this collection (Optional).
    The code will get data from ALL PRODUCTS in this collection - and use the data to build the stacks when needed.

    For now, the condition is simply all products with price > 0. So, you shoud add more conditions to limit the number of products that need to get data from.(Belong to at least 1 stack)
  4. Set "Stack title rule" in settings. (optional)
    By default, the code will get data from all collections.
    You can limit the number of collections that need to get data from by a keywork in the collection title.
    For example: In all of my demo collections, they all have the work: "Stack", so I set "Stack title rule" is "Stack". So, the code will only get data from collections that have the work: "Stack" in their title.
  5. This is the LAST STEPS for the QA page.
    Set rules for each stack here-->

    Some NOTES about this page:
    • The auto-load option is availabe for this page - which means you can create some, save, and edit or add more later. Just make sure to generate the code and save it to Settings.
    • ALL STACKS must be set with ALL QUESTIONS(min 1 answer option is selected).
    • You can select multiple answers for each question.
      On front-end, ALL STACKS that meet the answer sets will be shown.
XP: Stack builder page
This is quite simple as you only need to:
1. Create collections for catagories you want to show.
2. Select the collections in Sections --> Stack Builder Page.