Guides & How-Tos

How to elevate your shopping experience with SC Product Options element + PageFly

Offer an elevated shopping experience on Shopify with the SC Product Options element integration for PageFly.

Customers today expect a fast, easy-to-use, error-free, mobile-friendly, personalized, multi-channel shopping experience. 

66% of customers say a frustrating experience on a website hurts their opinion of the brand overall. And 55% say a bad mobile experience makes them less likely to engage with a company. 

Nowadays you don’t need a team of coders to make changes to your website and improve your shopping experience. There are many easy-to-use and install applications that can give you the tools you need — no coding required — to customize your Shopify store. 

Many of these apps are built to play nice with other platforms and applications for seamless integration across your tech stack. 

In this article, we want to introduce you to two apps that integrate to give you a flexible suite of web customization tools: SC Product Options and Pagefly

We will specifically show you how to use the SC Product Options element within your Pagefly app. In order to get started, you’ll need to install Pagefly as well as SC Product Options on your Shopify store. Both are free to test out, so you can test out these tools without cost. 

SC Product Options element

SC Product Options element was created to provide Shopify merchants with more control over their products, things like product options or custom fields that create a better, more personalized shopping experience for customers. Let’s look at a quick example of SC Product Options in action:

Kiel James Patrick sells maritime-inspired clothing and jewelry and uses SC Product Options to offer different customization and personalization options.

For example, when a customer is considering purchasing a bracelet like the one below, they are able to choose color, size, monogram font and the monogram they want, completely personalizing their product before adding it to cart. 

Image Via: Kiel James Patrick

Shopify does not feature these options out-of-box. If custom development is off the table, an app like SC Product Options can make it easy to offer a more customized and personalized experience. Check out this article for more examples of stores using product options to offer an elevated experience. 

About SC Product Options element

Now that you’re up to speed on Product Options, let’s walk through how to use the SC Product Options element within Pagefly. This feature was designed to provide merchants with the product options and custom fields they need to create an ideal shopping experience for customers.

Ready to dive in? 

How to access SC Product Options element

The first thing you’ll want to do is add SC Product Options in the Pagefly Integrations window. Just follow these steps: 

Step 1: Add third party elements in the left toolbar. Next, click on the Edit your 3rd party elements button.

Step 2: In the Integrations popup page, search “SC Product Options.” 

Bold Product Options element

Step 3: Click on the SC Product Option element in the dropdown menu that appears. 

Step 4: Choose whichever variant you want to apply then drag and drop it to the page editor. 

Bold Product Options element

If you followed these steps you have now successfully added a SC Product Options variant to your editor page.

A note about variants

Variants refers to the number of configurations, colors, or options available for a single product. Out-of-the-box, Shopify only allows merchants to use up to 100 variants per product. While that may seem like plenty for a single product, let’s look at an example that reveals this may not be the case. 

Let’s say you are selling a shirt in five sizes. You also want the shirt to be available in 8 colors and have three print options available. A quick calculation (5 x 8 x 3 = 120) shows we have already exceeded Shopify’s variant limit. More complex customizable items like computers, bikes, or furniture could require thousands of variants per product. 

While there are some useful workarounds, SC Product Options is the simplest way to exceed Shopify’s variant limit and just offer the options you want for each product. 

Ready to continue? 

Configure your SC Product Options element 

Before using this element, you will have to install the SC Product Options app to your store and configure the options you want to use. 

In the SC Product Options dashboard, select Options > Create Option Set

Bold Product Options

Next create all the custom options you want to use for the product in the SC Product Options app. 

Bod Product Options

Finally, save all the changes you made by selecting Save Option Set. 

There, you have created a product option! You can create many option sets for different products as you like without worry about variant limits. 

Note: Occasionally option sets will say pending and not appear on live view right away. To speed up the process, go to Need Help? > Liquid Installation then select Begin automatic update.

Bold Product Options

Styling configuration

If you want to customize the styling of the SC Product Options element, you can do this in the Styling tab. 

Pick the fonts and spacing, border size and color, and effects you want to align your product page with your brand and offer your customers the best shopping experience imaginable. 

Bold Product Options element

Learn more information about the Styling tab here.

Wrapping up

We hope you enjoyed learning about one of many ways you can use SC Product Options to offer a better shopping experience. 

As the first operator of e-commerce tools, Shop Circle provides apps that help brands ignite sales, grow farther, faster, and scale without limits.

Download SC Product Options today to get a 14-day free trial. 

Subscribe to our newsletter

Thank you for joining us!
Oops! Something went wrong while submitting the form.
Close Cookie Preference Manager
Cookie Settings
By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage and assist in our marketing efforts.
Strictly Necessary (Always Active)
Cookies required to enable basic website functionality.
Made by Flinch 77
Oops! Something went wrong while submitting the form.
Cookies Preferences