Skip to main content

Installing Influencer List page in Shopify

A
Written by Andy Fernandez
Updated over a year ago

Install the Loudcrowd app to your store

Install the Loudcrowd app from the shopify marketplace. This will take you through setting permissions and integrating with your LoudCrowd account.

Update your store's theme

Edit a new copy of the theme and go to the App Embeds tab on the left of the editor. Make sure the Loudcrowd app is installed and turned on.

Add a New Page Template

Add a new template based on the template of your preference

  1. Go to your store's Shopify Admin

  2. Click on "Customize" theme button

  3. Create a new page template named "influencer-list"

  4. Add the "Influencer List" block to the newly created "influencer-list" template

  5. Save your changes.

Assign a new page in the Shopify admin to that template:

Test the Influencer List page

With the LoudCrowd app enabled on your store, and the new template present on a page, you will now be able to test the page using the following link:

Style your Influencer List page

The next step is styling the page to match your brand’s aesthetic. We strive to make the blocks look great without customization, however due to the variation of environments they may be deployed to, sometimes they need a bit of styling.

  1. In your theme's /Assets folder, make a file called loudcrowd.css

  2. In the theme.liquid file, add this snippet of code to the <head> component. Make sure /pages/influencer-list-page point to your recently created page slug.

      <!-- LoudCrowd --> 
    {% if request.path contains '/pages/influencer-list-page' %}
    <link rel="preload" href="{{ 'loudcrowd.css' | asset_url }}" as="style"> {{ 'loudcrowd.css' | asset_url | stylesheet_tag }}
    {% endif %}
  3. Then you can begin modifying the block components in loudcrowd.css NOTE: This example is just a small portion of the css variables that can be set on these components. Please refer to this article about the various css settings that can be modified and overridden https://help.loudcrowd.com/en/articles/9483650-styling-influencer-list-block

    influencer-list-block {
    --lc-primary-color: #fedd00;
    }

Did this answer your question?