Introduction
If you are offering discounts with your membership product(s), you can make use of a standalone Appstle snippet in your Shopify theme's code files, and make use of several different selectors in your catalog or product pages to display the final price your members pay.
Adding Member Pricing to your catalog pages
Step 1: Insert the standalone snippet in your Shopify theme's price liquid file.
Be sure to copy the snippet below:
<span class='appstle_membership_stand_alone_selector' data-product-handle='{{ product.handle }}' style="display:none;"></span>In your Shopify Admin, navigate to Online Store > Click 3 Dots Icon > Edit Code.
The file you will need to access is the one controlling for price. For this store's theme, that is price.liquid.
Now locate the part of the liquid code that handles the price. For this theme, that is <div class="price__regular">. The parent selector for this is directly above, which is <div class="price.
Paste the snippet inside the content of the parent selector, then click to Save.
Step 2: Add selectors in your Widget Settings
In Appstle Memberships, go to Settings > Customizations > Widget Settings. Scroll down until you find the Widget Selectors section.
In the first two fields, you will need to add the appropriate selectors to display the member price.
You can get these selectors by inspecting your browser's devtools in your catalog pages:
The Discount Perk block selector will be the same parent selector to the pricing, written in this format: div.price__container.
The Discount perk block parent selector will be the selector(s) that control for the entire product listing on the page. For this theme, they are div.card__content and div.card__information. Click to Save.
Adding Member Pricing to your product pages
Step 1: Insert the standalone snippet in your Shopify theme's price liquid file.
See above for the steps.
Step 2: Add selectors in your Widget Settings
In Appstle Memberships, go to Settings > Customizations > Widget Settings. Scroll down until you find the Widget Selectors section.
In the first two fields, you will need to add the appropriate selectors to display the member price.
You can get these selectors by inspecting your browser's devtools on a product page:
The Discount Perk block selector is where you will need to add selectors for the product information, price, and the wrapper than encompasses them. Here, they are div.card__content div.card__information, span.price-item price-item--regular.
The Discount perk block parent selector is where you will need to add the selector for the product price's container. Here, it is div.price__container. Click to Save.
Displaying the Member Price
For either option, catalog or individual product pages, you have the option to customize both the wording that accompanies the member price and the placement of that price in Member Price Text and Member Price Placement, respectively.
For Text, use the {{price}} and {{membershipName}} tokens to display your member price and the name of the membership plan you created within Appstle. If you wish, you can also add any additional wording you would like. Just be careful that you do not tamper with the tokens, or else they may break.
For Placement, click the dropdown to select where to place the member price in relation to the standard price: Before, After, First Child, Last Child.
Here are examples of prices being displayed on both the catalog and product pages to give you an idea of what you can expect:
Catalog
Product
Note: If you are having trouble locating the necessary selectors to make these function properly, feel free to reach out to our support team at support@appstle.com and we will assist you.