The Descriptions Studio app embed
The Descriptions Studio app embed adds the app functionality to your online store.
You can activate, deactivate, preview, and customize the app embed through the theme editor.
Descriptions Studio does not add, change, or remove any theme code
All app functionality is provided via lightweight JavaScript and CSS files that are kept completely separate from the theme.
On this page
Activate the app embed
To use Descriptions Studio on your online store, you need to activate the app embed in your current theme.
To activate the app embed:
-
From your Shopify admin, go to Online Store > Themes.
-
Find the theme that you want to edit, and then click Customize.
-
From the theme editor page selector, select a product template (eg Products > Default product).
-
On the sidebar, click the App embeds icon .
-
Select the Descriptions Studio app embed.
-
Beside the Descriptions Studio app embed, click the toggle to activate it.
- Optional
View and customize the settings for the app embed by clicking the expand icon next to the app embed name.
-
Click Save.
Deactivate the app embed
To deactivate the app embed:
-
From your Shopify admin, go to Online Store > Themes.
-
Find the theme that you want to edit, and then click Customize.
-
On the sidebar, click the App embeds icon .
-
Select the Descriptions Studio app embed.
-
Beside the Descriptions Studio app embed, click the toggle to deactivate it.
-
Click Save.
Customize the app embed
To customize the app embed:
-
From your Shopify admin, go to Online Store > Themes.
-
Find the theme that you want to edit, and then click Customize.
-
From the theme editor page selector, select a product template (eg Products > Default product).
-
On the sidebar, click the App embeds icon .
-
Select the Descriptions Studio app embed.
-
Click the expand icon next to the app embed name to view and customize the settings for the app embed.
-
Click Save.
The app embed settings
The app embed settings affect the way that the app functions on your online store.
Description selector
The product description is the content that you enter in the Description area on the product details page in your Shopify admin.
On your online store's product pages, snippets show in the same location as the product description, or in a fallback location if the description can't be found.
If the product description can't be found, you can enter a CSS selector in the Description selector field to identify it. The selector should target the parent element of the product description content.
For example, suppose your theme renders the product description with the following code:
<div class="product-description">
{{ product.description }}
</div>To identify the description, you could enter .product-description.
If no element is selected by the selector, then snippets will not show.
Load Descriptions Studio
You can select from the following options to control when the app code runs in your store:
- Immediately — Run the app code automatically as soon as possible. This is usually when the DOMContentLoaded event fires, but it can be delayed by code from the theme or other apps, especially if that code is render blocking.
- After the page loads — Run the app code automatically when the load event fires.
- With custom JavaScript — Run the app code manually with custom JavaScript.
Custom JavaScript
You can enter custom JavaScript code to change the app behaviour.
Custom CSS
You can enter custom CSS code to change the app appearance.