Let's Find The Wrapper:

• Fine-Tuning
• Identifying the Wrapper

In the vast majority of Shopify themes, the article wrapper class is designated as ".rte". However, if you find that the Table of Contents (TOC) isn't functioning seamlessly on your store, it's likely that your chosen theme employs a different wrapper class.

To tailor the TOC to your theme:

1. Determine the Unique Wrapper Class: Delve into your theme's code to identify its specific article wrapper class.
2. Navigate to the ETOC Dashboard: Once there, locate the input field labeled "Post Wrapper".
3. Input the Correct Class: Remember to prefix the class name with a dot. For instance, if your class name is "example", you'd enter ".example".
4. Seal the Deal: Before exiting, ensure you save your changes to lock in the new settings.

By following these streamlined steps, you can ensure a flawless TOC experience, tailored perfectly to your Shopify theme.

In many web designs, the content of an article is encapsulated within a specific container, separate from other elements like the title, metadata, or comments. This container, often referred to as the "article body wrapper," is essential for targeted styling or scripting. Here's how you can identify it:

1. Access the Article in Your Browser:

Navigate to the specific article page you wish to inspect.

2. Utilize Developer Tools:

• Google Chrome, Microsoft Edge, or Brave: Right-click on a portion of the article body and select Inspect or use the shortcut Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac).
• Firefox: Right-click on a portion of the article body and choose Inspect Element or use the shortcut Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac).
• Safari: Ensure the Developer menu is active (Preferences > Advanced > Show Develop menu in menu bar). Then, right-click on a portion of the article body and pick Inspect Element or press Cmd + Option + I.

3. Navigate to the Article Body Element:

Within the Elements tab of the developer tools, you'll observe the page's HTML structure. As you hover over the elements in the developer tools, corresponding sections on the web page will be highlighted. Look for a container that wraps around just the main content of the article, excluding elements like the title or metadata.

4. Spot the Class or ID:

Once you've pinpointed the article body wrapper, identify its class or id attribute. This will be crucial for any targeted modifications. An example might resemble:

<div class="article-content"> ... </div>

In this instance, "article-content" is the class name of the article body wrapper.

5. Handling Multiple Classes:

It's not uncommon for elements to have several class names, separated by spaces. This indicates that the element is associated with all those classes. When targeting, you might need to use the most specific or unique class to ensure precise modifications.

6. Final Thoughts:

The exact class or ID and the overall structure can differ based on the website's design or the CMS in use. When implementing changes targeting this wrapper, always test thoroughly to prevent unintended alterations to the page. If you're working within a team or on a client's site, it's also a good practice to communicate or document any changes made for clarity.

By following these steps, you can effectively identify and work with the article body wrapper, ensuring that any modifications or enhancements are applied accurately and effectively.