using liquid code i added the name of the current tag to display on the collection page, but i encountered the fact that the name is displayed with 0 indent on the left edge. How can i increase the indent from the left margin by 40px?
Topic summary
Goal: Indent the displayed current tag on a Shopify collection page by 40px using Liquid/CSS.
Context: The store URL was shared for review. Liquid is Shopify’s templating language; CSS margin/padding control spacing.
Proposed fixes:
- Add custom code in theme.liquid above the tag. The exact code was not visible in the post; a screenshot was referenced.
- Add CSS in base.css with a desktop media query targeting a specific section class and setting padding-left: 40px.
- Alternative CSS in theme.css/base.css using margin-left: 40px on the same section class.
Outcome: The reported solutions did not work for the requester.
Notes:
- The two CSS answers rely on a very specific section class (e.g., .section-template–17520170467503__custom_liquid_WtfAeT-padding). If this selector does not exist on the target element, the rules won’t apply.
- Key details are missing: the exact HTML/element that renders the tag name and the full, correct class/selector. The first reply’s code snippet is not shown; images were provided to illustrate results.
Status: Unresolved; further clarification of the correct selector/markup is needed.
1 Like
Hey @Bezpallko
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
Hey @Bezpallko
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.
@media screen and (min-width: 750px) {
.section-template--17520170467503__custom_liquid_WtfAeT-padding {
padding-left: 40px !important;
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hi @Bezpallko
- Go to Online Store → Theme → Edit code.
- Open your theme.css / based.css file and paste the code in the bot
.section-template--17520170467503__custom_liquid_WtfAeT-padding {
margin-left: 40px !important;
}
If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!
does not work