Already found an answer.
If anyone experiencing the same issue, just use this code instead:
{% if template == 'product' %}
{% endif %}
Topic summary
Main issue: Reduce the left whitespace and the gap between images on a Dawn theme product page (Shopify).
What was tried and confirmed:
- Adding custom CSS in theme.liquid (before or ) to decrease image spacing worked for the original poster.
- Additional CSS to adjust left padding (e.g., targeting product-info .page-width with padding-left) addressed the follow-up request.
New complication and fix:
- Another user reported the CSS also affected Featured Products on the homepage. A targeted selector for a specific collection/slider was suggested but didn’t resolve it.
- Final solution: Scope the CSS to product pages only using a Liquid condition wrapper so it doesn’t impact other templates:
{% if template == ‘product’ %}
/* your CSS changes here */
{% endif %}
Notes:
- Dawn is the default Shopify theme; theme.liquid is the main layout file; Liquid is Shopify’s templating language.
- Screenshots were shared to show spacing changes but are not required to apply the fix.
Status: Resolved. Use page-scoped (product-only) CSS to reduce spacing and left padding without affecting other sections.