Testing instructions

Set up

  1. Accept invite and log in to test store: https://admin.shopify.com/store/section-studio-review/

  2. Click Studio section to open app dashboard.

A. Browse sections

  1. In the app navigation, click Sections to open the section library page.

  2. Search and sort sections.

  3. Click Details to open a section details page.

Available sections

  • Announcement carousel

  • Announcement scroller

  • Collection list media

  • Collection list hero

  • Hero gallery

  • Media with details

  • Shoppable hero

C. Install section to theme

On the section details page:

  1. Click Install.

  2. Select a theme to install the section. A popup help modal will appear.

  3. Click Customize theme to open the theme editor or go to Online store in the Shopify admin to open the theme.

D. Add section

After installing a Studio section, it will be available in the section list of the theme editor.

  1. Click Add section in the theme editor's left side panel.

  2. Find and select an installed Studio section. All Studio sections appear in their own category and start with a ✳︎ symbol.

E. Customize section

Studio sections are customized just like any other theme section.

  1. Click the Section to edit section settings.

  2. Add Blocks (when available) and click them to edit block settings.

F. Edit Global styles

Global style settings apply default styles to all Studio sections added to the theme.

  1. Find the Section Studio • Global styles section in the editor side panel, below the template sections.

  2. Click the nested blocks to edit style settings for Fonts, Colors, Buttons, Icons, Borders and styles, and Layout and spacing.

Global styles test environment

When you open and edit global styles settings, you can preview your changes in the Global styles test environment, which appears in the editor preview.

  1. Click the Section Studio • Global styles section to open settings.

  2. Disable the Global styles test environment before publishing your theme.

Layout and spacing

Change default width, margins, and padding

Colors

Select colors for different elements of your sections, including General colors, Button colors, and Overlay colors used for media with overlay text.

You can also edit 2 color schemes to apply to sections in individual section settings.

Fonts

Select fonts and text styles for headings, body, subheadings, badges, and prices.

Buttons

Change fonts, borders, padding, and style for all buttons.

Icons

Change the size and scale of all icons.

Border and styles

Change corner radius, border, and shadow settings for different sized elements.

G. Manage sections

On the dashboard home, all installed Studio sections appear under Installed sections.

Select a theme to view sections installed to that theme.

H. Uninstall sections

Go to Settings and click Delete data.

Last updated

Was this helpful?