Product Page

Estimated reading: 4 minutes

Flux theme introduces an innovative approach to product page design, offering layout options that were previously unavailable. Here, you'll find detailed usage guides to help you get started.

The Flux theme introduces innovative features that allow you to design product page layouts in ways previously unavailable.

The product page is one of the most important pages in your store, and setting it up to perfectly showcase your product is essential. Most themes typically offer a two-column layout, with the product gallery on one side and product information on the other.

With Flux, you can stick to this classic layout or position product information blocks in various configurations, enabling more dynamic and engaging designs.

How it works?

Creating these layouts is simple and completely under your control. Each block within the Product Information section includes a ‘Position’ selector with three options: ‘Left,’ ‘Right,’ and ‘Under Gallery.

‘Left’ and ‘Right’ refer to the block’s position relative to other blocks (not the gallery), while ‘Under Gallery’ places the block beneath the gallery.

Below are a few examples demonstrating how to create various layouts using the ‘Position’ selector.

Classic Two-column layout

If the gallery is set to ‘Left’ in the ‘Product Information → Desktop Media Position’ setting, you can arrange all the information blocks in a single column to the right of the gallery. To do this, simply set the ‘Position’ selector for all blocks to either ‘Left’ or ‘Right’. This will create a classic two-column layout.

Even with the typical two-column layout, you can position some information below the gallery by using the ‘Under Gallery’ option for certain blocks.

Three-column layout

Many well-known online stores use three-column layouts for their product pages to organize product information and enhance the user experience.

With Flux, you can easily achieve this by setting your Product Information blocks to ‘Left’ and ‘Right.’ Blocks set to ‘Left’ will stack in the left information column, while blocks set to ‘Right’ will stack in the right column.

Tip: start by setting up the left column with the most important information, such as the product title, pricing, etc. Then, add the blocks for the right column and set their ‘Position’ to ‘Right.’

As with the two-column layout, you can also add blocks underneath the gallery if desired.

One-column layout

If you’d like to have a single-column layout on your product page, you can easily achieve that.

Simply set the ‘Position’ for all your Product Information blocks to ‘Under Gallery,’ and adjust the ‘Product Information → Product Gallery Width’ to 100%.

Mobile layout options

By default, in the mobile layout, elements are stacked vertically in the order they appear from left to right in the desktop view. In practice, this means the gallery appears at the top, with the other columns stacked below it.

In a three-column layout, you might choose to place elements like the product buy buttons and payment icons in the third (right) column, while keeping them near the top on mobile.

Desktop:

Mobile:

Fortunately, the two most common blocks for this scenario—’Buy Buttons’ and ‘Payment Icons’—include an option to position them separately on mobile.

Here’s how it works:

  1. Position the ‘Buy Buttons’ block where you want it to appear on the desktop. Enable ‘Hide block on mobile,’ and ensure ‘Hide block on desktop’ is disabled.
  2. Add a second instance of the ‘Buy Buttons’ block. In its settings, disable ‘Hide block on mobile’ and enable ‘Hide block on desktop.’
  3. Switch to the mobile view in the Shopify customizer, and position the second instance of the ‘Buy Buttons’ block where you’d like it to appear on mobile.

Other mobile options

In the ‘Product Information’ settings, you’ll find additional options under ‘Mobile Layout.’

The ‘Under Gallery Content Position‘ setting allows you to define where blocks set to display under the gallery will appear on mobile.

  • If ‘First’ is selected, these blocks will appear directly beneath the gallery, above the other column(s).
  • However, if you’ve placed less important information in this section on the desktop layout, having it at the top on mobile may not be ideal. In this case, selecting ‘Second’ will place these blocks after the column(s).

There’s also a ‘Gallery Layout’ option, which provides three layout choices for the gallery on mobile:

  • 2 Columns: Displays the gallery in two columns.
  • Show Thumbnails: Displays additional product images as thumbnails.
  • Hide Thumbnails: Hides additional product images.

Articles

Share this Doc

Product Page

Or copy link