How can I adjust the page width on my shop page?

Store Design
, ,
1

Hi there,

How can I change the page width from my shop page?

admintb_0-1683900000166.png
admintb_0-1683900000166.png3724×1924 162 KB

2

Hi @admintb

Is your product limited to two only? Can you provide your website so we can provide a code specific for you?

3

@made4Uo It’s: www.thebasicscollection.com

4

Hi @admintb

To change the page-width in your theme, you can use the code below

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Asset folder and open the theme.css file
  3. At very end of the code, add the code below

NOTE: The code below limits the with of the section by 1200px for 950px screen size and above

@media only screen and (min-width: 950px) {
.container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
}
}
5

@made4Uo Thank you already! But the width it’s to small now. Can you please change it? :slightly_smiling_face:

Bildschirmfoto 2023-05-15 um 21.14.33.png
Bildschirmfoto 2023-05-15 um 21.14.33.png4096×1680 168 KB

6

Hi @admintb

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Noah | PageFly

7

@PageFly-Noah I only want this for the collection page.

8

Hi @admintb Please delete the code above and add the new code here, it will only work for the collection page

{% if template contains 'collection' %}

{% endif %}
9

@PageFly-Noah Thank you! But can you just correct the code… The footer will also change the width to 90px…

10

@admintb Sorry? Can you explain it more for me, please? Because 90px is really small

11

@PageFly-Noah When I adjust the width of the page, the footer moves as well.