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:
Please click the file to download the corresponding "json" of the layout you want.
Download the selected preset.
Open downloaded file in the text editor.
SELECT ALL and COPY.
From your Shopify admin, go to Themes -> Actions -> Edit Code.
Find folder Templates -> Open file product.json -> SELECT ALL and DELETE. PASTE the copied preset from the external file.
Product Demo
Product Layout 01 - Default.
Product Layout 02 - Full Width
Product Layout 03 - Grid View
Product Layout 04 - Slider
Product Layout 05 - Gallery
Product Layout 06 - Left Thumb Image
Product Layout 07 - Right Thumb Image
Product Layout 08 - Left Sidebar
Product Layout 09 - Right Sidebar
Presets For Product
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.
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.
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.
Product Gallery
From the editor panel of the Product Information:
Under Thumbnail, choose Layout: No Thumbnail.
Under Tabs, choose Popup for Mobile.
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.
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.
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.'
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.'
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.
Last updated
