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

SC Product Options 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

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

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.” 

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. 

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 

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

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

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.

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. 

‍

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. 

‍

‍

‍