Use These Powerful Page Builder Elements to Create Stunning Store Pages

November 4, 2021
by
Sean Flannigan

Use These Powerful Page Builder Elements to Create Stunning Store Pages

November 4, 2021
by
Sean Flannigan
Get the latest straight to your inbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Share on:

The most successful online store pages are those that include the right mix of elements that combine to help nudge shoppers to checkout.

Balancing design and functionality, your store pages can create great customer experiences that reflect your unique brand. 

But the balance is essential. Function without beauty won’t move the needle. And beauty alone won’t make up for a bad experience.

Luckily, with Shogun Page Builder, you can easily drag and drop together store pages that are both beautiful and functional. You just pull in the elements you need to create amazing pages.

In this post, we’ll highlight some important elements you can use to build stunning and high-converting store pages.

Let’s get started.

#cta-visual-pb#<cta-title>Get started with 30+ free page templates<cta-title>Start building for free with Shogun Page Builder to create a truly custom store that really converts.Get started now


The Slider element (AKA the carousel)

slider element page builder

This rockstar element gives you the ability to create sideways scrolling sections for your store pages. 

With it, you can show off a carousel of full-width images, highlight key product collections, showcase adoring customer quotes, and more.

la tierra sagrada shogun page builder slider customer quotes
La Tierra Sagrada utilizes the slider to show off social proof in the form of customer quotes

You just need to drag and drop your Slider element into place, then pull in the elements you want to include in the carousel.

In the Slider element menu, you have some customization options to choose from.

You can change the number of slides in your carousel. You can also choose the visibility of slider arrows and the dots that indicate the number of slides.

There is also an auto slide function, which will automatically change slides at a set cadence.

Video element

video element page builder

You may already know how powerful video is for educating customers and driving them to convert. 

Creating powerful videos that hype your product and clearly define its smallest details helps your online store more closely approximate the in-store experience, thus reducing unnecessary returns.

under 510 shogun page builder video element product page
Under 510 keeps returns to a minimum with a video that assures the proper sizing

Adding video to your Shopify or BigCommerce pages can be limiting and difficult without the right tool. With Page Builder, you can place videos wherever you need them on your store. It’s up to you.

You can add a video that fills the screen as visitors scroll through your product page, immersing them in your video marketing and enhancing their customer experience. 

Or in the product image gallery to amplify product descriptions and images.

You simply drag the Video element into place, plug in your video URL (YouTube or Vimeo), set the desired aspect ratio, and choose how the video plays (looping, autoplay, muted, video start and stop times, and showing related videos).

shogun page builder video element

Videos from file can be added via the HTML element with the use of custom code.

The Image element

image element page builder

Shoppers love great product photography. Without great images of your wares, visitors will simply go elsewhere to buy.

Images are what allow your shoppers to imagine your product in their lives, getting a better understanding of its details in your studio photos and seeing how it would look on them (or their home) in your lifestyle photos.

Since you’ve worked so hard to put together your product photography, you don’t want to limit where you can place them. 

The Image element goes where you want it to go.

Drag the element into place, then pick an image from your computer or third-party sources like Dropbox, Google Drive, Facebook, Instagram, and Evernote. Another option is to choose beautiful open source photography from Unsplash with our new integration.

shogun page builder image element

Once you’ve chosen your image, you can even edit with our built-in image editor to crop, resize, and rotate the image to fit your purposes.

You may want to choose an alternative product photo to appear on hover, giving shoppers a more complete view of your offering with the least amount of effort. 

With Shogun, you just need to pick a hover image to make it a reality.

Further, you can enable lightbox for clicked images, overlay other elements on top of your image, or make it your page background.

For photos that are embedded in your Shopify product information, you can simply use the Product Image element within the Product Box element to display those existing images.

The Icon element

icon element page builder

A simple way to lend visual power in a minimal way is to use icons. 

The Icon element gives you instant access to Font Awesome’s library of nearly 1,000 open source icons. You are sure to find something to fit your needs.

