How to customize the width for your store sections in Magento 2 Pearl Theme

The dimensions adjustment for your web store it's a real impact for your customers. It's important to create an harmony with all your store sections.

So, how you can customize these values? Nothing simpler if you follow these steps:

Step 1. Go to Admin sidebar tap WeltPixel → Pearl Theme Options → Frontend Options

! For your store's pages or elements, you can set a different width (use px or %). The Page Main should be set to 100%, all below elements refer to this value. If you set it to a different value, keep in mind that all the values below expressed in % will refer to this value and not to 100% (please, don't forget to Save Config).

 ! Below, you can see multiple examples for each element:

• Page Main Padding: 3 width examples - 0px, 80px, 0 25px. This 

• Footer: 3 width examples - 1400px, 95%, 1200px (for full width use 100%):

• Row: 3 width examples - 800px, 1020px, 1300px (Footer:1400px). You can set the 'row' class width from this value, when you call this class in any page in your store it will show the page width defined here:

• Default pages (these are pages like Checkout page, Cart Page, Login Page and other Magento default pages): 3 width examples - 1400px, 1200px, 1000px:

• CMS pages: 3 width examples - 1400px, 100%, 90%:

• Category pages: 3 width examples - 1200px, 80%, 100%:

• Product  pages: 3 width examples - 1200px, 100%, 1400px:

Step 2. Go to Admin sidebar WeltPixel → Pearl Theme Options  → Custom Header

• Below you can find 3 width examples for the Header- 1430px, 95%, 1200px:

Step 3. Go to System → Tools  → Cache Management

! IMPORTANT / RECOMMENDED:

1. After changing theme settings make sure to clear related caches: Regenerate Pearl Theme CSS, Flush Magento Cache, Clear Browser Cache (if necessary also Flush JS/CSS Cache, Flush Catalog Images Files, Flush Cache Storage)

2. Make sure you are changing the settings on the right store view, settings may be different in default config vs. storeview

3. NEW: Frontend Options now available at store view level. Use different store locale options (EN, FR, ..) when using Pearl Theme on multiple store views. If using the same language on multiple store views, you should create separate a Pearl Child Theme for each store view. If you only use a single store view no action is necessary. More details here: How to use Pearl Theme on multiple store-views