The Design Manager

In this article:


    Customize the design and create your own look

    In Webshop > Design the shops design manager is located. Here, you can customize exisiting designs and explore the Design Store, where you can choose between a range of designs.


    Screenshot of admin

    1. Your active design is used on the storefront. Active designs are always located at the top of the design manager. If you have extra sites, more than one design can be visible in this section.
    2. Customize and manage the design in question (read more in the section: How to).
    3. Add a new design by visiting the Design Store. Read more about the Design Store here
    4. Your template library: Your library contains either copies of existing designs, other designs from the Design Store, or designs that you have imported. These designs are located in the bottom of the Design Store.

    How to

    Each design has different features that are either visible from the overview or accessed via the function buttons at the bottom of the design:


    Screenshot of admin

    1. Titel: The title of the design in question. You can edit the title via the menu Actions (see the section below)
    2. Characteristics: The image makes it easier to recognize the designs.
    3. Name: The name of the selected design (not to be confused with the title at the top of the design). This is practical for discerning which design a customization is based on.
    4. Status for updates: States whether the code of the designfiles has been edited (see more in the section Good to know).
    5. Customize: Customize the design of the shop; insert a logo, change the fontsand colors, edit the cookie settings etc. This section will not affect "Status for updates" - although you need to be aware of custom Javascript and CSS.
    6. Actions: You can perform a range of actions that we will review in the section Actions below.

    Actions

    Click Actions to expand the drop-down list:

    Screenshot of admin

    1. Preview: The function is used to view the design in question. This is especially useful if you need to see what a deactivated design would look like on the storefront without needing to activate it.
    2. Rename: Specify an optional title. With individual titles, you can differentiate between active designs across sites, i.e. if you have multiple designs or if you customize different versions of deactivated designs.
    3. Duplicate: You can create a copy of the design as a backup, or if you wish to customize a copy instead of the active design.
    4. Export: Export the design. Exported designs are saved as a ZIP-file. This function can be used to transfer designs between shops.
    5. Edit translations: Edit texts that is specific to the design in question. Premium designs typically have more specific texts included than free designs. If the design does not have any translations, this menu item will not appear.
    6. Change design: Switch your design to another design from the design manager. If you don't have access to other designs, you can add them through the Design Store. Read more in this article. Note: This function is only available on active designs.
    7. For delevopers
    8. Insert CSS: CSS is a coding language that can be used to change the visual layout of your shop. This section requires programming experience. Read more about inserting CSS here.
    9. Insert Javascript: Javascript is a programming language that can be used to add functionality to your shop. This section requires coding experience. Read more about adding Javascript here.
    10. Edit files/strong>: This section allows you to edit directly in the shop's design files and requires coding experience. Read more about editing the design files her.

    Remove: Inactive designs, the ones at the bottom of the design manager, also has the option to remove the design in question. You can only remove designs that are not currently in use.

    Customize your design

    Click Edit to edit the logo, colors and settings for the selected design.

    Good to know

    Edited design files do not automatically receive updates because we do not wish to override custommade changes to the code.
     

    Hover over Partially receiving updates to view a list of files that do not recieve updates:


    Screenshot of admin

    Note: This overview will only show a selection of the files that do not receive updates if you have a lot of edited files; this is indicated with the dialogue "and 5 others..." etc. To view all the edited files, go to Actions > Edit files. All edited files will be marked by a "(C)", Custom.

    Useful links