Increasing Page Margins Without Affecting Other Pages

Store Design
,

Topic summary

A user needed to add 3rem left and right margins to a specific mobile page (care guide) without affecting other pages or the header/footer.

Solution provided:

  • Add custom CSS code to the theme.liquid file, placed before the </body> tag
  • Use Shopify’s Liquid templating to target only the specific page using {% if page.handle == 'care-guide' %}
  • Include CSS styling within this conditional block to apply margins exclusively to that page

Outcome:
The solution successfully resolved the issue. The user confirmed it worked perfectly, allowing mobile margins to be adjusted on the care guide page without impacting other site elements.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I would like to increase the margins of a specific page on mobile as I don’t like how close the text is to the edge.

I would like to add left and right margins of 3rem but don’t know how to go about doing that without affecting other pages or the header/footer on my website.

Page URL: https://solaque.co.uk/pages/care-guide

If anyone could help with achieving this, it would be greatly appreciated.

Thanks,
Aaron.

1 Like
2

Hi @Aaron-Mihell

TYRy this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “theme. Liquid” file. Find the tag and paste the code below before the tag.
{% if page.handle == 'care-guide' %}

{% endif %}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
3

Thank you. That worked perfectly.

4

Welcome! Would you mind hitting ‘like’ as well? Thanks!

1 Like