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

Shopify Discussion
,
1

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

mysticgleam_0-1726237915303.png
mysticgleam_0-1726237915303.png1564×1133 188 KB

1 Like
2
  • 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:

BSSTekLabs_0-1726238261985.png
BSSTekLabs_0-1726238261985.png1899×908 274 KB

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

@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

BSSCommerceB2B_0-1726238621540.png
BSSCommerceB2B_0-1726238621540.png1876×791 260 KB

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

Best Regards :heart_eyes:

4

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; }

Tech_Coding_0-1726238306956.png
Tech_Coding_0-1726238306956.png1310×472 417 KB

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

5

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.

6

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

1 Like
7

This code is not working

8

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

BSSCommerceB2B_0-1726289961152.png
BSSCommerceB2B_0-1726289961152.png1037×244 13.8 KB

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

Can you try this code @mysticgleam

1 Like