Simply drag the element into place and type in the name of your desired icon to add it (or browse the Font Awesome library to find what you need). Customize the size, color, and alignment to get it just right.

shogun page builder icon element

Paired with simple text, icons can help you say a lot without saying much. 

Product descriptions can be amplified with icons to enumerate the benefits and features of your product in a bullet list format.

Landing pages can get a lot out of icon use as well. Highlight the unique selling points of your offering by pairing short text blocks with icons in its own section.

The Tabs element

tabs element page builder

Excellent page design comes down to the little things, like how you organize your information to maintain a healthy amount of white space. 

Structure is everything when building an online store.

With the Tabs element, you can add all the most important details about your products without overloading your shoppers. Once intrigued with your offering, they can click the other tabs to learn more, driving them closer to conversion.

pau hana surf supply tabs element shogun page builder
Pau Hana uses tabs in a visually stunning way here

#cta-visual-pb#<cta-title>Your store could look this good<cta-title>Try Shogun for free and start building out your perfect store to create a totally unique customer experience.Start building for free

This element works well when building product descriptions, landing pages, or anywhere you want to add content without adding clutter.

Just drag the element where you want it and get into the settings to add tabs and change their appearance.

shogun page builder tabs element

It’s as easy as that!

The Countdown element

countdown element page builder

Who doesn’t love a good sale? The best way to amplify the effectiveness of a sale is to use the power of urgency marketing.

The countdown timer is a simple yet powerful way to let shoppers know that they can get a deal, but only for a limited time. Act now!

To create time-limited sales banners that your customers are sure to notice, just drag the Countdown element onto your page and edit the timer based on your sale details.

shogun page builder countdown element

As with your other Page Builder elements, you can adjust the styling to reflect your brand and fit your store aesthetic. Change the color, size, font, and alignment to declare your sale the right way.

With your countdown timer in place, your customers will be scrambling to get in on your sale before it elapses.

The Accordion element

accordion element page builder

Another important structural component of successful store pages is the Accordion element

With it, you can build expandable content sections, which visitors can click into to learn more about your product and brand. 

Keep your pages looking sharp and minimalistic without sacrificing the content you know will persuade them to buy. 

hummingbird shogun page builder accordion element

Hummingbird keeps it minimal by couching ingredients in expandable accordion sections

Accordions are great for product descriptions on your product pages and to keep FAQ pages tidy yet content-rich.

Adding the Accordion element is simple. Like everything else, just drag it into place and configure it to your liking.

shogun page builder accordion element

For functionality, you can choose to automatically keep the first pane open and whether you want to only keep one pane open at a time. 

You can also specify the icon (Plus, Chevron, or None), the text alignment, the font details, and the colors.

The Product Reviews element

product reviews element page builder

Your marketing may be top-notch, but one of the most persuasive voices for driving sales is that of your happy customers. Social proof must be a part of your ecommerce marketing strategy.

So, don’t miss out on the opportunity to show off product reviews across your store.

With Page Builder, you can drag and drop the customer reviews that you get from Yotpo and Shopify Product Reviews, then customize them to match your brand.

To start, just pull in a Product Box element and select the product for which you want to feature reviews. Then drag the Product Reviews element over and start updating colors, fonts, and display settings to make it look just right.

shogun page builder product reviews element

Your pages just got an upgrade

Using these powerful page elements, you can bring your store to life for your customers, keeping them engaged and encouraging them to convert.

With Shogun Page Builder, you have complete control over the look and feel of your store pages without having to bother with code. Leave the developers out of your day-to-day store design and make it look exactly how you envisioned it.

This is just a short list of the available elements you can use with Shogun Page Builder. You can start for free to see all the fantastic features at your disposal.


#cta-visual-pb#<cta-title>Start using these elements and many more today<cta-title>Try Shogun for free to start dragging and dropping your store together with these elements.Start building for free

Sean Flannigan

Sean is one of Shogun's tireless content marketers. When he isn't creating exciting ecommerce content, he's probably biking or at the park.