How to add the Infinite Options element to your pages

This article will guide you through the steps in adding the Infinite Options element to your page.

Install and configure Infinite Options in Shopify Admin

Before we start, you will need to install the app first by following these steps:

Step 1: Install the Infinite Options app from Shopify App Store by clicking on the “Add app” button and fill in your store domain if needed.



Step 2: Hit “Install app” after reviewing the permissions.



Once the installation process is complete, you will be taken to the Infinite Options app’s Dashboard to configure the app.

Otherwise, you can always locate the app in your store’s app list, under Shopify Admin > Apps.



As GemPages will draw data from the Infinite Options app, you need to have it all configured before designing. 


Step 3:  Finalize the in-app settings. From the App Dashboard, you will find help docs and customer support to get all configurations done.

Add the Infinite Options element To The GemPages Editor

Once the Infinite Options app has been installed successfully on your store, it’s time to install the element in GemPages Editor.

Step 1: Head over to the GemPages Dashboard, select one of your pages and enter the Editor via the “Edit” button.

Step 2: In the Editor, click on the “Library” button on the top bar, then switch to the Elements tab.


Step 3: Search for “Infinite Options” using the search bar and click on the result.



Step 4: Hit the blue “Add Element” button to install the element on your Editor.


Step 5: Exit the Library and you will find the newly added Infinite Options element on your left sidebar, under the Third Party section.

Set up the Infinite Options element in GemPages

Once you have set up your custom fields in Infinite Options, it’s time to put the Infinite Options element onto your page in the Editor.

Since the Infinite Options app offers product options, it has to be nested inside a Product module.

Step 1: In the GemPages Dashboard, select one of your pages and enter the Editor via the “Edit” button.

Step 2: Search for the Infinite Options element, drag & drop it onto your preferred spot inside the Product module.

If you don’t have a Product module yet, please drag & drop one onto your page first.



Configure the Settings tab

In the Settings tab, you will have the option to align the element and add extra classes.



Set the Infinite Options element’s horizontal position to Left, Center, or Right.

Extra Class

If you excel at coding and would like to further customize the element, feel free to add a class name into this field and refer to it later on in the CSS file.


Configure the Design tab

The Design tab holds all the tools you need to fine-tune the look of your Infinite Options element before publishing.

Hit “Save” and “Publish” once you are happy with the result to update your front store.

Here’s an example of what you can achieve with the Infinite Options element.

Check out more of our articles to accelerate your GemPages journey!

Should you require any further assistance, please feel free to contact our GemPages Support Team at any time. We can be reached via email or live chat.

Was this helpful?