Manage Website Page Options in DecoNetwork: Header, Body & Page Settings

The Page Options settings let you configure global display options for your website pages. These settings control how content is spaced, how elements are displayed, and what appears in the header across your entire site.

In This Article

• Prerequisites
• Why Configure Page Options?
• How to Access Page Options
• Body Elements
• Page Elements
• Header Elements
• Best Practice Tips
• Troubleshooting
• FAQs
• Additional Resources

Prerequisites

Why Configure Page Options?

• Control how your website content is displayed globally
• Improve layout consistency across all pages
• Optimize performance and image loading
• Customize header elements for better usability and accessibility

How to Access Page Options

1. Go to Admin → Websites
2. Click Edit Website
3. Select Design
4. Open the Page Options tab

Body Elements

• Breadcrumbs: lets you choose whether to display or hide the breadcrumb navigation in the body of your website. The breadcrumb is the directory path of the current folder or web page.

  
• Social Sharing: lets you choose whether to display or hide the social network sharing links in the body of your website.

Page Elements

• Page Content Margin: lets you set the amount of space that is added by default outside the left and right of the borders of all page content elements within their containers.

  
  • Theme Default: this applies the default page content margin setting of the theme your website is using.
  • None: applies no margin to page content elements.
  • Small: applies a predefined small-sized margin, calculated against the width of the screen.
  • Medium: applies a predefined medium-sized margin, calculated against the width of the screen.
  • Large: applies a predefined large-sized margin calculated against the width of the screen.
  • Extra Large: applies a predefined extra large-sized margin calculated against the maximum width of the screen.

• Default Page Spacing: lets you set the amount of space that is added by default outside the top and bottom of the borders of all page content elements within their containers.

  
  • Theme Default: this applies the default page spacing setting of the theme your website is using.
  • None: applies no top and bottom spacing to containers.
  • Small: applies a predefined small-sized margin, calculated against the width of the screen.
  • Medium: applies a predefined medium-sized margin, calculated against the width of the screen.
  • Large: applies a predefined large-sized margin calculated against the width of the screen.
  • Extra Large: applies a predefined extra large-sized margin calculated against the maximum width of the screen.

• Image Quality: lets you set the image quality of all images used on your website. This setting allows you to optimize your website performance. Depending on the setting, images will be compressed to output an image quality relative to speed performance. Image compression is when information in an image file is removed to reduce its file size so that it can load faster. The higher the speed performance setting, the lower the image quality. The higher the image quality setting, the slower the performance.

  • Default
  • Highest Speed
  • Higher Speed
  • Balanced Speed/Quality
  • Higher Quality
  • Highest Quality

  This setting will apply globally to all listing and display images on your website, i.e. images in the product listing widgets, design listing widgets, category listing widgets, Image Widget, Image Gallery Widget, Logos Widget, and widget backgrounds.

  Note that this setting will not affect the physical image size (resolution) set for the image. Image size can be set at the widget level.

Header Elements

These settings control what appears in the header of your website and how it behaves across all pages.

• Fixed Header/Floating Header (header availability and configuration depends on the chosen theme): lets you choose how your website floating header is displayed when the page scrolls down.
  • Keep header visible when the page scrolls down: Fixes the header to the top of the page when the page scrolls down.
  • Scroll the header off the page when the page scrolls down: Moves the header upwards along with the rest of the content when the page scrolls down.
• Currency selector: lets you choose whether to display or hide the currency selector.

• Language Selector: Display a language selection control in the header, allowing visitors to translate the website into their preferred language using Google Translate

  

  The language selector appears in the header, allowing customers to switch languages using Google Translate

• Shopping cart: lets you choose whether to display or hide the shopping cart.
• Search box: lets you choose whether to display or hide the search box.
• Telephone number: lets you choose whether to display or hide the contact telephone number for the store.
• Dropdown menu: lets you choose the drop-down menu style for items in the main navigation menu.

  • Simple: displays an automatically generated drop-down menu as a simple list of items.

    
  • Specify Width (System Pages): makes the drop-down menu customizable and allows you to specify its width.
  • Content Width (System Pages): makes the drop-down menu customizable and makes its width fit the content.
  • Page Width (System Pages): makes the drop-down menu customizable and makes its width the full width of the page.

  • Hide: Prevents the drop-down menu from displaying.

    If you choose any of the customizable options, you will need to save the changes to access drop-down system pages for editing.

    See the How to customize your navigation drop-down menu article for instructions on how to customize your drop-down menus.

• Dropdown menu designs: (only applicable when "Simple" is selected from the Dropdown menu options) - lets you choose whether store and/or stock designs will be available in the Designs drop-down menu.

  
  • Show Store Designs: only displays designs that have been uploaded to the store.
  • Show Stock Designs: only displays designs added from the stock design collection.
  • Show Both: displays both uploaded and stock collection designs.
• Navigation Item Overflow: lets you choose how your main navigation menu is displayed when all of the items do not fit in one row.

  • Use More: adds a "More" drop-down menu to access the additional menu items.

    
  • Wrap: carries the menu over onto a new row if all items do not fit within one row for tablet and monitor screen sizes.

Best Practice Tips

• Only enable essential header elements to avoid clutter
• Use consistent spacing for better visual balance
• Test your layout across desktop and mobile devices
• Ensure header elements fit on a single row where possible

Troubleshooting

Header items wrapping onto multiple lines

• Reduce the number of enabled header elements
• Adjust layout settings or spacing

Language selector not displaying correctly

• Refresh the page after enabling the option
• Ensure sufficient header space is available

Translations not applying

• Check that Google Translate is loading correctly
• Disable conflicting custom scripts if applicable

FAQs

Do Page Options apply to all pages?
Yes, these settings apply globally unless overridden elsewhere.

Can I control header elements per page?
Some header behaviors can be overridden in individual page settings, but most are global.

Does the language selector translate all content?
It translates visible content dynamically using Google Translate.

Additional Resources

• Header Layout
• Website Page Settings