6

EPREL Label Suite

Last Update há 3 meses

Getting started with EPREL Label Suite app Adding EPREL Label Suite app block to Product, Categories, Cart pages Adding EPREL Label Suite embedded app to Categories, Cart pages(older themes) Assigning EPREL registration numbers to products and variants FAQ

Adding EPREL Label Suite embedded app to Categories, Cart pages(older themes)

This guide explains how to enable the EPREL Label Suite app embed in your Shopify theme.
This step is only required if Shopify App Blocks do not cover all the storefront cases you need. This usually happens with older themes that do not support App Blocks in all required locations, or when you need the legacy embed method for additional surfaces such as collections, search, cart, or cart drawer.

When this step is needed

You usually only need to enable the app embed when:
  • Shopify App Blocks do not cover all required storefront cases
  • your theme does not support App Blocks in one or more required locations
  • you need badges on surfaces such as collections, search, cart, or cart drawer through the legacy embed method
  • onboarding tells you to complete the Storefront Embed step
If Shopify App Blocks already cover all the locations you need, this step is not required.

Enable the app embed from onboarding

In EPREL Label Suite onboarding, open Step 4: Storefront Embed.
Choose the theme you want to edit, then click Enable app embed.
This opens the Shopify theme editor in the App embeds section.
In the Shopify theme editor:
  1. Open the App embeds section.
  2. Find EPREL Label Suite in the list.
  3. Turn the toggle on.
  4. Save your theme changes.
Once enabled, the app embed becomes active for that theme.

Important: CSS selector format

Badge positioning is done through CSS selectors.

A CSS selector is the same kind of selector used in CSS and JavaScript.
Common examples:
  • .cart-drawer → a class selector, starting with a dot (.)
  • #cart-drawer → an ID selector, starting with a hash (#)
  • tr.cart-items__table-row → an element plus a class selector
  • td.cart-items__details → an element plus a class selector
Use the selector exactly as it appears in your theme structure.

Tips for choosing good selectors

Choose selectors that are:
  • stable across page reloads
  • specific enough to match the correct element
  • not overly long if a shorter stable selector works
  • based on theme structure, not temporary state classes
Avoid selectors based on:
  • auto-generated dynamic class names
  • temporary open-state classes if a stable parent exists
  • deeply fragile full paths when a short selector is enough

Collection, Search, Cart

For each of these surfaces, you usually need to provide only 2 CSS selector properties:
  1. Product card CSS selector
  2. Badge container CSS selector
These selectors tell the app:
  • how to find each product card or cart item
  • where inside that item the badge should be inserted

How to find them

  1. Open a collection page or search results page.
  2. Right-click one product card and choose Inspect.
  3. Find the outer repeated card element.
  4. Convert its class or ID into a CSS selector.
  5. Then find the inner content area near the title and price.
  6. Use that as the Badge container CSS selector.

1. Product card CSS selector

This should target each individual product row or item inside the cart drawer.
From the screenshot, a suitable example is:
This tells the app to treat each cart row as one product item.
This selector works well when each row contains the product data, price, quantity controls, and link.

2. Badge container CSS selector

This should target the place inside each cart drawer item where the badge should be inserted.
From the screenshot, a suitable example is:
This places the badge inside the product details cell, near the product name and price.
That is usually the best location for visibility and layout stability.

Cart drawer

For the cart drawer, you need to fill in 3 CSS selector fields:
  1. Cart drawer container CSS selector
  2. Product card CSS selector
  3. Badge container CSS selector
These fields are used to tell the app:
  • where the cart drawer starts
  • how to find each product inside the drawer
  • where inside each product item the badge should be inserted

1. Cart drawer container CSS selector

This should target the outer cart drawer container. 
It limits all cart-drawer product searches to inside the drawer only.
From this screenshot, a suitable example is:
This is a class selector, so it starts with a dot.
Other themes may use selectors such as:

2. Product card CSS selector

This should target each individual product row or item inside the cart drawer.
From the screenshot, a suitable example is:
This tells the app to treat each cart row as one product item.
This selector works well when each row contains the product data, price, quantity controls, and link.

3. Badge container CSS selector

This should target the place inside each cart drawer item where the badge should be inserted.
From the screenshot, a suitable example is:
This places the badge inside the product details cell, near the product name and price.
That is usually the best location for visibility and layout stability.

Troubleshooting

The badge does not appear


Check that:

  • the cart drawer container selector matches the actual open drawer
  • the product card selector matches each cart item
  • the badge container selector exists inside each matched product item
  • the cart items include enough product data for matching
The badge appears in the wrong place


Use a more specific Badge container CSS selector.

For example, instead of targeting the whole row, target the product details area.


The selector matches too many elements


Make the selector more specific.

For example:
  • use tr.cart-items__table-row instead of just .cart-items__table-row
  • use td.cart-items__details instead of a broader wrapper

Was this article helpful?

0 out of 0 liked this article