My issue is that I can’t add ‘Starting at’ before the price of a product. If I try to update the CSS directly from the lower window on the same screen, doesn’t permit me to save the session with the changes made, apparently it doesn’t let me use the keyword ‘content’. I probably need to do it from the code editor, but I’m having trouble making changes only to that specific section. For example, I’m not interested in modifying the ‘Featured Collection’ section. My wb is this.
Hello,
You can add a ‘Custom Liquid’ section just after the ‘Collection page’ section then enter the following code in the custom liquid:
Best regards,
Thank you for your help! And what if I wanted to make the same identical modification but regarding the ‘Related Product’ section of the product page? Im facing the same issue..
If possible could you please tell me also how you determine the correct section to modify? For example how did you find: #CollectionAjaxContent?
You can use your browsers inspector tool, simply right-click on the desired section and choose ‘Inspect’ from the contextual menu.
Within the inspector, you’ll encounter the source code of the page, highlighting the selected element. While the selected element may be any within that section (e.g., <div…>, <img…>), you must navigate upward to identify the initial node of that section.
Hint:- as you move upward, you’ll see the respective element’s content will highlight in the main window, you need to stop when you see whole section get’s highlighted, then look for code resembling as below:
This code represents the parent node of the section, and you can utilize its id in CSS to target elements solely within this specific section. For instance:
#shopify-section-template--20075738366283__product-recommendations .grid-product__price::before { content: "Starting at "; font-weight: bold; }This CSS code targets elements within the mentioned section instance. Explore online articles to further enhance your understanding of using the browser’s inspector tool.
Best regards,