Tutorial: Creating an online store in Brightspot using Shopify products

This tutorial explains how to incorporate Shopify products into an asset. You will be creating a module using Shopify products you import into Brightspot, then adding that module to an asset. You will also modify one of the products in that list, and verify that the change you made appears as intended.

Step 1: Refresh your Shopify product listing in Brightspot

In this step, you refresh the listing of all your Shopify products within Brightspot.

1. Open the search panel.
2. From the content-type filter, under External Types, select Shopify Product. Add any other filters as necessary.

Brightspot imports all matching Shopify products.

Step 2: Create a shared product list module

In this step, you create a shared product list module. Using this approach, you have a list of Shopify products that you can add to more than one asset.

1. In the header, click add.
2. From the Create list, select Product List Module.
3. In the Internal Name field, enter User Conference Souvenirs. You will use this name in "Step 3: Add the shared product list module to a page."
4. In the Title field, enter User Conference Souvenirs. This title appears above the product listing.
5. In the Description field, enter Take home memories from this year's exciting conference.. This description appears above the product listing.
6. From the Items list, select Basic.
7. Click add_circle_outline.
8. In the field you just added, click search.
9. In the content picker, click one or more products you imported from Shopify.
10. Close the content picker. Your content edit form looks similar to the following.
    

    

11. Expand Styles > Product List Styles.
12. From the Template list, select Product List Carousel. (Each template provides a different layout for the products.)
    

    

13. Click save.

14. Click remove_red_eye to view the product list module in the preview pane (and click open_in_new to view the product list module in a new browser tab).

    

15. Complete your site's workflow and publish the product list module.

Step 3: Add the shared product list module to a page

In this step, you create a page and add to it the shared product list module from "Step 2: Create a shared product list module."

1. In the header, click add.
2. From the Create list, select Page.
3. In the Display Name field, enter User Conference Closing Session.
4. In the Description field, enter See you again next year!.
   

   

5. Expand Overrides > Layout Overrides.
6. From the Below list, select Replace.
7. Click add_circle_outline.
8. In the module picker, filter by Misc, and select Shared Product List Module.
   

   

9. Back on the content edit form, from the Shared list, select User Conference Souvenirs. (This is the internal name of the shared product list module you created in "Step 2: Create a shared product list module.")
   

   

10. Click save.
11. Click remove_red_eye to view the page in the preview pane (and click open_in_new to view the page in a new browser tab).
    

    

12. Complete your site's workflow and publish the asset.

Visitors clicking on a product in the carousel are redirected to the same item in your Shopify store. From there, they can purchase the product.

Step 4: Modify a product's description

Brightspot imports titles and descriptions from Shopify. Your Shopify descriptions may not match the context of a particular Brightspot asset. For example, you can give visitors who attended a user conference a more personalized description about a product (and increase the chances of a sales conversion). In this step, you customize a product's title and description appearing in the page you created in "Step 3: Add the shared product list module to a page."

1. Open the product listing you created in "Step 2: Create a shared product list module."
2. Under the Items list, click edit for the product whose title or description you want to customize.
3. In the Title and Description fields, modify the text as appropriate.
   

   

4. In the Featured Image field, select a different image as appropriate.
5. From the Options list, select Options Available, and further customize the product offering for this product list module. For details, see Product.
6. Click Publish.
7. Click Back.
8. Click save.

9. Click remove_red_eye to view the product list module in the preview pane (and click open_in_new to view the product list module in a new browser tab).

   

10. Complete your site's workflow and publish the product list module.
11. Refresh the content edit form for the page you created in "Step 3: Add the shared product list module to a page."

12. Click remove_red_eye to view the page in the preview pane (and click open_in_new to view the page in a new browser tab).

    

See also:

• Product List module