How to embed your Board

In this article, we will cover:

• How to generate your Website Embed code
  • General Options
  • Advance Filter Options
• Where is your Board embedded?
• How to embed your board in Shopify?
  • Option A: Global Theme Override
  • Option B: Targeted Board Override
  • Where to Add This Code in Shopify

How to generate your Website Embed code 

1. You can generate Website Embed code directly through the Editor by clicking "Display" in the bottom left-hand side of the page:
2. Select or search for your personalization on the right-hand side panel and select your Website Embed personalization.  These Website Embed personalizations are:

• Website Embed
• Ratings & Reviews
• Shoppable Gallery
• Virtual Event
• Mobile Gallery

3. If it’s an old personalization before hyper-personalization, then it will ask you to choose Website Embed or Signage Display as in the picture below.  For displaying your Board, choose Signage Display.
   
4. Click next
5. Open up General and customize your Board for the web embed
6. Open up Advanced Filters.  Here, you have the ability to customize your web embed even further
7. Open up Embed Code, and you will be able to copy your embed code by clicking Copy to Clipboard 
8. If you want to view your Website Embed, click on Open in New Tab, which opens the Board preview in a new browser window
9. Click Done when you are finished

General options

Width	Choose px or % for the width of your Board
Height	Choose px or % for the height of your Board
Display Type	Infinite Scroll: More posts will load as your users scrolls towards to the end of your Board Click for More:  More posts will load on your Board when the Click More button is clicked Page by Page: A fixed number of posts is shown, with buttons to navigate from page to page.
# of Columns	Choose how many columns you want to appear on your Board.  If you leave this blank, the amount of columns will adjust to the screen size

Advanced Filter options

Here's an example web embed:

<script async src='https://www.tintup.com/app/dist/embedded.js'></script><div class="tintup" data-id="article_board" data-columns="" data-expand="true" style="height: 500px; width: 100%;" data-personalization-id="1095729" data-infinitescroll="true"></div>

Just copy this embed into your website code and that's it.

Top tip: If you want two embeds on the same webpage, delete the second <script async src='https://www.tintup.com/app/dist/embedded.js'></script> from the code so it works correctly.

How to embed your board in Shopify? 

If your board is not rendering correctly on your Shopify site, it is often due to theme-level CSS conflicts that inadvertently hide the platform's container elements. You can resolve this by force-enabling the display properties using one of the two methods below.

Option A: Global Theme Override

The quickest way to ensure the TrueLoyal container renders properly is to apply a global override to your theme's stylesheet.

Add the following snippet to your theme CSS:

.tintup {
   display: initial !important;
}

Option B: Targeted Board Override

If Option A does not resolve the issue; often due to stricter specificity rules within your specific Shopify theme, you can target your specific TrueLoyal board directly.

Add the following snippet to your stylesheet, ensuring you replace YOUR_BOARD_ID with your actual board ID (found in your TrueLoyal dashboard):

div[data-id="YOUR_BOARD_ID"] {
   display: initial !important;
}

Where to Add This Code in Shopify

According to standard Shopify theme architectures, these custom styles should be placed in your primary stylesheet:

1. Log into your Shopify Admin panel.

2. Navigate to Online Store → Themes.

3. Click the ellipsis (...) next to your active theme and select Edit Code.

4. In the left-hand sidebar, expand the Assets folder.

5. Locate your main stylesheet (typically named theme.css, base.css, or custom.css).

6. Scroll to the very bottom of the file, paste your chosen code snippet, and click Save.

Note: We highly recommend trying Option A first. If the platform container remains hidden, proceed to Option B with your specific board ID substituted in.

Where is your Board embedded?

1. Go to your Board list
2. Click on ... next to the Board that you want to look at
3. Click on Embed Locations
4. The pop-up on the right-hand side will show you a list of where your Board is embedded.

If you run into any issues embedding your Board, please don’t hesitate to contact Technical Support at support-advocacy@trueloyal.com.