If you have added the Add-ons app, but your add-on products are not appearing in your subscribe flow, the likely issue is that you are using an older theme. This is easily rectified though by adding the needed files.
- Go to the Design tab in the seller portal and then click Code. Click on the "HTML" section and then the "subscribe_flow" folder. If you only see the addons_step.html file in that folder then the problem you are running into is that you need other files in that folder as well (these are present by default on newer themes):
If your file hiearchy doesn't look like this then you probably have a newer theme and aren't running into this exact problem. Please contact support so we can investigate your issue.
- To fix the issue, you'll need to create new html files and paste the code below into those files so your folder resembles this:
- Click the "Add New" button under the subscribe_flow folder and name the file "progress_bar.html" and then paste the following code into that file and save it:
{% macro progress_bar(flow_data, flow_step) %}
<div class="headline-container">
<div class="headline">
<div class="container">
<div class="row">
{% set ns = (flow_data.steps | length) + 2 %}
{% set offset = (12 % ns) // 2 %}
{% set col = 12 // ns %}
<div class="step selected col-md-{{ col }} col-md-offset-{{ offset}}">
<div class='step-arrow'></div>
<p>Product</p>
<div class='step-arrow after'></div>
</div>{% for step in flow_data.steps %}
<div class="step col-md-{{ col }} {% if step.index <= flow_step.index %}selected{% endif %}">
<div class='step-arrow'></div>{% if step.type == 'variant' %}
<p>{{ step.name }}</p>
{% elif step.type == 'terms' %}
<p>Terms</p>
{% elif step.type == 'addons' %}
<p>Add-Ons</p>
{% elif step.type == 'survey' %}
<p>Survey</p>
{% endif %}<div class='step-arrow after'></div>
</div>
{% endfor %}<div class="step col-md-{{ col }}">
<div class='step-arrow'></div>
<p>Subscribe</p>
<div class='step-arrow end'></div>
</div>
</div>
</div>
</div>
</div>
{% endmacro %} - Click the "Add New" button under the subscribe_flow folder and name the file "survey_step.html" and then paste the following code into that file and save it:
{% extends "base.html" %}
{% block title %}{{ flow_step.page_title | default("Survey", True) }}{% endblock %}{% block page_content %}
{% set error = flow.get_error() %}
<div class="main">
{% from "subscribe_flow/progress_bar.html" import progress_bar %}
{{ progress_bar(flow_data, flow_step) }}<div class="headline-container">
<div class="headline copy">
<div class="container">
<div class="subscribe_headline heading">
<h2>{{ flow_step.page_title | default("Survey", True) }}</h2>
</div>
<div class="subscribe_subheading paragraph">
<p>{{ flow_step.page_description | default("", True) }}</p>
{% if error %}
<p class="survey-error main">{{ error }}</p>
{% endif %}
</div>
</div>
</div>
</div>{{ survey(flow_step) }}
{% if settings.prev1_img or settings.prev2_img or settings.prev3_img %}
{% from "subscribe_flow/previous_boxes.html" import previous_boxes %}
{{ previous_boxes(settings) }}
{% endif %}
</div>
{% endblock %}
{% macro survey(survey) %}
<div class="subscription-options theme2-bg">
<div class="container">
<div class="row promos2"><div class="col-sm-8 col-sm-offset-2 survey" name="{{ survey.slug }}">
<form role="form" method="POST" action="/subscribe_flow/survey" class="form-group">
{% for field in survey.fields %}
{% if field.type == 'text' %}
{{ text_field(survey, field) }}
{% elif field.type == 'paragraph' %}
{{ paragraph_field(survey, field) }}
{% elif field.type == 'multiple_choice' %}
{{ multi_choice_field(survey, field) }}
{% elif field.type == 'checkboxes' %}
{{ checkboxes_field(survey, field) }}
{% elif field.type == 'date' %}
{{ date_field(survey, field) }}
{% endif %}
{% endfor %}
<input type="hidden" name="next_url" value="{{ survey | subscribe_flow_url }}"/>
<input type="hidden" name="survey_id" value="{{ survey.id }}"/>
<div class="select-button-container">
<button type="submit" class="primary-button">Continue</button>
</div>
</form>
</div></div>
</div>
</div>
{% endmacro %}
{% macro text_field(survey, field) %}
{% set error = flow.get_error(field) %}
<div class="row survey-field survey-field-{{ field.type }} form-group" name="{{ field.slug }}">
<div class="col-sm-12">
<h2 class="question">{{ field.name }}</h2>
{% if field.required %}
<h2 class="required"></h2>
{% endif %}
{% if field.description %}
<p class="form-group">{{ field.description }}</p>
{% endif %}
</div>
<div class="col-sm-12">
<input type="text" name="{{ field.id }}" class="form-control {% if error %} survey-error-focused {% endif %}" value="{{ flow.get_value(field) }}"/>
{% if error %}
<span class="survey-error">{{ error }}</span>
{% endif %}
</div>
</div>
{% endmacro %}
{% macro paragraph_field(survey, field) %}
{% set error = flow.get_error(field) %}
<div class="row survey-field survey-field-{{ field.type }} form-group" name="{{ field.slug }}">
<div class="col-sm-12">
<h2 class="question">{{ field.name }}</h2>
{% if field.required %}
<h2 class="required"></h2>
{% endif %}
{% if field.description %}
<p class="form-group">{{ field.description }}</p>
{% endif %}
</div>
<div class="col-sm-12">
<textarea name="{{ field.id }}" class="form-control {% if error %} survey-error-focused {% endif %}">{{ flow.get_value(field) }}</textarea>
{% if error %}
<span class="survey-error">{{ error }}</span>
{% endif %}
</div>
</div>
{% endmacro %}
{% macro multi_choice_field(survey, field, error) %}
{% set error = flow.get_error(field) %}
<div class="row survey-field survey-field-{{ field.type }} form-group" name="{{ field.slug }}">
<div class="col-sm-12">
<h2 class="question">{{ field.name }}</h2>
{% if field.required %}
<h2 class="required"></h2>
{% endif %}
{% if field.description %}
<p class="form-group">{{ field.description }}</p>
{% endif %}
</div>
<div class="col-sm-12">
<div class="select-container {% if error %} survey-error-focused {% endif %}">
{% for option in field.options %}
<div class="radio option">
<label for="{{ option.id }}" name="{{ option.slug }}">
<input type="radio" id="{{ option.id }}" name="{{ field.id }}" value="{{ option.value }}" {{ flow.get_check(field, option.value) }}/>
<span class="option">{{ option.value }}</span>
</label>
</div>
{% endfor %}
</div>
{% if error %}
<span class="survey-error">{{ error }}</span>
{% endif %}
</div>
</div>
{% endmacro %}
{% macro checkboxes_field(survey, field, error) %}
{% set error = flow.get_error(field) %}
<div class="row survey-field survey-field-{{ field.type }} form-group" name="{{ field.slug }}">
<div class="col-sm-12">
<h2 class="question">{{ field.name }}</h2>
{% if field.required %}
<h2 class="required"></h2>
{% endif %}
{% if field.description %}
<p class="col-sm-12 description">{{ field.description }}</p>
{% endif %}
</div>
<div class="col-sm-12">
<div class="select-container {% if error %} survey-error-focused {% endif %}">
{% for option in field.options %}
<div class="checkbox option">
<label for="{{ option.id }}" name="{{ option.slug }}">
<input type="checkbox" id="{{ option.id }}" name="{{ field.id }}" value="{{ option.value }}" {{ flow.get_check(field, option.value) }}/>
<span class="option">{{ option.value }}</span>
</label>
</div>
{% endfor %}
</div>
{% if error %}
<span class="survey-error">{{ error }}</span>
{% endif %}
</div>
</div>
{% endmacro %}
{% macro date_field(survey, field) %}
{% set error = flow.get_error(field) %}
<div class="row survey-field survey-field-{{ field.type }} form-group" name="{{ field.slug }}">
<div class="col-sm-12">
<h2 class="question">{{ field.name }}</h2>
{% if field.required %}
<h2 class="required"></h2>
{% endif %}
{% if field.description %}
<p class="col-sm-12 description">{{ field.description }}</p>
{% endif %}
</div>
<div class="col-sm-12">
<input type="date" name="{{ field.id }}" class="form-control {% if error %} survey-error-focused {% endif %}" value="{{ flow.get_value(field) }}" pattern="[0-9]{2}/[0-9]{2}/[0-9]{4}" placeholder="MM/DD/YYYY" />
{% if error %}
<span class="survey-error">{{ error }}</span>
{% endif %}
</div>
</div>
{% endmacro %} - Click the "Add New" button under the subscribe_flow folder and name the file "terms_step.html" and then paste the following code into that file and save it:
{% extends "base.html" %}
{% block title %}{{ flow_step.page_title | default("Choose a Term", True) }}{% endblock %}
{% block page_content %}
<div role="main">
{% from "subscribe_flow/progress_bar.html" import progress_bar %}
{{ progress_bar(flow_data, flow_step) }}<div class="headline-container">
<div class="headline copy">
<div class="container">
<div class="subscribe_headline heading">
<h2>{{ flow_step.page_title | default("Choose a Term", True) }}</h2>
</div>
<div class="subscribe_subheading paragraph">
<p>{{ flow_step.page_description | default("", True) }}</p>
</div>
</div>
</div>
</div>
<div class="subscription-options theme2-bg"> <!-- Begin term list -->
<div class="container">
<div class="row promos2">{#
Loop over each of the term price objects attached the chosen product instance and display the enabled term prices
#}
{% set np = flow_step.terms | length %}
{% for term in flow_step.terms %}
{% if term.enabled %}
<div class="col-md-4 {% if np == 1 %}col-md-offset-4{% elif np == 2 and loop.first %}col-md-offset-2{% endif %}">
<div class="promo-border"><!-- Begin term -->
<h2>{{ term.name }}</h2><a href="{{ term | subscribe_flow_url }}">
{#
Uses a placeholder image for every term. This can be changed to use a different image for each term using the visual designer.
#}
<div class="product_image_container">
{{ term | object_img_tag(default_img_path="images/shaving-box" ~ loop.index ~ ".png", css_class="product_image") }}
</div>
</a><div class="description-container text-center">
<div class="description">
{#
Renders the term description if one exists, otherwise uses the default string
#}
<p>{{ term.description | default("", True) }}</p>
</div>
</div><p class="small-heading-grp form-group">
{#
Display the term price formatted properly for the current store currency
#}
{{ term.price | currency }}
</p><div class="select-button-container">
{#
Creates a link which advances the subscribe flow to the next step, choosing the current subscription term as well any previously specified product and variants
#}
<a type="button" href="{{ term | subscribe_flow_url }}" class="primary-button" data-barley="terms-{{term.id}}-choose-btn" data-barley-editor="link">Select</a>
</div>
</div> <!-- End term -->
</div>
{% endif %}
{% endfor %}</div>
</div>
</div>
</div> <!-- End term list -->{% if settings.prev1_img or settings.prev2_img or settings.prev3_img %}
{% from "subscribe_flow/previous_boxes.html" import previous_boxes %}
{{ previous_boxes(settings) }}
{% endif %}{% endblock %}
- Click the "Add New" button under the subscribe_flow folder and name the file "variant_step.html" and then paste the following code into that file and save it:
{% extends "base.html" %}
{% block title %}{{ flow_step.page_title | default("Choose an Option", True) }}{% endblock %}
{% block page_content %}
<div role="main">
{% from "subscribe_flow/progress_bar.html" import progress_bar %}
{{ progress_bar(flow_data, flow_step) }}<div class="headline-container">
<div class="headline copy">
<div class="container">
<div class="subscribe_headline heading">
<h2>{{ flow_step.page_title | default("Choose an Option", True) }}</h2>
</div>
<div class="subscribe_subheading paragraph">
<p>{{ flow_step.page_description | default("", True) }}</p>
</div>
</div>
</div>
</div>
<div class="subscription-options theme2-bg"> <!-- Begin variant list -->
<div class="container">
<div class="row promos2">{#
Loop over each of the variant value objects attached the current variant
#}
{% set np = flow_step.values | length %}
{% for value in flow_step.values %}
<div class="col-md-4 {% if np == 1 %}col-md-offset-4{% elif np == 2 and loop.first %}col-md-offset-2{% endif %}">
<div class="promo-border"><!-- Begin term -->
<h2>{{ value.value }}</h2><a href="{{ value | subscribe_flow_url }}">
{#
Creates an image tag if one is uploaded to the variant value model. Otherwise it creates an image tag from the default image (images/variant_placeholder.jpg)
#}
<div class="product_image_container">
{{ value | object_img_tag(default_img_path=settings.product_placeholder_img, css_class="product_image") }}
</div>
</a><div class="description-container text-center">
<div class="description">
{#
Renders the variant description if one exists, otherwise uses the default string
#}
<p>{{ value.description | default("", True) }}</p>
</div>
</div><div class="select-button-container">
{#
Creates a link which advances the subscribe flow to the next step, choosing the current subscription variant as well any previously specified product and terms
#}
<a class="primary-button" href="{{ value | subscribe_flow_url }}" data-barley="variant-{{value.id}}-choose-btn" data-barley-editor="link">Select</a>
</div>
</div> <!-- End term -->
</div>
{% endfor %}</div>
</div>
</div>
</div>{% if settings.prev1_img or settings.prev2_img or settings.prev3_img %}
{% from "subscribe_flow/previous_boxes.html" import previous_boxes %}
{{ previous_boxes(settings) }}
{% endif %}{% endblock %}
- Click the "Add New" button under the subscribe_flow folder and name the file "previous_boxes.html" and then paste the following code into that file and save it:
{% macro previous_boxes(settings) %}
<div class="previous-boxes-title">
<div class="container">
<div class="row">
<div class="heading" data-barley="{% if gift %}gift.{% endif %}subscribe_prev_boxes_title" data-barley-editor="plus">
<h3>Previous Boxes</h3>
</div>
<div class="paragraph" data-barley="{% if gift %}gift.{% endif %}subscribe_prev_boxes_subtitle" data-barley-editor="advanced">Past boxes have included products like these:</div>
</div>
</div>
</div>
<div class="previous-boxes-container">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="previous-container">
<div class="previous-img" data-barley="{% if gift %}gift.{% endif %}home_seenin_img1" data-barley-editor="image" data-width="210" data-height="139">
<img src="{{ settings.prev1_img | asset_url }}"/>
</div>
<div class="paragraph" data-barley="{% if gift %}gift.{% endif %}subscribe_prev1_title" data-barley-editor="advanced">{{ settings.prev1_title | safe }}</div>
</div>
</div>
<div class="col-md-4">
<div class="previous-container">
<div class="previous-img" data-barley="{% if gift %}gift.{% endif %}home_seenin_img2" data-barley-editor="image" data-width="201" data-height="143">
<img src="{{ settings.prev2_img | asset_url }}"/>
</div>
<div class="paragraph" data-barley="{% if gift %}gift.{% endif %}subscribe_prev2_title" data-barley-editor="advanced">{{ settings.prev2_title | safe }}</div>
</div>
</div>
<div class="col-md-4">
<div class="previous-container" >
<div class="previous-img" data-barley="{% if gift %}gift.{% endif %}home_seenin_img3" data-barley-editor="image" data-width="211" data-height="141">
<img src="{{ settings.prev3_img | asset_url }}"/>
</div>
<div class="paragraph" data-barley="{% if gift %}gift.{% endif %}subscribe_prev3_title" data-barley-editor="advanced">{{ settings.prev3_title | safe }}</div>
</div>
</div>
</div>
</div>
</div>
{% endmacro %} - After adding and saving these files to your published theme, you should be able to see the add-ons step on your site