Theme Editor overview

The Theme Editor helps you customize the look and layout of your BurgerShop storefront without coding.

With the upgraded Theme Editor, you can manage page sections, edit content, adjust design settings, preview different pages, and customize global storefront styles from one place. This makes it easier to build a storefront that matches your brand and provides a better shopping experience for customers.

On this page

• Access the Theme Editor
• Understand the Theme Editor layout
• Switch between pages
• Manage sections
• Add a new section
• Edit section content
• Edit section design
• Hide, show, or remove a section
• Use general settings
• Preview desktop and mobile layout
• Save and publish changes

Access the Theme Editor

You can open the Theme Editor from your BurgerShop admin.

Steps:

1. Log in to your BurgerShop admin.
2. Go to Online store.
3. Select Themes.
4. Open the theme you want to customize.
5. Click Customize or open the theme editor.

After opening the Theme Editor, you can start editing your storefront layout and design.

Understand the Theme Editor layout

The Theme Editor includes three main areas:

The preview area updates as you adjust sections and settings, helping you understand how your changes will appear on the storefront.

Switch between pages

You can use the page selector at the top of the Theme Editor to edit different page templates.

Available page templates may include:

• Home
• Product detail
• Collection detail
• Checkout page

Each page can have different sections and settings. For example, the homepage may include slideshow, collection list, featured collections, promotion boxes, and gallery sections, while the product detail page may include product information and product-related sections.

Steps:

1. Open the page dropdown at the top of the editor.
2. Select the page you want to edit.
3. Update the sections or settings for that page.
4. Click Save after making changes.

Manage sections

The Sections tab lets you control the structure of the selected page.

Sections are content blocks that appear on your storefront, such as:

• Announcement Bar
• Header Bar
• Slideshow
• Collection List
• Featured Collection
• Promotion Box
• Gallery
• Footer

Sections are grouped by page area, such as Header, Main content, and Footer.

Note
The list of available sections may vary by page template. Some sections can only be used on specific pages.

Add a new section

You can add new sections to customize your page layout.

Steps:

1. In the left sidebar, open the Sections tab.
2. Scroll to the area where you want to add content.
3. Click Add section.
4. Select the section type you want to add.
5. Drag the section to the desired position if needed.
6. Configure the section content and design.
7. Click Save.

Note
Some areas, such as the store header and footer, may have limited editing options. You may not be able to add every section type to these areas.

Edit section content

Each section has its own Content settings. These settings control what appears inside that section.

For example, in a Featured Collection section, you can edit:

• Collection
• Heading
• Subheading
• Text alignment
• Button label
• Button style

In a Slideshow section, you can manage slide items and update the visual content shown in the banner area.

Steps:

1. Click the section you want to edit.
2. Open the Content tab.
3. Update the available fields.
4. Review the preview area.
5. Click Save.

Edit section design

Some sections include a Design tab. This tab lets you adjust how the section looks on the storefront.

Depending on the section, design settings may include:

• Layout
• Spacing
• Image display
• Text position
• Button style
• Colors
• Section appearance

Use these settings to make each section match your brand style and improve the storefront layout.

Hide, show, or remove a section

You can control whether a section is visible on your storefront.

Hide or show a section

1. Go to the Sections tab.
2. Find the section you want to hide or show.
3. Click the eye icon next to the section name.
4. Save your changes.

Hidden sections will not appear on the storefront, but you can show them again later.

Remove a section

1. Click the section you want to delete.
2. Scroll to the bottom of the section settings.
3. Click Remove section.
4. Confirm the action if required.
5. Click Save.

Important
Removing a section deletes it from the page layout. If you only want to temporarily hide a section, use the eye icon instead.

Use general settings

The General setting tab controls global design settings for your storefront.

These settings usually apply across multiple pages, not only the page you are currently editing.

General settings may include:

• Logo: Upload or update your store logo.
• Typography: Adjust font styles for your storefront.
• Color: Set your brand colors.
• Button: Customize button appearance.
• Layout: Manage global layout behavior.
• Product card: Adjust how products appear in product grids.
• Product badge: Customize labels such as sale badges.
• Language & Currency: Manage storefront language and currency display.
• Social media: Add social media links.
• Freeship threshold: Display free shipping conditions if applicable.
• Other settings: Configure additional storefront options.
• Cart display: Adjust cart-related display settings.
• Custom CSS: Add custom styling if needed.

Recommendation
Start with logo, colors, typography, buttons, and product card settings first. These settings have the biggest impact on how your store looks.

Preview desktop and mobile layout

You can preview your storefront on different device views before publishing.

Steps:

1. Use the device icons in the top bar.
2. Select desktop or mobile preview.
3. Review the storefront layout.
4. Adjust spacing, images, and content if needed.
5. Save your changes.

Always check both desktop and mobile views before publishing because customers may visit your store from different devices.

Save and publish changes

After editing your theme, click Save to keep your changes.

Depending on your theme status, you may also need to click Publish to make the updated theme live on your storefront.

Save

Use Save when you want to keep your changes in the editor.

Publish

Use Publish when you are ready to apply the updated theme to your live store.

Tip
Review your homepage, product page, collection page, cart, and checkout page before publishing major design changes.

Next steps

After setting up your theme, review the storefront as a customer. Check your homepage, product pages, collection pages, navigation, cart, and checkout flow before sending traffic to your store