Demo & Settings Data

To apply the product page layout you want for your store, there are 2 methods to do.

01: Apply Preset data for Product Layouts:

1. Please click the file to download the corresponding "json" of the layout you want.

2. Download the selected preset.

3. Open downloaded file in the text editor.

4. SELECT ALL and COPY.

5. From your Shopify admin, go to Themes -> Actions -> Edit Code.

6. Find folder Templates -> Open file product.json -> SELECT ALL and DELETE. PASTE the copied preset from the external file.

Product Demo

1. Product Layout 01 - Default.
2. Product Layout 02 - Full Width
3. Product Layout 03 - Grid View
4. Product Layout 04 - Slider
5. Product Layout 05 - Gallery
6. Product Layout 06 - Left Thumb Image
7. Product Layout 07 - Right Thumb Image
8. Product Layout 08 - Left Sidebar
9. Product Layout 09 - Right Sidebar

Presets For Product

Product	Json (with .txt format)
Layout 01	product-default.txt
Layout 02	product-full-width.txt
Layout 03	product-grid-view.txt
Layout 04	product-slider.txt
Layout 05	product-gallery.txt
Layout 06	product-left-thumb.txt
Layout 07	product-right-thumb.txt
Layout 08	product-left-sidebar.txt
Layout 09	product-right-sidebar.txt

02: Choose Product Page Layout in Theme Editor:

• From your Theme Editor -> Theme Settings -> Multiple Layouts -> Choose product page you want here:

After that, follow this instruction to set up in editor of product page layout which can show up the same design from the page you see on demo.

1. Product Full Width:

From the editor panel of the Product Information:

• Under General, choose Layout: 1770px.

• For Main Image, select Layout: Style 2.

• For Thumbnails, choose Layout: No Thumbnail.

• Under Media, select Portrait.

• For Subtotal, disable Subtotal if desired.

• Under Tabs, choose Popup for Desktop and Mobile.

• In the Share block under Product Information, select Style 3.

1. Product Grid View

From the editor panel of the Product Information:

• Under General, choose Layout: 1770px.

• For Main Image, select Layout: Style 3.

• For Thumbnails, choose Layout: No Thumbnail.

• Under Media, select Portrait.

• For Subtotal, disable Subtotal if desired.

• Under Tabs, choose Popup for Desktop and Mobile.

• In the Share block under Product Information, select Style 3.

1. Product Gallery

From the editor panel of the Product Information:

• Under Thumbnail, choose Layout: No Thumbnail.

• Under Tabs, choose Popup for Mobile.

1. Product Left Thumbs

From the editor panel of the Product Information:

• Under Thumbnail, choose Layout: Layout 1(Left Thumbnail).

• Under Tabs, choose Vertical for Desktop and Popup for Mobile.

1. Product Right Thumbs

From the editor panel of the Product Information:

• Under Thumbnail, choose Layout: Layout 2(Right Thumbnail).

• Under Tabs, choose Vertical for Desktop and Popup for Mobile.

1. Product Left Sidebar

From the editor panel of the Product Information:

• Under Sidebar, choose 'Show Sidebar' and 'Enable Sticky.' Turn off 'Show Collapsible Block' and select 'Position: Left'.

• Under Tabs, choose Popup for Mobile.

• In the 'Add block' section under Product Information, add blocks for 'Sidebar Categories' and 'Sidebar CMS Image.'

1. Product Right Sidebar

From the editor panel of the Product Information:

• Under Sidebar, choose 'Show Sidebar' and 'Enable Sticky.' Turn off 'Show Collapsible Block' and select 'Position: Right'.

• Under Tabs, choose Popup for Mobile.

• In the 'Add block' section under Product Information, add blocks for 'Sidebar Categories' and 'Sidebar CMS Image.'

1. Product Horizontal Tabs No Sidebar

From the editor panel of the Product Information:

• Under General, choose Layout: Full Width.

• For Main Image, choose Show Arrows for Desktop.

• For Thumbnails, choose Layout: No Thumbnail.

• In the Breadcrumb block under Product Information, choose Center for Alignment.

• Move the blocks in the Product Information section as shown in the last image.

This method is difficult to follow than the first method because Ella has many product pages, we write theme settings with lots of options to choose. You need to set up correctly to show the same page design as our demo.