How to change the width of a custom page in dawn theme

Hello guys,

I am making a custom page but i am not able to find any solutions on how to change the width of custom page. I want to add 4 products or 5 products in one row but unable to do so cause of page width. https://mysticgleam.com/pages/crystal-encyclopedia

1 Like
  • Here is the solution for you @mysticgleam
  • Please follow these steps:
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it

  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

@mysticgleam ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:


Result

If it helps you, please like and mark it as the solution.

Best Regards :heart_eyes:

Hello @mysticgleam

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

section#shopify-section-template--20699973353760__main .page-width.page-width--narrow { max-width: 100% !important; }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

Here is the solution

To change the width of your custom page and fit 4-5 products per row, try setting a custom CSS rule. You can adjust the container width and set a flexible grid for your products:

.custom-page {
width: 100%; /* or a specific width */
max-width: 1200px; /* adjust as needed */
margin: 0 auto; /* center the content */
}

.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* Change 4 to 5 for five products */
gap: 20px; /* Adjust gap between products */
}

Make sure your container element uses the .custom-page class, and the products are inside a .product-grid wrapper. Adjust values to fit your design.

I just want to change one page, apply this code change the width of all pages on my site.

1 Like

This code is not working

Could you show me the code you added to your theme.liquid file? Or you could try adding it to above tag like this

{% if request.path == '/pages/crystal-encyclopedia' %}
  
{% endif %}

Can you try this code @mysticgleam

1 Like